motion-menu

"add 21" — thin bar tracking read progress. Pairs well with long editorial pages.

"show them how far in they are" — a progress rule above the ask. Nearly-done is the strongest reason to finish.

"edges melt with 154" — the Apple look: content dissolving into directional blur instead of hard clips.

"ladder the progress" — labelled bars stacked on a shared scale, so the comparison is the point.

"intake = 128" — dimensions in, costed plan out, live. The DAF brief as an instrument instead of a form.

"delivery clarity via 131" — phases on a week grid with a live today-line. Tap a bar. Answers "when" before it's asked.

"playground = 140" — visitors feel the product before signup. Live token/cost math builds AI-product trust.

"certs via 127" — recycled metal, lab-grown, chain-of-custody — expandable at the decision point. Tap them.

"show the chain" — origin to delivery as linked stages. Where a claim about sourcing becomes checkable.

"provider stack" — a borderless stack of generic provider buttons above an email fallback; swap the generic marks for real providers once the integration exists.

"proof is <n>" — a single oversized quote with a rule accent; reach for it when one strong line carries more weight than a wall of three.

"proof is one pull quote" — oversized quote, hairline, attribution. One strong quote beats a wall of three.

"handover runs 215" — the install punch list, items resolving live until sign-off unlocks.

"open with the question they came with" — their problem in their words, answered underneath.

"absorb the spike via 262" — push the producer past the consumer and watch the queue fill, then overflow. Every outage post-mortem, one slider.

"quiet CTA to close an article" — a hairline, a soft line of copy, one understated arrow link.

"break the copy with a quote" — a full-width interruption between paragraphs. Resets the reader's attention.

"trade page runs 119" — line items, quantities, trade discount, live totals. The DAF procurement intake, as a component.

"set the quote over the frame" — type on imagery with a legibility scrim, done properly.

"give me a quote breakdown panel" — a numbered estimate with line items and a totalled amount; reach for it for services or project-based pricing rather than a subscription.

"proof is <n>" — a quote paired with a gradient avatar instead of a photo; reach for it when you want a face-shaped anchor without a real headshot.

"orbit the thumbs around the main frame" — four small frames at compass points around a centre piece, instead of a row underneath it.

"ring the play button with progress" — a conic-gradient arc showing how much has been watched, wrapped around the resume control.

"rating scale is <n>" — a numbered 1-to-5 row between two end labels, built on real radio inputs; reach for it for an NPS-style question.

"summarise the rating" — a score, a scale, and a count. Generic placeholders; swap in your real figures.

"living texture = 156" — Turing patterns growing in real time. Chemistry, not animation.

"long reads get 177" — live percent-read and time-left. This one measures the actual menu as you scroll it.

"add a reading progress bar" — a hairline that fills as the page is read, with a percentage readout.

"chat anatomy = 170" — collapsible thinking, tool-call chips, hoverable citations. The UI standard our section H predates.

"recovery codes are <n>" — a blurred code grid that sharpens when a checkbox is checked, pure CSS via :has(); reach for it wherever backup codes need a deliberate look-before-you-copy

"refurb sells via 221" — desks you own vs replacement cost, savings counted live. The lifecycle pitch as an instrument.

"reorder list is <n>" — rows carrying a six-dot drag handle and an order badge; a static illustration of the affordance, wire real drag-and-drop in yourself.

"default entrance = 14" — the workhorse. Everything that doesn't have a fancier entrance gets this.

"the cursor trails 189" — a glossy 3D ribbon flowing behind the pointer. Lusion signature.

"copy beautifully via 227" — rich HTML hits the clipboard, not mangled plain text.

"lay a ridge line behind it" — three clip-path horizons stacked for depth, the furthest drifting almost too slow to notice.

"show it as a ring gauge" — a conic-gradient dial with the figure inside. One number, one glance.

"hero reacts with 35" — clicks send water rings warping through the surface.

"living logo via 111" — Rive files react and idle like game characters at a fraction of Lottie's size. This plays Rive's official sample; a WB mark needs one design session in their editor.

"stamp a rotated tag on the seam" — a small angled label sitting on the rule like a marginal note.

"rotate the noun" — one headline, a word that cycles. Pure CSS keyframes, no JS, no layout shift.

"the DB is the bouncer — 264" — row-level security visualized: switch users, rows vanish. Forget a WHERE clause and nothing leaks.

"show the run as a timeline" — stage bars on a shared scale. Where the time actually went.

"pricing = 117" — tiered table with billing toggle and rolling prices. The SaaS conversion workhorse.

"variants swap via 244" — document.startViewTransition morphs any DOM change natively. The atelier's variant switcher runs on this.

"swatches ship via 133" — pick three, address, done. The physical-touch bridge for fabric-sensitive orders.

"add the sync status chip" — a small pill for syncing and saved states, a pulsing dot on one, a check on the other; reach for it anywhere a person edits something and needs to trust it was k

"scatter them like a photo pile" — three overlapping frames at small rotations, one lifts on hover.