<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Satisfying Bounce - satisfying videos and optical illusions, play free online</title> <meta name="description" content="Fifteen satisfying vertical videos and animated optical illusions made in PHP: an infinite zoom of rings to escape, balls that multiply, stairs where it grows without growing, tunnels, dominoes, meowing cats, pendulum waves. Every bounce plays a note."> <link rel="canonical" href="https://{{DOMAIN}}/"> <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="Fifteen satisfying vertical videos and animated optical illusions made in PHP: an infinite zoom of rings to escape, balls that multiply, stairs where it grows without growing, tunnels, dominoes, meowing cats, pendulum waves. Every bounce plays a note."> <meta property="og:url" content="https://{{DOMAIN}}/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="en"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Satisfying Bounce"> <meta name="twitter:description" content="Fifteen satisfying vertical videos and animated optical illusions made in PHP: an infinite zoom of rings to escape, balls that multiply, stairs where it grows without growing, tunnels, dominoes, meowing cats, pendulum waves. Every bounce plays a 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": "Fifteen satisfying vertical videos and animated optical illusions made in PHP: an infinite zoom of rings to escape, balls that multiply, stairs where it grows without growing, tunnels, dominoes, meowing cats, pendulum waves. Every bounce plays a note.", "url": "https://{{DOMAIN}}/", "genre": "Simulation", "gamePlatform": [ "Web browser", "PC", "Mobile" ], "applicationCategory": "Game", "operatingSystem": "Any", "image": "https://{{DOMAIN}}/images/og.png", "screenshot": [ "https://{{DOMAIN}}/images/zoom-en.jpg", "https://{{DOMAIN}}/images/gap-en.jpg", "https://{{DOMAIN}}/images/rings-en.jpg", "https://{{DOMAIN}}/images/multiply-en.jpg", "https://{{DOMAIN}}/images/marble-en.jpg", "https://{{DOMAIN}}/images/plinko-en.jpg" ], "isAccessibleForFree": true, "inLanguage": "en", "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="Languages"><b>English</b><a href="fr/" hreflang="fr" lang="fr">Français</a></nav> <header> <h1>Satisfying Bounce</h1> <p>Fifteen satisfying videos and optical illusions made in PHP. Every bounce plays a note.</p> <a class="play" href="play/">▶ Play</a> </header> <p class="listen" style="text-align: center">Turn the sound on 🔊</p> <h2>Fifteen videos to watch (sound on)</h2> <section> <h2>Escape and bounce</h2> <div class="gallery"> <article class="clip" id="zoom"><video src="videos/zoom-en.mp4" poster="images/zoom-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Escape, zoom, repeat"></video> <h3>Escape, zoom, repeat</h3><p>Rings inside rings, each with an opening that turns at its own speed. The ball bounces until it finds the exit, the ring it left bursts, the camera glides out to the next one, and new rings keep appearing: an infinite zoom.</p></article> <article class="clip" id="gap"><video src="videos/gap-en.mp4" poster="images/gap-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Can it find the exit?"></video> <h3>Can it find the exit?</h3><p>A ball bounces in a circle closed on three quarters while the opening turns. Each bounce gives it energy: it climbs, then finds the exit. The next opening is narrower.</p></article> <article class="clip" id="rings"><video src="videos/rings-en.mp4" poster="images/rings-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Break all the rings"></video> <h3>Break all the rings</h3><p>Seven rings inside each other. Each one breaks after three hits, from the inside, with a higher bell.</p></article> <article class="clip" id="multiply"><video src="videos/multiply-en.mp4" poster="images/multiply-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="It keeps multiplying"></video> <h3>It keeps multiplying</h3><p>Every hit on the wall makes a new ball, ten at most: when the circle is full the oldest one fades away, so you can still follow every bounce and hear every note.</p></article> </div> </section> <section> <h2>Falling, rolling, toppling</h2> <div class="gallery"> <article class="clip" id="marble"><video src="videos/marble-en.mp4" poster="images/marble-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Marble run"></video> <h3>Marble run</h3><p>Marbles drop down a zig-zag of ramps. Every ramp is a note of a scale, so the falling marbles play a rippling arpeggio.</p></article> <article class="clip" id="plinko"><video src="videos/plinko-en.mp4" poster="images/plinko-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Pegs that play music"></video> <h3>Pegs that play music</h3><p>Balls fall through a field of pegs. Every peg lights up and rings a note, the further right the higher, and a chime sounds at the bottom.</p></article> <article class="clip" id="dominos"><video src="videos/dominos-en.mp4" poster="images/dominos-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="The perfect chain reaction"></video> <h3>The perfect chain reaction</h3><p>Dominoes on a spiral topple one after the other, each ringing a higher note and turning from white to its colour. Then they all stand up again, backwards. A seamless loop.</p></article> <article class="clip" id="pendulum"><video src="videos/pendulum-en.mp4" poster="images/pendulum-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Pendulum wave"></video> <h3>Pendulum wave</h3><p>Twelve pendulums of slightly different lengths start together, drift into waves and tangles, and line up again after exactly one cycle. Each one rings its own note.</p></article> </div> </section> <section> <h2>Optical illusions</h2> <div class="gallery"> <article class="clip" id="stairs"><video src="videos/stairs-en.mp4" poster="images/stairs-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="It grows with every step"></video> <h3>It grows with every step</h3><p>A shape hops down steps that get bigger and bigger, and it grows with them. The camera zooms out in step, so its size on screen never changes: it feels like it keeps growing while it does not.</p></article> <article class="clip" id="tunnel"><video src="videos/tunnel-en.mp4" poster="images/tunnel-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Do not stare too long"></video> <h3>Do not stare too long</h3><p>An endless tunnel of twisted squares, each one a step further round the colour wheel. Nothing moves but the size of the squares, yet the picture seems to spin and pull you in.</p></article> <article class="clip" id="spiral"><video src="videos/spiral-en.mp4" poster="images/spiral-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Watch the centre"></video> <h3>Watch the centre</h3><p>A spiral of dots that only circle, yet the arms seem to flow outwards. Each arm that passes the top or the bottom rings a note of a dreamy whole-tone scale.</p></article> <article class="clip" id="checker"><video src="videos/checker-en.mp4" poster="images/checker-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="It is perfectly flat"></video> <h3>It is perfectly flat</h3><p>A checkerboard whose tiles move and swell with a travelling wave: the flat grid looks curved and deep. A note and a wave of light on every beat.</p></article> <article class="clip" id="ripple"><video src="videos/ripple-en.mp4" poster="images/ripple-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="None of the dots move"></video> <h3>None of the dots move</h3><p>A grid of dots whose size ripples out from the middle, like a lens bulging towards you. The flat grid looks 3D and the dots seem to stream away.</p></article> </div> </section> <section> <h2>Cats and rain: sounds to melt to</h2> <div class="gallery"> <article class="clip" id="cats"><video src="videos/cats-en.mp4" poster="images/cats-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Cats bounce, cats meow"></video> <h3>Cats bounce, cats meow</h3><p>Three round cats bounce in a box and meow at every bounce. The meows are synthesized, each cat has its own pitch from a pentatonic scale so they sing together, and a purr rumbles underneath.</p></article> <article class="clip" id="rain"><video src="videos/rain-en.mp4" poster="images/rain-en.jpg" controls loop muted playsinline preload="none" width="270" height="480" aria-label="Rain on a quiet pond"></video> <h3>Rain on a quiet pond</h3><p>An ASMR pond: slow drops, soft rings that spread and cross, and a round drop sound of a minor pentatonic scale. Nothing hurries.</p></article> </div> </section> <section> <h2>What makes them satisfying</h2> <ul><li>A hook in the first seconds: the ball is already moving and a short caption says what to wait for.</li><li>Every bounce is a note, so sight and sound match exactly; soft envelopes, pentatonic scales, no harsh clicks.</li><li>Tension that builds: openings that narrow, rings that get closer, zooms that go further.</li><li>Clean loops: the illusions and the pendulums end exactly where they began.</li></ul> </section> <section> <h2>How it works</h2> <p>Each scene is a simulation or an illusion drawn in HD, played at a fixed step, so the same seed always gives the same video. Each bounce plays a note of a scale or a public-domain melody, with trails, sparks, squash and stretch and a soft flash. Camera zooms are a pure drawing transform: the physics never sees them. The game also renders every scene offline as a 1080 x 1920 MP4 with its sound, in English and in French, for TikTok, Shorts and Reels.</p> </section> <section> <h2>Controls</h2> <ul><li><b>Menu</b>: arrows and Enter, or tap, to choose a scene; <b>Language</b> switches English / French.</li><li><b>R</b> or a tap: restart the scene. <b>Escape</b>: back to the menu.</li></ul> </section> <p style="text-align: center"><a class="play" href="play/">▶ Start</a></p> <footer>Made in PHP with JumPHP.</footer> </main></body></html>