000%
Ali Saad / Creative systems practiceSignal acquired
DestinationDestination
Destination / Destination11 / route handoff

Back to the archiveW—11 / 11
11
W—11 2026
Hero Café
Personal experimentSelected work11 / 11

Selected work / Creative Developer & Interaction Designer

HeroCafé

Creative DevelopmentInteraction DesignMotion DesignResponsive Design
Scroll to enter
OverviewThe buildOutcome
01The project, in one breath
Role
Creative Developer & Interaction Designer
Client
Personal experiment
Year
2026
Try the experimentView source code

The main challenge was making a fixed sequence of poses feel responsive to unpredictable cursor movement. The source needed pose calibration as well as interpolation: smoother timing alone could not correct a target that selected the wrong part of the clip. Browser delivery…

An interactive café hero experiment developed with assistance from Codex Astra, using character video generated in Google Flow. A coffee-holding rabbit follows the cursor, responds to touch, and eases back to a neutral pose.An interactive café hero experiment developed with assistance from Codex Astra, using character video generated in Google Flow. A coffee-holding rabbit follows the cursor, responds to touch, and eases back to a neutral pose.

02The build, reduced to what mattered

Three decisions shaped the final experience.

03
01
INTERACTION

A character that responds

Calibrated cursor tracking lets the rabbit look toward the visitor. Eased motion and optical-flow interpolation smooth adjacent frames, and leaving the interaction area returns the…

02
MOBILE

Touch considered separately

The mobile layout uses a dedicated character scene with brief tap responses and horizontal drag tracking. Vertical gestures preserve normal page scrolling.

03
BROWSER RENDERING

Smaller assets, complete movement

Lossless frame strips load on demand into a four-page decoded cache. Nearby strips are prefetched, and playback pauses at the current pose when it needs another strip instead of skipping…

OutcomeWhat remained after the build

A responsive café hero that gives a prerecorded character a sense of presence. The rabbit follows the cursor, responds to touch, and gently returns to its resting pose. Smooth transitions connect all 240 source frames, while smaller animation strips load on demand. The live experiment and source code are publicly available.A responsive café hero that gives a prerecorded character a sense of presence. The rabbit follows the cursor, responds to touch, and gently returns to its resting pose. Smooth transitions connect all 240 source frames, while smaller animation strips load on demand. The live experiment and source code are publicly available.

240Source frames
10 seconds at 24 fpsSource animation
Vanilla JavaScriptFrontend
Next projectW—01 / 11
Continue the archive

Swift Digital Solutions

Enter project
Swift Digital Solutions
Have something worth building?Start a project
aliihsaad1@gmail.com
InstagramLinkedInGitHubFacebook
© 2026 Ali Saad