⚠️ 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.
"nav opens with 74" — the whole screen becomes the menu, links cascading in. Small sites feel massive.
"give me a full-width slab CTA" — a bordered band runs edge to edge with the statement and button sitting inside it; reach for it when the CTA needs to read as a hard stop in the page, not a
"cosmos = 155" — a parameterized spiral galaxy you can reshape live. The most-loved demo in the three.js world.
"gallery breathes with 237" — a thumbnail FLIPs into the full frame and back, siblings hold their ground, backdrop blurs.
"products become 174" — phone-captured photoreal 3D with true view-dependent light. The WB endgame for product pages.
"backgrounds are 104" — algorithmic one-of-ones; every visitor (or product) gets art nobody else has.
"staging pipeline = 52" — product shots re-staged into lifestyle scenes at scale. Passes the 4K bar or doesn't ship.
"chat answers as 107" — the assistant replies with real product cards, not paragraphs. Upgrade path for 50 + 103.
"proof is <n>" — a wall of generic marks, ready to swap for real client logos; reach for it when the point is breadth, not one voice.
"gifting funnel = 103" — 3 taps → curated picks. The single best documented ROI in jewelry e-comm (+64% gift conversion).
"gifting closes with 210" — wrap, ribbon and a handwritten note preview. AOV up, returns down.
"hero object in 28" — real refractive glass with chromatic dispersion. The Lusion look.
"transitions spike with 36" — RGB split + slice tearing in short bursts. Aggressive; use in moments, not constantly.
"light shafts via 190" — volumetric beams raking through the scene. Cathedral mood on demand.
"cursor drips with 97" — a liquid blob chases the pointer and melts away.
"blobby accents = 39" — shapes that merge like liquid when they touch. Organic, playful.
"fade the section out" — content dissolves into the page background before the next act starts clean.
"fill one word with the gradient" — background-clip:text on a single word inside a plain sentence, built from the two accent tokens.
"background = 06" — slow drifting color field behind content. Calm, expensive-feeling ambience.
"keep 05 on everything" — animated noise at ~6% opacity. The cheapest way to kill the "flat digital" look.
"404 page does 66" — the headline lets go, bounces on the floor, reassembles. Personality in one click.
"use the pro pack" — SplitText, ScrambleText, MorphSVG, Inertia, DrawSVG: all formerly paid, now free and wired into this stack. Patterns 07/09/44/45 have pro-grade versions on request.
"put the hairline grid behind it" — a drafting-table grid that reads as structure, not decoration.
"four up on hairlines" — a 2×2 grid divided by rules, not gaps. Swap the gradient cells for real imagery.
"dither it like halftone" — two dot grids at different scales, each masked to its own corner, so density itself does the shading.
"mark it up with 181" — marker circles and underlines that draw themselves. Human warmth on digital pages.
"set it with a hanging indent" — numbered lines whose wrapped text tucks under the mark, a citation-list rhythm.
"hang the quote mark" — the opening quotation mark sits outside the text block instead of eating into the first line.
"forms self-aware via 203" — parents styled by their children's state. The selector that changed CSS architecture.
"put a footnote mark on the headline" — a superscript reference and its note, the kind of detail that reads as set, not generated.
"one number, enormous" — a single figure carrying the whole section, with a delta chip. Use it when one number IS the story.
"stats are <n>" — one number filling the space, a caption underneath; reach for it when a single figure is the entire argument.
"give me a hero with a booking status strip" — a small boxed pill with a live-looking status dot sits above the headline; reach for it when availability is part of the pitch.
"give me a hero with a spec panel" — headline on one side, a bordered key/value panel on the other; reach for it when the product has facts worth stating up front, not just a claim.
"give me a hero with a bottom meta row" — the headline sits alone up top, a small divided row of location/date/status runs along the bottom; reach for it when the hero should read like a mas
"give me a hero with a clipped reveal" — each line of the headline slides up out of its own clipped row on load, staggered, CSS only; reach for it when the entrance itself should feel consid
"give me a hero with an email capture" — the headline sits directly above a pill-shaped signup field; reach for it when the hero's whole job is the first conversion, not just the pitch.
"give me a hero with an offset image panel" — a placeholder image frame sits offset from the copy, overlapping its grid line; reach for it when the layout needs a photo but should still feel
"give me a hero with a big numeral" — a huge low-opacity number sits behind the headline like a section mark; reach for it when the page is part of a numbered series.
"give me a hero with a rotating word" — one word in the headline cycles through a short list on a CSS loop, no JS; reach for it when the product serves more than one audience and the headlin
"give me a hero with a kicker strip" — a thin, continuously scrolling label strip above the headline; reach for it when the page wants one line of motion without touching the type.
"give me a hero with a mask reveal" — two lines wipe into view from behind a clip-path mask on load, CSS only; reach for it when the entrance should feel like a curtain, not a slide-up.
"cluster them as hexagons" — three clip-path hexagons interlocked like a honeycomb, instead of another rectangle grid.
"destructive actions use 188" — press and hold; the ring fills; letting go cancels. Friction exactly where it belongs.
"accent object = 30" — fresnel edge-glow with scanlines. Sci-fi, restrained.
"end on a horizon" — the sign-off line sinks into a glowing line at the base, like the page is setting.
"horizon glow under the fold" — a single light source at the base. The cheapest way to stop a black section reading as empty.
"stats are <n>" — three horizontal bars with one emphasised; reach for it when the story is relative size, not absolute figures.