Showroom · Make-of

How Mochi was made

A fictional cat café built around one gag with real physics in it: the visitor's cursor becomes a little grey mouse, and a striped tabby paw reaches out of the "Reserve a cushion" button to catch it. It lunges, swipes, misses, leaves the mouse's tiny footprints across the page, and eventually gives up and naps under the button. Every cat is hand-set SVG; the chase lives on one small canvas; there are no libraries anywhere.

What it demonstrates

That a cursor gimmick becomes a story when it has a place. The paw doesn't float in space — it belongs to something hiding behind a real UI element, which turns every visit into a tiny cat-and-mouse film the visitor directs with their hand. And it never resolves: the paw has never caught the mouse, which is exactly why people keep moving it.

Techniques, honestly named

• The cursor is the mouse — on fine pointers the native cursor is hidden and a little mouse is drawn with its nose exactly on the hotspot, so clicking stays precise. It turns into its direction of travel (flipping vertically past 90° so its feet stay down), breathes at rest, blinks, twitches an ear on its own timers, wags its tail with speed, and hops when the paw swipes near it.
• A limb that is one quadratic curve, stroked three times — the arm from the button to the paw is a single quadraticCurveTo path whose control point sags with length. It's stroked dark-wide for the outline, cream-narrow for the fur, and then once more with a setLineDash([9, 26]) pattern in a darker orange — the dashes ARE the tabby stripes, and they follow the limb perfectly with no clipping mathematics at all.
• An underdamped spring chase — the paw tip integrates v += (target − pos)·K·dt; v *= e^(−D·dt) with K = 170, D = 16, so it overshoots and corrects like something alive. A click when the mouse is far away triggers a lunge (spring stiffness ×2.1) that ends in a swipe on arrival.
• A swipe with an underside — the paw is a palm disc and four fanned toe discs with chevron wrist stripes clipped into the palm. Mid-swipe it rotates, briefly bares four white claws and the pink toe beans, and bursts a few four-point gold sparks at the near-miss point. The first human-caused swipe retires the hero hint pill; the ambient show never does.
• Footprints in page space — when the mouse runs faster than ~340 px/s it stamps pairs of tiny toe dots every 44 px, stored in page coordinates and drawn back through the scroll offset so they stay where they were left. A ring buffer caps them.
• A phantom mouse for pointerless worlds — inside hover previews and on touch screens there is no cursor, so a phantom mouse scurries across the lower hero on eased runs every few seconds and the paw hunts it instead. On touch, a tap is a "sighting": the phantom darts from the tap point and the chase follows. The page is never dead, no matter what is driving it.
• An idle ending — after 6.5 s without pointer movement the paw tucks back under the button and floats little z's; any movement resumes the hunt. The whole engine arms only on hover: hover + pointer: fine (or phantom mode), is skipped entirely under reduced motion and <noscript>, pauses on visibilitychange, and caps devicePixelRatio at 2.
• Six cats from one grammar — every resident is the same small SVG vocabulary (ears, blink group, nose, whiskers) recoloured and re-marked per cat: tuxedo bib, calico patches, a fluffy outline for the intern. Ears twitch on card hover; eyes blink on offset keyframe loops.

Recreate it