02 · Craft

The details, live.

Screenshots can't prove interaction quality, so here's the real thing. Every panel below is the actual component with the actual physics — and the reasoning underneath, because taste without reasons is just preference.

Price motion

62¢
Yes

Why: A snapped number reads as an error; a glide reads as movement. The spring is tuned soft enough to feel organic, stiff enough to never lag the data.

Numbers that don't jitter

61¢

Why: Proportional figures make prices wobble as digits change — it looks broken and feels untrustworthy. Tabular numerals fix a problem most people can only feel, not name.

The Yes/No spread

Yes 62¢No 38¢

Why: One bar, two truths: Yes and No always sum to 100¢. Drag the price and the complement updates — the interface teaches the market mechanic for free.

Order buttons

Why: Hover lifts and casts a colored shadow — a preview of commitment. Press compresses. Green and red never decorate; they only ever mean direction.

Two springs, on purpose

Price
UI

Why: Data moves on a soft spring (information, not alarm). Controls move on a snappy one (confidence under the finger). One motion system, two intents.

Reduced motion, respected

Turn on prefers-reduced-motion in your OS and reload — the site still works, instantly.

Why: Every animation on this site collapses to an instant state change under prefers-reduced-motion. Accessibility is a design detail, not a checkbox.

Designed & built from scratch for this application — React · Next.js · TypeScript · Framer Motion. Source ↗claytonryanyoung@gmail.com