Showroom · Make-of

How Pounce was made

A fictional cat-furniture brand where the house cat is the salesperson: she lives in the page, walks as you scroll, tries the scratching post in front of you, and closes the pitch by falling asleep on the product.

What it demonstrates

Scroll storytelling in service of commerce. Every beat of the animation is an argument: the stretch happens beside the materials, the scratching happens on the sisal column the copy is selling, and the finale — curled up asleep on the top platform — is the product claim made literally. Scroll up and she retraces every step, because her entire journey is a pure function of scroll position. Nothing plays on a timer except the idle blinks and tail flicks that keep her alive when you stop.

Techniques, honestly named

• One articulated SVG cat — an ink-silhouette rig built from a torso path, a two-part head, four two-segment legs and a three-segment tail; the far pair of legs is a lighter tone, which is all the depth a silhouette needs.
• A distance-driven walk cycle — the stride phase advances with the horizontal distance she has covered, not with time, so her feet move exactly as fast as she does. The four legs run at quarter-phase offsets (the lateral sequence real cats walk in), upper legs swing on a sine, lower legs fold only during the swing half, and the body bobs at twice the stride frequency with a counter-bobbing head.
• A choreography compiler — the journey is declared as a list of waypoints: an element, a fractional position inside it, an action, and a weight. At load (and on resize) the compiler reads the real positions with getBoundingClientRect, converts section arrivals into scroll keypoints, and distributes the waypoints between them by weight. Anchors are re-read every frame, so the cat stays glued to the page through any viewport change.
• Behavior anchored to the product — the scratch stance is computed from the post column's edge plus an offset measured in cat-units, so her paws land on the sisal at every screen size; the climb hops target fractions of the tree's box; the buy stage is position: sticky, handing the whole final stretch of scroll to the climb and the curl.
• Poses as swappable art — sit, stretch, scratch, dive, leap and curl are separate drawings crossfaded in via <use>; the scratching paws are animated through CSS custom properties, which pass into the use element's shadow tree where ordinary selectors cannot.
• Physics-flavored hops — hops wait at the shelf edge and leap in the last stretch of their scroll span; leaps tilt along their instantaneous trajectory and level out for takeoff and landing; a descent much taller than it is wide swaps the leap for a nose-down dive pose.
• Idle micro-delights — when scrolling stops, a timer occasionally triggers a tail flick, an ear twitch or a slow blink as pure CSS keyframes; asleep, she breathes. All of it pauses when the tab hides.
• A dignified reduced-motion path — the fixed layer is removed entirely and each section composes a static cat from the same pose definitions: sitting in the hero, stretching by the materials, scratching at the post, asleep on the tree. All copy is simply visible.
• Honest commerce — fictional brand, one price per product, and a demo checkout dialog that says plainly it charges nothing and stores nothing.

Recreate it