proof·of·prompt

← all exhibits

EXH-05sample entry — swap with a real artifact

Springboard

A docs-site landing where every element settles into place on real spring physics — no animation library, one integrator, 60fps.

  • motion
  • physics
  • typescript
An amber spring coil launching a ball along a damped bounce trajectory
Model
Claude (Fable 5)
Iterations
2
Time to ship
4h
Shipped
Jan 17, 2026

open demo ↗

The prompt · verbatim

Build a landing page for a fictional docs tool where all entrance motion runs on a single spring physics system — not CSS keyframes, not an animation library.

PHYSICS: implement one damped spring integrator (semi-implicit Euler, fixed timestep with accumulator). Every animated element is a spring target: heading characters, cards, the nav. Stagger by distance from the top-left corner, not by DOM order — motion should feel like it radiates.

TUNING: expose exactly two knobs in code — stiffness and damping — with three presets: "settle" (critically damped), "eager" (slight overshoot), "lazy" (underdamped, one visible bounce). Ship with "eager". Springs must clamp and unsubscribe when at rest: zero rAF work once the page is settled.

RESPECT: prefers-reduced-motion swaps every spring for an opacity fade. The page must be fully readable with JS disabled — springs move elements from their final positions, never to them from nowhere.

QUALITY BAR: no layout shift from the animation system (transforms only), zero rAF after settle, under 6KB of motion code.

Why it works

  • “From their final positions, never to them from nowhere” encodes progressive enhancement in one sentence — no-JS users get the finished layout, spring users get the choreography.
  • Physics vocabulary is exact. Semi-implicit Euler, fixed timestep, critical damping: the prompt speaks the domain’s language, so the model doesn’t reach for a library.
  • “Zero rAF after settle” is a performance requirement written as an observable fact — easy to verify in DevTools, hard to fudge.