motion-menu

"explain it as a step ladder" — numbered rows on a rule. For process, onboarding, or how-it-works.

"one-pager runs 163" — unified wheel/touch section-swiping plus elements riding drawn paths. Both GSAP plugins, both free now.

"prices/stats roll with 46" — each digit is a slot-machine column. Richer than 13.

"offset the pair" — two panels at different heights with a caption between. Reads composed rather than tiled.

"onboarding ring is <n>" — a conic-gradient progress ring beside a step checklist; reach for it as a setup-completion card. Layout only — wire real step state in.

"one-off versus subscription is <n>" — two offers either side of a plain or; reach for it whenever a buyer can pay once or pay monthly for the same thing.

"ask one question at a time" — the typeform shape. Less intimidating than a wall of fields.

"put the CTA in a spinning seal" — a conic-gradient dashed ring rotates slowly around a plain-language contact badge.

"put an orbit behind it" — three bordered rings and a single point circling them, like a diagram of a very small solar system.

"orders narrate via 206" — the Domino's pattern: a living stepper from placed to at-your-door.

"invite accept card is <n>" — an avatar-led banner naming who invited you and to where, with Accept/Decline; the visual only, wire it to your own invite system.

"switch organisations" — the account menu every multi-tenant product needs and most get wrong.

"give me an outlined wordmark hero" — a stroked, unfilled name fills the space, tag and caption underneath; reach for it when the brand's own name is the visual.

"big nav words are 12" — hollow stroke type that floods with color on hover.

"put the wordmark in the footer, huge" — an outlined giant mark behind a plain three-link nav.

"let the next section peek up" — a raised card for the next act overlaps the bottom of the one above it.

"put an oversized glyph behind the text" — a giant ampersand or numeral used as background texture, not as a letterform.

"page header is <n>" — breadcrumb and title on the left, a secondary and primary action on the right, on a shared hairline; reach for it as the top bar of a dashboard working page.

"pages change with 04" — colored slabs sweep the screen between routes. No hard cuts, ever.

"imagery painted via 192" — live oil-paint stylization over the picture. Editorial art direction, zero Photoshop.

"hero layers move with 15" — depths drift at different speeds while you scroll. Instant dimensionality.

"hero atmosphere = 27" — thousands of drifting points, additive glow, reacts to the cursor.

"logo assembles with 41" — a thousand particles scatter and reform your wordmark.

"passkey prompt" — a biometric-style prompt with a pulsing ring, labelled as a visual demo; use it to show a passkey option exists before it's actually wired up.

"login is a fingerprint — 254" — real WebAuthn create/assert against your platform authenticator. Shipping without this is security debt now.

"strength meter is <n>" — a segmented strength bar and a requirements checklist under a password field; a static visual demo, wire it to your own validation.

"payment card is <n>" — a card-face preview above number, expiry, and CVC fields, clearly marked as a visual only; reach for it to block out a checkout step before real payment wiring

"peel the corner" — a lifted paper-corner fold over a media frame that curls further on hover, revealing the layer underneath.

"comparison split is <n>" — two centred figures either side of an arrow, this period against last; reach for it wherever a dashboard needs one number set against another. Layout only —

"permission matrix is <n>" — roles across the top, permissions down the side, dots at the intersections; reach for it as a roles-and-access settings screen. Layout only — no live grant

"per-seat calculator is <n>" — rate times seat count equals total, laid out as a formula with a seat slider beneath; reach for it for any per-user SaaS price.

"put a perspective floor under it" — a receding grid plane. Depth from two gradients and a transform.

"headline is 95" — every letter is a rigid body. Visitors can't resist playing with it.

"drop a picture-in-picture on it" — a small inset frame overlapping the main media's corner, the way a webcam sits on a screen share.

"product story is 16" — scrub-driven scene while the viewport holds. The backbone of every Apple-style product page.

"images swap via 93" — mosaic up, resolve into the next image. Retro-digital section cuts.

"gate it by plan" — a locked panel that says exactly what unlocks it. Honest gating, not a tease.

"global reach = 81" — a rotating sphere of dots. Shipping maps, presence, network stories.

"forms become forms with 191" — a cloud of points flowing between sphere, torus and helix.

"another world via 199" — a framed window showing a second live scene inside the first.

"open with 03" — counter climbs 0→100 while assets load, curtain lifts, page breathes in.

"flyout a preview under the link" — a small panel with a pointer sits under the current item and swaps to whichever link is hovered. Shown open under the current page.

"give me a price with a breakdown disclosure" — a headline price with a native, JS-free details toggle underneath that opens a line-item breakdown; reach for it when the number needs to defe

"struck price comparison is <n>" — a struck-through figure beside the current one, labelled as an example to fill in; reach for it as the template for a real price change, not a fabric

"give it a print header" — document title, reference and date on a rule. For quotes, specs and anything a client saves as a PDF.

"product accordion is <n>" — native <details> panels for spec sections, no JS, keyboard and screen-reader correct by default; reach for it when there's more product copy than fit

"product hero with spec sidebar" — a large product statement on the left, a hairline-ruled spec column on the right; reach for it as the top of a single-product page.

"pieces move with 126" — 6-second light-play loops on PDPs. +15–25% documented buy lift over $200.