<!doctype html><html lang="fr"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Satisfying Bounce - vidéos satisfaisantes et illusions d'optique, jouer gratuitement en ligne</title> <meta name="description" content="Quinze vidéos verticales satisfaisantes et illusions d'optique animées faites en PHP : un zoom infini d'anneaux à franchir, des balles qui se multiplient, des escaliers où ça grossit sans grossir, des tunnels, des dominos, des chats qui miaulent, des ondes de pendules. Chaque rebond joue une note."> <link rel="canonical" href="https://{{DOMAIN}}/fr/"> <link rel="alternate" hreflang="en" href="https://{{DOMAIN}}/"> <link rel="alternate" hreflang="fr" href="https://{{DOMAIN}}/fr/"> <link rel="alternate" hreflang="x-default" href="https://{{DOMAIN}}/"> <link rel="icon" href="../images/favicon.png"> <meta property="og:type" content="website"> <meta property="og:title" content="Satisfying Bounce"> <meta property="og:description" content="Quinze vidéos verticales satisfaisantes et illusions d'optique animées faites en PHP : un zoom infini d'anneaux à franchir, des balles qui se multiplient, des escaliers où ça grossit sans grossir, des tunnels, des dominos, des chats qui miaulent, des ondes de pendules. Chaque rebond joue une note."> <meta property="og:url" content="https://{{DOMAIN}}/fr/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="fr"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Satisfying Bounce"> <meta name="twitter:description" content="Quinze vidéos verticales satisfaisantes et illusions d'optique animées faites en PHP : un zoom infini d'anneaux à franchir, des balles qui se multiplient, des escaliers où ça grossit sans grossir, des tunnels, des dominos, des chats qui miaulent, des ondes de pendules. Chaque rebond joue une note."> <meta name="twitter:image" content="https://{{DOMAIN}}/images/og.png"> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "VideoGame", "name": "Satisfying Bounce", "description": "Quinze vidéos verticales satisfaisantes et illusions d'optique animées faites en PHP : un zoom infini d'anneaux à franchir, des balles qui se multiplient, des escaliers où ça grossit sans grossir, des tunnels, des dominos, des chats qui miaulent, des ondes de pendules. Chaque rebond joue une note.", "url": "https://{{DOMAIN}}/fr/", "genre": "Simulation", "gamePlatform": [ "Web browser", "PC", "Mobile" ], "applicationCategory": "Game", "operatingSystem": "Any", "image": "https://{{DOMAIN}}/images/og.png", "screenshot": [ "https://{{DOMAIN}}/images/zoom-fr.jpg", "https://{{DOMAIN}}/images/gap-fr.jpg", "https://{{DOMAIN}}/images/rings-fr.jpg", "https://{{DOMAIN}}/images/multiply-fr.jpg", "https://{{DOMAIN}}/images/marble-fr.jpg", "https://{{DOMAIN}}/images/plinko-fr.jpg" ], "isAccessibleForFree": true, "inLanguage": "fr", "potentialAction": { "@type": "PlayAction", "target": "https://{{DOMAIN}}/play/" }} </script> <style> :root { --bg: #0d0f1a; --panel: #171a2b; --text: #eef0ff; --muted: #a7acc9; --accent: #ffcc33; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; } main { max-width: 1100px; margin: 0 auto; padding: 32px 16px 64px; } header { text-align: center; padding: 24px 0 8px; } h1 { font-size: clamp(32px, 7vw, 56px); margin: 0 0 8px; letter-spacing: 2px; } h2 { margin: 48px 0 16px; font-size: 24px; } p, li { color: var(--muted); } .play { display: inline-block; margin: 20px 0; padding: 16px 40px; border-radius: 12px; background: var(--accent); color: #111; font-weight: 800; font-size: 22px; text-decoration: none; box-shadow: 0 6px 0 #b38b00; } .play:active { transform: translateY(4px); box-shadow: 0 2px 0 #b38b00; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; } .clip video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 12px; background: #000; display: block; } h3 { margin: 12px 0 4px; } .clip p { margin: 0; font-size: 15px; line-height: 1.5; } footer { text-align: center; color: var(--muted); font-size: 14px; margin-top: 56px; } a { color: var(--accent); } .langs { text-align: center; font-size: 14px; margin: 0; padding-top: 12px; } .langs a, .langs b { margin: 0 8px; } .listen { color: var(--accent); font-weight: 700; } </style></head><body> <main> <nav class="langs" aria-label="Langues"><a href="../" hreflang="en" lang="en">English</a><b>Français</b></nav> <header> <h1>Satisfying Bounce</h1> <p>Quinze vidéos satisfaisantes et illusions d'optique faites en PHP. Chaque rebond joue une note.</p> <a class="play" href="../play/">▶ Jouer</a> </header> <p class="listen" style="text-align: center">Mets le son 🔊</p> <h2>Quinze vidéos à regarder (avec le son)</h2> <section> <h2>S'échapper et rebondir</h2> <div class="gallery"> <article class="clip" id="zoom"><video src="../videos/zoom-fr.mp4" poster="../images/zoom-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="S'échapper, zoomer, recommencer"></video> <h3>S'échapper, zoomer, recommencer</h3><p>Des anneaux dans des anneaux, chacun avec une ouverture qui tourne à sa vitesse. La balle rebondit jusqu'à trouver la sortie, l'anneau quitté éclate, la caméra glisse vers le suivant et de nouveaux anneaux apparaissent : un zoom infini.</p></article> <article class="clip" id="gap"><video src="../videos/gap-fr.mp4" poster="../images/gap-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Peut-elle trouver la sortie ?"></video> <h3>Peut-elle trouver la sortie ?</h3><p>Une balle rebondit dans un cercle fermé sur trois quarts pendant que l'ouverture tourne. Chaque rebond lui donne de l'énergie : elle monte, puis trouve la sortie. L'ouverture suivante est plus étroite.</p></article> <article class="clip" id="rings"><video src="../videos/rings-fr.mp4" poster="../images/rings-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Brise tous les anneaux"></video> <h3>Brise tous les anneaux</h3><p>Sept anneaux les uns dans les autres. Chacun se brise après trois chocs, en partant du centre, avec une cloche plus aiguë.</p></article> <article class="clip" id="multiply"><video src="../videos/multiply-fr.mp4" poster="../images/multiply-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Ça ne s'arrête pas de se multiplier"></video> <h3>Ça ne s'arrête pas de se multiplier</h3><p>Chaque choc sur la paroi fait naître une nouvelle balle, dix au plus : quand le cercle est plein, la plus ancienne s'efface. On suit chaque rebond et on entend chaque note.</p></article> </div> </section> <section> <h2>Tomber, rouler, basculer</h2> <div class="gallery"> <article class="clip" id="marble"><video src="../videos/marble-fr.mp4" poster="../images/marble-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Course de billes"></video> <h3>Course de billes</h3><p>Des billes dévalent un zig-zag de rampes. Chaque rampe est une note d'une gamme : les billes qui tombent jouent un arpège cascadant.</p></article> <article class="clip" id="plinko"><video src="../videos/plinko-fr.mp4" poster="../images/plinko-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Des clous qui jouent de la musique"></video> <h3>Des clous qui jouent de la musique</h3><p>Des balles tombent à travers un champ de clous. Chaque clou s'allume et sonne une note, plus aiguë vers la droite, et un carillon retentit en bas.</p></article> <article class="clip" id="dominos"><video src="../videos/dominos-fr.mp4" poster="../images/dominos-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="La réaction en chaîne parfaite"></video> <h3>La réaction en chaîne parfaite</h3><p>Des dominos en spirale tombent l'un après l'autre, chacun sonnant une note plus aiguë et passant du blanc à sa couleur. Puis ils se relèvent tous, à l'envers. Une boucle parfaite.</p></article> <article class="clip" id="pendulum"><video src="../videos/pendulum-fr.mp4" poster="../images/pendulum-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Onde de pendules"></video> <h3>Onde de pendules</h3><p>Douze pendules de longueurs légèrement différentes partent ensemble, dérivent en vagues et en enchevêtrements, et se réalignent après exactement un cycle. Chacun sonne sa propre note.</p></article> </div> </section> <section> <h2>Illusions d'optique</h2> <div class="gallery"> <article class="clip" id="stairs"><video src="../videos/stairs-fr.mp4" poster="../images/stairs-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Ça grossit à chaque marche"></video> <h3>Ça grossit à chaque marche</h3><p>Une forme descend des marches de plus en plus grandes et grossit avec elles. La caméra dézoome en même temps : sa taille à l'écran ne change jamais. On a l'impression qu'elle grossit sans cesse alors que non.</p></article> <article class="clip" id="tunnel"><video src="../videos/tunnel-fr.mp4" poster="../images/tunnel-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Ne fixe pas trop longtemps"></video> <h3>Ne fixe pas trop longtemps</h3><p>Un tunnel sans fin de carrés vrillés, chacun un cran plus loin sur le cercle des couleurs. Seule la taille des carrés change, mais l'image semble tourner et vous aspirer.</p></article> <article class="clip" id="spiral"><video src="../videos/spiral-fr.mp4" poster="../images/spiral-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Regarde le centre"></video> <h3>Regarde le centre</h3><p>Une spirale de points qui ne font que tourner, et pourtant les bras semblent s'écouler vers l'extérieur. Chaque bras qui passe en haut ou en bas sonne une note d'une gamme par tons entiers, rêveuse.</p></article> <article class="clip" id="checker"><video src="../videos/checker-fr.mp4" poster="../images/checker-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="C'est parfaitement plat"></video> <h3>C'est parfaitement plat</h3><p>Un damier dont les cases bougent et gonflent avec une vague : la grille plate paraît courbe et profonde. Une note et une vague de lumière à chaque temps.</p></article> <article class="clip" id="ripple"><video src="../videos/ripple-fr.mp4" poster="../images/ripple-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Aucun point ne bouge"></video> <h3>Aucun point ne bouge</h3><p>Une grille de points dont la taille ondule depuis le centre, comme une lentille qui bombe vers vous. La grille plate paraît en 3D et les points semblent s'éloigner.</p></article> </div> </section> <section> <h2>Chats et pluie : des sons doux</h2> <div class="gallery"> <article class="clip" id="cats"><video src="../videos/cats-fr.mp4" poster="../images/cats-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Des chats qui miaulent"></video> <h3>Des chats qui miaulent</h3><p>Trois chats ronds rebondissent dans une boîte et miaulent à chaque rebond. Les miaous sont synthétisés, chaque chat a sa hauteur dans une gamme pentatonique pour chanter ensemble, et un ronronnement gronde en dessous.</p></article> <article class="clip" id="rain"><video src="../videos/rain-fr.mp4" poster="../images/rain-fr.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Pluie sur une mare calme"></video> <h3>Pluie sur une mare calme</h3><p>Une mare ASMR : des gouttes lentes, des cercles doux qui s'étendent et se croisent, et un son de goutte rond sur une gamme pentatonique mineure. Rien ne presse.</p></article> </div> </section> <section> <h2>Ce qui les rend satisfaisantes</h2> <ul><li>Une accroche dès les premières secondes : la balle bouge déjà et une courte légende dit quoi attendre.</li><li>Chaque rebond est une note : l'image et le son concordent exactement ; enveloppes douces, gammes pentatoniques, aucun clic agressif.</li><li>Une tension qui monte : des ouvertures qui se resserrent, des anneaux qui se rapprochent, des zooms qui vont plus loin.</li><li>Des boucles propres : les illusions et les pendules finissent exactement où elles ont commencé.</li></ul> </section> <section> <h2>Comment ça marche</h2> <p>Chaque scène est une simulation ou une illusion dessinée en HD, jouée à pas fixe : la même graine donne toujours la même vidéo. Chaque rebond joue une note d'une gamme ou d'une mélodie du domaine public, avec traînées, étincelles, écrasement et étirement et un léger flash. Les zooms de caméra sont une simple transformation du dessin : la physique ne les voit jamais. Le jeu rend aussi chaque scène hors ligne en MP4 1080 x 1920 avec son son, en français et en anglais, pour TikTok, Shorts et Reels.</p> </section> <section> <h2>Commandes</h2> <ul><li><b>Menu</b> : flèches et Entrée, ou toucher, pour choisir une scène ; <b>Langue</b> bascule français / anglais.</li><li><b>R</b> ou un toucher : relancer la scène. <b>Échap</b> : retour au menu.</li></ul> </section> <p style="text-align: center"><a class="play" href="../play/">▶ Commencer</a></p> <footer>Fait en PHP avec JumPHP.</footer> </main></body></html>