⚠️ Mobile is not supported yet.
Search for a command to run...
596 motion/3D UI patterns — scroll-driven WebGL, shader passes, spring choreography — as ready HTML/CSS/JS. 26 free, or $149 once for the rest.
"caption rides 59" — words travel along a drawn curve as you scroll. Scroll up and down over this card.
"headlines breathe via 205" — text-wrap: balance kills orphan words. The cheapest typography tell of a cared-for site.
"theme switch = 78" — the new theme floods outward in a circle from the toggle. No hard swap.
"agents shop the menu — 258" — 2026's rule: without an MCP surface your systems are invisible to AI. The catalog serves humans AND agents.
"add a theme switcher pill" — three icon options in a segmented pill with a sliding accent behind the active one.
"use 365".
"proof is <n>" — three short quotes side by side; reach for it when you have more than one voice and want them read together, not stacked.
"footer with a ticker strip" — a clipped, oversized headline band above a plain nav row; static, not scrolling — the type carries the motion cue.
"product cards get 23" — perspective tilt following the cursor, with a moving light sheen.
"run it down a timeline rail" — dated entries on a vertical line. History, roadmap, or process.
"notifications = 76" — events slide in, stack, and excuse themselves. Cart adds, saves, agent updates.
"shift the tone at the seam" — the section background itself changes across the band, not just a rule.
"topographic rings behind it" — concentric contours, like a survey map. Depth without a single image.
"tear the top edge of the footer" — a repeating mask cuts a ticket-stub scallop along the top of the footer surface, plain sign-off underneath.
"tear the edges where they overlap" — a zigzag clip-path on the trailing edge of each frame, like torn perforated sheets fanned out.
"trade gate = 130" — the login wall that unlocks dealer pricing. Commitment signal in, repeat business out.
"trust row is <n>" — three hairline-divided policy items with a mark and a line each; reach for it right under the buy button to answer shipping, returns, and warranty before the buyer
"body copy with a margin note" — the printed-page move: a narrow annotation column beside the text.
"2FA code boxes" — six separated digit boxes with a resend link and nothing else competing for attention; reach for it right after a sign-in card.
"compare two panel is <n>" — two options side by side split by a centre rule, each with its own short spec stack; reach for it when a buyer is choosing between exactly two things.
"give them two doors" — ready now versus not yet. Both are a yes; only one is a purchase.
"stack a huge word over a tiny one" — a display-size word with a mono caption underneath, the ratio doing the hierarchy.
"give it a utility row above the nav" — a thin status/support strip stacked over the main bar, split by a hairline. For a nav that needs to say one more thing before the links.
"split the footer in two tones" — a contact half and a legal half, divided by a rule.
"use 410".
"tagline types with 60" — writes, pauses, deletes, rewrites. Simple and endlessly watchable.
"worn by real people = 212" — the as-seen-on wall, hover to see who. Social proof as texture.
"underline-slide nav" — a single rule that glides beneath whichever link is hovered or focused; reach for it on a marketing nav where restraint is the point.
"let them touch the fabric — 239" — a velvet swatch that dents under the pointer and springs back. Sheen, nap, give: tactility on a screen.
"usage meters are <n>" — a stack of labelled bar meters with a value readout; reach for it for quota or capacity panels. Layout only — no live measurement.
"usage ladder is <n>" — a vertical rail of usage bands from free up to a custom top rung; reach for it for metered or consumption-based pricing.
"headline breathes with 57" — letter weight swells near the cursor. Needs a variable font; Inter is already loaded.
"swatch picker is <n>" — a colour/finish choice as real radio inputs with no JS; reach for it wherever a product has variants to choose between.
"speed splits color via 193" — RGB channels separate with scroll velocity and snap back at rest.
"seams breathe with 240" — rush and the transition cuts short; linger and it plays full. Juries score this pacing explicitly.
"galleries bend with 150" — THE Awwwards gallery signature: imagery that curves with scroll inertia and settles flat.
"use 11".
"type leans with 49" — text shears with your scroll speed and settles when you stop. Pure feel.
"code entry is boxed" — six separated digits with a focus ring. The step everyone builds badly.
"give it a vertical frame and a rail" — a tall 9:16 media panel with stacked counters beside it, the short-form clip layout.
"run a vertical tag beside the headline" — a rotated writing-mode label doing the job a kicker usually does, without eating a line.
"index them down a rail" — frames stacked vertically off a single connecting line, each one marked by a dot rather than a number.
"treat sections with 113" — drop-in WebGL effects on ordinary DOM elements, no shader writing. Section F powers, applied site-wide in minutes.
"video block is <n>" — a gradient poster frame with a play button and a caption row; drop in a real video element later, the layout is the point.
"grid-to-detail morphs with 47" — click a tile: the browser itself morphs it into the featured slot. Zero-library page transitions.
"frame it with a vignette" — an inset hairline and a soft darkened edge. Makes any panel feel deliberate.
"own the scroll via 246" — wheel and touch feed a virtual value; everything eases toward it. How ZERO-class narratives are driven.
"add 55" — spoken answers and voice-driven browsing. This demo really speaks — the button uses your browser's own voice engine.