Scroll-scrubbed companion
Meet Fluff,
the companion that learns with you.
Five states, one continuous reel. Scroll to scrub the character, move your cursor to make it look at you, and use your voice to call a state by name.
Scroll to start the reel
State 01 · idle
It stays with you, quietly.
Idle is the resting heartbeat of the companion — a slow breath, an occasional blink, a tail that sways. Scroll and you scrub the loop: the further you go, the deeper into the idle cycle you are.
- Loop breathing + blink + tail sway
- Scrub scroll position maps 1:1 to loop time
- Gaze eyes follow your cursor
State 02 · jump
It celebrates when you get it.
Jump is pure squash-and-stretch: anticipation, take-off, apex, landing. Scrub slowly to frame every part of the arc, or flick the wheel to make it hop.
- Physics arc + squash on take-off and landing
- Scrub one full hop per screen of scroll
- Feel weight settles before the next bounce
State 03 · focus
It goes quiet so you can think.
Focus narrows the companion down: body still, gaze locked, a set of rings breathing outward like a pomodoro. The longer you scrub, the more rings have passed.
- Cue concentric rings count your scrub
- Gaze pupils narrow, tracking slows
- Calm no bounce, no sway, no noise
State 04 · backflip
It shows off when you streak.
Backflip is the victory lap: a full 360° rotation with ghost trails, tucked at the apex and landing square. Scrub to hold the flip upside-down mid-rotation.
- Rotation 360° across the section
- Trails three echoed frames
- Landing squash absorbs the impact
State 05 · wave
It says hello — and goodbye.
Wave is the greeter: one paw up, happy eyes, a small bounce on every beat. It plays when you arrive, and it plays again when you come back.
- Beat three waves per loop
- Mood happy eyes, brighter blush
- Voice say “wave” to jump straight here
Bring your own character
Drop in real videos, keep the scrub.
The reel runs on a procedural character so the page is self-contained. Drop idle.mp4, jump.mp4, focus.mp4, backflip.mp4, wave.mp4 (or .webm) into media/ and the page swaps each state to video automatically — the same scroll progress then drives video.currentTime, frame for frame.
- Zero frameworks one HTML file, one CSS, one JS
- Voice Web Speech API where supported (HTTPS)
- Respects prefers-reduced-motion and no-JS