shadcn blocks — Motion Menu | registry.directory

motion-menu/blocks

16:9 embed frame with chrome bar16-9-embed-frame-chrome"embed frame is <n>" — a 16:9 panel with a faux browser chrome bar on top; reach for it to preview an embedded doc, map, or app without looking like a bare iframe.

360 spin viewer, static illustration360-spin-viewer-static-illustration"spin viewer is <n>" — a slow-turning ring and a drag hint standing in for a 360 product viewer; a static illustration of the affordance, wire the actual frame-swap in yourself.

360° viewer360-viewer"PDPs spin with 123" — the multi-angle inspection jewelry buyers demand. Production feeds it a photo turntable or our GLBs.

3D configurator3d-configurator"product page runs 101" — live material and finish switching with the price following. This one is fully working.

3D hotspots3d-hotspots"specs live on the object — 231" — annotations pinned to 3D anchor points, fading as they rotate out of view. Occlusion-aware.

accordion columnsaccordion-columns"category strip = 72" — columns that yawn open on hover. Five categories, one elegant row.

Accordion sitemap footeraccordion-sitemap-footer"collapse the sitemap into an accordion" — real <details> groups, no JS, the mobile-footer move. First group shown open, the rest close to one row.

Account-created confirmationaccount-created-confirmation"account created" — an off-centre check mark and a calm confirmation line instead of a full-screen celebration; reach for it as the last step of a signup flow.

Account lockout cooldown noticeaccount-lockout-cooldown-notice"lockout notice is <n>" — a too-many-attempts card with a static cooldown readout and a depleting bar; the visual only, wire it to your own rate-limit state.

Account type selection cardsaccount-type-selection-cards"role select cards are <n>" — three radio-driven cards for choosing an account type, no JS; reach for it as the step right after signup, before the workspace exists.

Activity heatmap gridactivity-heatmap-grid"heatmap grid is <n>" — a grid of cells shaded by intensity with a Less-to-More legend; reach for it as a contribution-style activity panel. Illustrative pattern only, not live data.

adaptive pageadaptive-page"homepage adapts with 53" — hero, copy, and CTA re-rank per visitor context. One page, many faces.

Address form, grouped fieldsaddress-form-grouped-fields"address form is <n>" — street on its own row, city and state paired, postal and country paired; reach for it for shipping or billing address capture.

agentic back-officeagentic-back-office"Nimos runs 56" — agents watching inventory, triaging orders, drafting supplier mail — reporting to one hub. The business runs while you sleep.

agentic storefrontagentic-storefront"wire 106" — your catalog answering inside ChatGPT/Gemini via MCP tools. The new free distribution channel; checkout stays yours.

Alternating line stackalternating-line-stack"stack the lines alternating" — left, right, left. Asymmetry does the work no centred block can.

Ambient glow media frameambient-glow-media-frame"glow frame is <n>" — a media placeholder haloed by a slow-breathing ambient glow; reach for it when a single piece of media needs to feel premium, not just placed.

Ambient media glowambient-media-glow"media glows via 176" — the YouTube ambient trick: imagery leaks its colors into the room around it.

Anchor list with progressanchor-list-progress"index the page down the side" — anchors with an active marker. Orientation is what stops long pages feeling long.

anchor morph dialoganchor-morph-dialog"dialogs grow from 167" — the panel morphs out of the button you pressed, and returns into it. No teleporting modals.

anchored tooltipanchored-tooltip"tooltips via 88" — elements that tether themselves to an anchor. Kills positioning libraries.

Angled slash dividerangled-slash-divider"cut the seam on an angle" — two acts split by a diagonal clip-path, with a thin accent stroke tracing the cut.

Annotated diagram pinsannotated-diagram-pins"pin the diagram and list it" — an inline SVG connects numbered points to a plain-text legend. For anything that needs a labelled part more than a caption.

Announcement strip with dismissannouncement-strip-dismiss"put the announcement strip up top" — a dismissible bar for one piece of real news; reach for it over a banner ad when there is something worth surfacing without demanding a click.

AR model-viewerar-model-viewer"products get 102" — drag to inspect; on a phone this places the object in your room via AR. Feeds from our GLB pipeline.

Arc curve dividerarc-curve-divider"curve the seam" — the next section rises as a smooth dome over the one above it, a single border-radius ellipse, no SVG.

As-featured-in stripas-featured-strip"proof is <n>" — a slow continuous strip of press-style marks; reach for it as a quiet trust signal above the fold, not a hero claim.

ASCII renderascii-render"easter egg in 38" — scenes drawn in live type. Terminal-core; pairs with 09.

Aspect ratio rowaspect-ratio-row"mix the aspect ratios" — portrait, square, landscape in one row. Rhythm instead of a uniform grid.

assembly playerassembly-player"guides via 136" — stepped assembly with a parts checklist. Pre-purchase confidence, post-purchase calm.

Asymmetric bentoasymmetric-bento"lay it out as an asymmetric bento" — named grid areas instead of a span, so one tall cell and one wide cell can both break the rhythm at once.

Asymmetric hero, offset captionasymmetric-hero-offset-caption"give me an asymmetric hero" — a vertical caption run up the edge, the headline pushed off-centre; reach for it when the layout should feel art-directed, not centred-by-default.

Audio player row with waveformaudio-player-row-waveform"audio player is <n>" — a play control beside an inline SVG waveform and a time readout; reach for it for a podcast clip or voice note preview.

audio-reactiveaudio-reactive"visuals hear with 99" — real frequency analysis driving the graphics. This demo synthesizes its own beat.

Aurora driftaurora-drift"aurora behind the hero" — slow colour fields that never repeat visibly. Costs nothing; no canvas, no GL.

Back-to-top affordanceback-top-affordance"add back-to-top" — a floating round button with an up-chevron, the kind that only appears once you have scrolled.

before / afterbefore-after"proof section = 71" — drag the divider between two states. Refurb work, retouching, redesigns.

Before/after credibility pairingbefore-after-credibility-pairing"proof is <n>" — a plain panel next to a refined one; reach for it when the credibility argument is craft, not a number.

Bento contact footerbento-contact-footer"lay the footer out as a bento" — asymmetric grid-template-areas cells for contact, social, location and legal instead of equal columns.

Bento grid, one metric emphasisedbento-grid-one-metric-emphasised"stats are <n>" — an asymmetric grid with one figure emphasised; reach for it when one metric matters more than the others and should read first.

bento live numberbento-live-number"features = 137" — the 2026 SaaS standard: mixed-size capability cards that read in five seconds.

Big-ask closerbig-ask-closer"end on the big ask" — oversized closing line with the address as the only link. A visible ending shortens the perceived middle.

Blockout collageblockout-collage"block it out like a collage" — three solid rectangles overlapped at low opacity, one rule crossing through. Bauhaus, not gradient.

blur-in revealblur-reveal"soft entrances use 61" — characters sharpen out of a blur. Dreamier than 07.

Booking date and slot pickerbooking-date-slot-picker"booking picker is <n>" — a week strip with one day selected above a grid of time slots; static and visual, wire real availability yourself.

booking slotsbooking-slots"consults book via 207" — the cal.com pattern: pick a day, pick a slot, done in two taps.

Border beamborder-beam"featured card wears 69" — a comet circles the border. Marks the one thing you want eyes on.

Bordered panel CTA with two actionsbordered-panel-cta-two-actions"give me a CTA panel with two actions" — a bordered card holding one filled and one outlined button side by side; reach for it when visitors split roughly evenly between two next steps.

Boxed book-a-call CTAboxed-book-call-cta"give me a boxed book-a-call CTA" — an icon, a heading and one button sit inside a bordered card; reach for it when booking a call is the single next step you want on the page.

Breadcrumb with cut chevronsbreadcrumb-cut-chevrons"chevron breadcrumb" — a trail separated by a sliced arrow shape instead of a plain ">"; reach for it on deep catalogue or docs hierarchies.

Breadcrumb and share rowbreadcrumb-share-row"breadcrumb and share row is <n>" — trail on the left, copy-link and share on the right; reach for it on any deep content page that needs both orientation and a way out.

brief starterbrief-starter"every page funnels to 147" — three inputs of momentum, then a warm handoff to the real /procurement intake.

in-browser AI search (transformers.js)browser-ai-search-transformers-js"vibe search for real = 171" — the actual model from 51's simulation, running in the page. Type a feeling, get ranked products with similarity scores.

budget vs actualbudget-vs-actual"money honest via 218" — paired bars per category, variance called out. Trust through numbers that move.

burger morphburger-morph"menu icon = 67" — three lines fold into an X. The detail everyone notices without noticing.

cache probecache-probe"speed is a header — 256" — the CDN caching dance shown with real responses. Why fast sites feel free to run.

Callout bandcallout-band"pull it out as a callout band" — a bordered aside for the sentence that must not be skimmed past.

Card CTA with rulecard-cta-rule"CTA in a card, with a rule" — heading, a hairline, then an arrow link that slides on hover.

card stack scrollcard-stack-scroll"sections stack via 228" — panels pile up and settle as you scroll; the one beneath dims and recedes. The Apple keynote scroll.

Care instructionscare-instructions"spell out the care" — symbols and plain rules. The page a buyer returns to after the sale.

care ritualcare-ritual"aftercare = 214" — a stepped care ritual that makes owning the piece feel like membership.

Case stripcase-strip"strip the case study down" — what, what changed, over how long. Three facts beat three paragraphs.

Centered wordmark barcentered-wordmark-bar"centered wordmark nav" — a minimal top bar with the mark dead-centre and matched flanks either side; reach for it when the brand mark should read as the anchor, not a corner logo.

Centre-rule diptychcentre-rule-diptych"split it into a diptych with a centre rule" — two frames divided by a hairline instead of a gap, reads as one composed pair.

Centred statement herocentred-statement-hero"give me a centred statement hero" — an eyebrow, one bold claim, a single CTA; reach for it when the product needs one clear sentence and nothing competing with it.

Certification badge gridcertification-badge-grid"certification grid is <n>" — abstract seal marks over a caption, laid out two-up; reach for it to state compliance or standards a product meets without borrowing a real mark you don't

changelog feedchangelog-feed"alive-ness via 139" — a living what's-new feed. Watch it: entries keep arriving. Pairs with The Signet.

char cascadechar-cascade"headline enters with 07" — each character rises with a tiny rotation, staggered. The classic hero move.

Checklist panelchecklist-panel"list it as a checklist" — ticked rows in a bordered panel. For scope, inclusions, or requirements.

Chevron notch seamchevron-notch-seam"notch the seam with a chevron" — a downward chevron sitting on the rule, marking the break without a label.

circular textcircular-text"badge/stamp = 58" — rotating ring of type. Corner badges, seals, section markers.

click rippleclick-ripple"taps ripple via 186" — the press radiates from the exact touch point. Tactile confirmation.

clip revealclip-reveal"images unveil with 19" — the image is uncovered like a curtain rather than fading in.

cloth wavecloth-wave"images drape with 84" — imagery on rippling fabric. Lookbooks and campaign heroes.

cold startcold-start"explain serverless via 253" — first hit boots an instance (cold), second reuses it (warm), with real timings and the region.

column speed gridcolumn-speed-grid"galleries drift with 182" — center column slow, edges fast. Instant depth for image grids.

Command hint barcommand-hint-bar"hint the command palette" — a fake-input bar advertising ⌘K. The cheapest discoverability there is.

command palette (wired to the whole menu)command-palette-wired-whole-menu"add 149" — the defining SaaS interaction. This one actually navigates the menu: try "glass" or "128".

commerce micro packcommerce-micro-pack"cart moments = 164" — the product flies an arc into the cart, confetti on landing, live drop countdown with a draining stock bar.

Compact nav bar with dividercompact-nav-bar-divider"one bar, divided" — mark on the left, links right, a hairline under. The default that never looks wrong.

Compact price stripcompact-price-strip"give me a compact price strip" — a thin bar with a label, price and one link; reach for it in a footer or a sticky bar where the price is a reminder, not the pitch.

Compact sidebar and content shellcompact-sidebar-content-shell"sidebar shell is <n>" — a narrow nav rail beside a content pane, hairline-divided; reach for it as the outer frame of a dashboard page before anything is dropped inside.

Compact two-field row with submitcompact-two-field-row-submit"compact two-field row is <n>" — name and email inline with a trailing button; reach for it as the smallest contact ask that still gets a name.

Comparison columnscomparison-columns"put them side by side" — two columns, one rule, no winner declared. Let the reader decide.

Comparison paircomparison-pair"put the two numbers head to head" — before and after with the gap between them stated.

Comparison table, hairline gridcomparison-table-hairline-grid"give me a pricing comparison table" — a hairline-ruled table of two plans across a few features; reach for it when the buyer needs to see the delta, not a headline number.

Compression Streamscompression-streams"exports shrink via 222" — browser-native compression for CSV/JSON downloads. Boring, Baseline, free.

concierge chatconcierge-chat"add 50" — a styling/product advisor that streams answers, knows the catalog, and hands off to checkout.

Conic spoke wheelconic-spoke-wheel"spin a spoke wheel behind it" — repeating-conic-gradient spokes turning once a minute. Reads as machined, not decorative.

container queries slidercontainer-queries-slider"components adapt via 204" — drag the slider: the card restyles by its container, not the viewport. Design-system-grade responsiveness.

context cursor labelscontext-cursor-labels"the cursor speaks with 185" — hovering media, the cursor grows and says what a click will do.

Continues-below descend cuecontinues-below-descend-cue"cue that it continues below" — a short line and a drifting chevron pointing down, the scroll invitation that isn't an animated bounce.

Cookie consent barcookie-consent-bar"cookie bar is <n>" — a plain-language consent notice with accept-all and necessary-only weighted the same; reach for it when the site needs a real cookie notice, not a dark pattern.

coordinated install flowcoordinated-install-flow"install section = 146" — the compliant referral pattern: no named partner, no fake live booking, just the honest flow.

copy at scalecopy-at-scale"catalog copy via 54" — every product page gets voice-consistent descriptions generated from specs, reviewed by gate.

Corkboard note wallcorkboard-note-wall"pin it to a corkboard" — a dense grid of slightly rotated note cards, uneven on purpose. For loose observations that should not look like a tidy list.

Corner-anchored navcorner-anchored-nav"anchor the nav in the corner" — mark top-left, links stacked top-right, a status line bottom-left; no bar, no rule, the page corner does the organising.

Corner glow paircorner-glow-pair"light the two corners" — opposing soft sources. Gives a flat panel a direction without a shape in it.

Corner index framecorner-index-frame"tag the corner with a figure index" — a single frame with a museum-label tab hanging off its top edge.

Corner metacorner-meta"put the meta in the corners" — coordinates, status, index. The frame around the work that says a person set this.

Corner register markscorner-register-marks"put registration marks in the corners" — a print-shop crosshair and four bracket corners. Structure without a single gradient.

corner shapescorner-shapes"cards wear 86" — squircles, scoops, notches, bevels. The anti-default corner language.

Corner social link clustercorner-social-link-cluster"corner link cluster is <n>" — a vertical stack of generic icon buttons pinned to a corner; reach for it for email, profile, and outbound links without borrowing anyone's brand mark.

costed plan previewcosted-plan-preview"plans render as 143" — the DAF signature artifact: a costed plan with the margin visible, not hidden. In production this reads the live catalog.

countercounter"stats section uses 13" — numbers roll up when they enter the viewport.

Counter row with unit labelscounter-row-unit-labels"stats are <n>" — three counters that count up once and stop, each with its own unit tag; reach for it when the motion should register once, not loop.

Credential ledgercredential-ledger"proof is <n>" — a short ledger of credentials with a seal mark; reach for it when the trust argument is who signed off, not who spoke.

Credential listcredential-list"proof is a credential list" — plain rows of what is verifiable. Reads honest precisely because it is not styled like a boast.

Cross-page morphcross-page-morph"pages morph with 109" — real multi-page navigation where shared elements fly between pages. Zero JS, zero router.

CRT treatmentcrt-treatment"archive footage = 94" — scanlines, barrel curve, rolling band, phosphor flicker. Full broadcast nostalgia.

CSS 3D dioramacss-3d-diorama"tiny world via 166" — a whole room in stacked CSS transforms. Story scenes without a single polygon.

CSS natives packcss-natives-pack"go native with 165" — hover the bars, pop the popover, open the details. Zero JavaScript in any of them.

CSS scroll-driven animationcss-scroll-driven-animation"cheap reveals via 85" — scroll-linked animation with no JS at all. The free-performance version of 14.

CTA with availability linecta-availability-line"give me a CTA with an availability line" — a small pulsing status dot and a plain availability line sit above the ask; reach for it when the CTA should feel like a real person answering, no

CTA with countdown-style meta linecta-countdown-style-meta-line"give me a CTA with a countdown line" — a monospace digit readout under the heading, styled like a timer without claiming real urgency; reach for it when the ask needs a ticking visual, not

CTA over a gradient bandcta-over-gradient-band"give me a CTA on a gradient band" — the ask sits inside a full-width rounded band built from the accent colours; reach for it when the CTA should look like its own coloured module, not anot

CTA with phone and email paircta-phone-email-pair"give me a CTA with phone and email" — two direct contact links sit side by side with a hairline between them; reach for it when the fastest path to a reply is just handing over the number.

CTA with quiet secondary linkcta-quiet-secondary-link"give me a CTA with a quiet second link" — a filled primary button with an understated text link underneath for the less committed visitor; reach for it when you want one clear default witho

CTA with what-happens-next checklistcta-what-happens-next-checklist"give me a CTA with a next-steps checklist" — a short numbered list of what happens after someone clicks, then the button; reach for it when the ask is unfamiliar and the visitor needs to se

Currency and region switcher rowcurrency-region-switcher-row"currency switcher row is <n>" — a pill group for currency choice above the price it affects; reach for it for pricing pages that serve more than one region.

custom cursorcustom-cursor"add 02" — dot tracks tight, ring lags behind. Hides itself on touch devices.

Data table with status columndata-table-status-column"status table is <n>" — a hairline-ruled table with a status-pill column; reach for it as the working list view of a dashboard. Layout only — no live rows.

day / night roomday-night-room"give it evenings — 233" — one click and the sun hands off to the lamps: every light, color and shadow lerps. Nothing snaps.

deck swipedeck-swipe"browse mode = 73" — swipeable card stack. Lookbooks, product discovery, yes/no curation.

Definition pairdefinition-pair"set the terms as definition pairs" — term and meaning, hung on a rule. For glossaries and explainers.

delivery routedelivery-route"freight visible via 216" — the shipment tracing its route with live position. Calm through visibility.

Delta rowsdelta-rows"show the movement, not just the number" — value plus its change, on hairlines.

depth parallax photodepth-parallax-photo"product shots get 96" — depth-map parallax makes flat photography lean like a hologram.

device signalsdevice-signals"the page adapts via 224" — battery, connection speed, memory, cores: real signals for serving lighter experiences when it matters.

device tier gatedevice-tier-gate"majors degrade with 245" — GPU string + memory + cores pick the tier; the centerpiece falls back to CSS, then to a poster. Never just reduced-motion.

Diagonal band footerdiagonal-band-footer"cut the closer on a diagonal" — an accent-coloured clip-path wedge carries the closing line and CTA above a plain link row.

Diagonal notch captiondiagonal-notch-caption"cut a notch for the caption" — the media panel loses a diagonal corner and the caption sits in exactly the space it gave up.

Diagonal scan linesdiagonal-scan-lines"diagonal scan behind it" — a fine rule texture that drifts. Reads technical without reading retro.

Diagonal split content paneldiagonal-split-content-panel"cut the content on a diagonal" — a clip-path wedge sets one statement apart from the next, without a straight rule down the middle.

Diagonal split herodiagonal-split-hero"give me a diagonal split hero" — two colour panels meet on a diagonal seam instead of a straight column; reach for it when a plain left/right split feels too safe.

Diff summarydiff-summary"summarise the diff" — files changed with added/removed counts. The row every review starts from.

dimension diagramsdimension-diagrams"specs draw with 132" — interactive footprints and clearance zones. Herman-Miller-depth PDPs.

directional hover packdirectional-hover-pack"hovers know direction via 158" — fills that enter where your cursor entered, plus the macOS dock magnify.

Disclosure drawer navdisclosure-drawer-nav"make it a native drawer" — a real <details> element as the menu toggle, no JS, keyboard-operable for free. Shown open here; it collapses to one row on click.

displacement hoverdisplacement-hover"gallery images swap with 34" — one image liquefies into another through a noise map. The signature Codrops hover.

dither fielddither-field"background texture = 37" — ordered-dither shading, the retro-print look that's everywhere on 2026 Awwwards.

dot grid repeldot-grid-repel"section background = 70" — a field of dots that flinches away from the cursor and springs back.

Dot matrix fadedot-matrix-fade"dot matrix behind the section" — a quiet texture that gives flat panels somewhere to sit.

dotLottiedotlottie"motion graphics drop in via 236" — After Effects animation playing on a wasm renderer. The designer's tool, Rive's older sibling.

Double hairline with centred dotdouble-hairline-centred-dot"run two hairlines with a dot between" — a quieter seam than one rule, for a break that shouldn't shout.

Downloadable resources listdownloadable-resources-list"downloads list is <n>" — a hairline-divided list of documents with a filetype tag and a download arrow; reach for it for spec sheets, assembly guides, or warranty cards attached to a

drag reorder griddrag-reorder-grid"boards reorder via 194" — pick up, hover, drop; neighbors glide aside. Kanban physics.

Drop-cap column featuredrop-cap-column-feature"run it in drop-cap columns" — real multi-column text with a magazine-style oversized first letter. For an opening feature, not a whole page of body copy.

Drop-cap lededrop-cap-lede"give the opening a drop cap" — the oldest signal that a page was set, not generated.

durable workflow (sim)durable-workflow-sim"jobs survive via 259" — durable execution, the 2026 default for AI pipelines. Simulated here; the real engines wire in from one SDK.

dynamic islanddynamic-island"status lives in 152" — one pill fluidly morphing between states: order placed, shipping, arrived. Watch it cycle.

edge vs region raceedge-vs-region-race"show the wire with 249" — live round-trip times to both runtimes, with the regions they answered from.

Editorial figure with captioneditorial-figure-caption"editorial figure is <n>" — a tall image placeholder with a caption set underneath a hairline, like a print photo credit; reach for it in a long-form or case-study layout.

education-first priceeducation-first-price"DAF cards use 142" — every price opens its own explanation and links to a lesson. Transparency as the differentiator.

elastic tabselastic-tabs"filters snap with 75" — the highlight pill overshoots and settles like it has mass.

embedding mapembedding-map"the catalog as a galaxy = 197" — items positioned by semantic similarity. Browse by neighborhood, not category.

Empty-state panelempty-state-panel"empty state is <n>" — a dashed-frame panel with a mark, a line of copy, and one action; reach for it wherever a dashboard list has nothing in it yet.

engraving previewengraving-preview"personalize with 124" — live engraving + metal preview with the price following. The +30–50% AOV tool. Type in it.

Enterprise talk-to-us panel beside two tiersenterprise-talk-us-panel-beside"use 505".

Expanding column footerexpanding-column-footer"let a footer column expand on hover" — flex-grow transition widens whichever column the cursor is on; shown here with Work pre-expanded.

exploded assemblyexploded-assembly"the product comes apart with 230" — every component drifts to its exploded position on the slider. Flat-pack honesty as a hero moment.

EyeDroppereyedropper"sample reality via 209" — the native color picker that reaches OUTSIDE the browser. Configurators that match your wall paint.

fabric & finish pickerfabric-finish-picker"PDPs get 118" — the Herman Miller / HAY move: swatches swap material, price and lead time live. Sells the custom order.

Facet shard clusterfacet-shard-cluster"scatter some facets behind it" — five clip-path shards at odd angles, low opacity, like broken glass caught in low light.

FAQ disclosurefaq-disclosure"FAQ as disclosures" — native <details>, no JS, keyboard-accessible for free. The rows animate open on modern browsers.

Feature callout row, hairline numberingfeature-callout-row-hairline-numbering"feature row is <n>" — three callouts numbered on a hairline, no icons required; reach for it to state what the product does in short claims.

Feature with thumbsfeature-thumbs"one big, four small" — the product-page arrangement. The thumbs mark the current frame.

Fee transparencyfee-transparency"show the fee openly" — cost, margin and total, stated rather than buried. Education-first pricing.

Figure/label ledgerfigure-label-ledger"stats are <n>" — figures and labels in a two-column ledger; reach for it when you have more rows than a four-up strip can hold.

File-drop zonefile-drop-zone"file drop zone is <n>" — a dashed drop target with an upload glyph and a browse fallback; visual only, wire the real upload yourself.

file savefile-save"deliverables export via 226" — plans, quotes and spec sheets leaving the browser as real files.

Fill sweep buttonfill-sweep-button"secondary buttons are 26" — a color wave rises through the button on hover.

Filmstrip content scrollerfilmstrip-content-scroller"use 544".

Filmstrip with scrub railfilmstrip-scrub-rail"run it as a filmstrip with a scrub rail" — a row of frames over a rail whose marker drifts, visual only, no dragging.

financing calloutfinancing-callout"reframe with 141" — $1,240 becomes $104/mo at the exact hesitation moment. Standard on Burrow, Floyd, and fine jewelry.

Flip card pairflip-card-pair"flip them to reveal a caption" — a real 3D rotateY flip on hover or focus, caption on the back face, no overlay trick.

FLIP shuffleflip-shuffle"filters animate with 43" — items glide to their new positions instead of snapping. Essential for product filtering.

Floating status pillfloating-status-pill"float a status pill" — a small pinned badge with a pulsing dot for save state, connection state, or build state.

floorplan dropperfloorplan-dropper"plan the floor with 238" — clients drop furniture onto their floorplan and watch the budget build. A brief that draws itself.

flow field (2D)flow-field-2d"living background = 83" — particles tracing invisible wind. The most organic ambience per kilobyte.

fluid ink (grid advection, own mini-runtime)fluid-ink-grid-advection-own"hero is 91" — ink that swirls and settles like liquid. (Full GPU Navier-Stokes = the WebGPU upgrade on radar.)

Focus ringfocus-ring"make the focus ring visible" — the accessibility detail almost everyone deletes. Tab into it and see.

Folded index cardfolded-index-card"file it as an index card" — a media frame with a small filed tab above it, like a contact sheet pulled from a drawer.

font flickerfont-flicker"chaos type = 180" — letters cycle through typefaces like a ransom note, then settle. Playful, editorial.

Footer-anchored contact pillfooter-anchored-contact-pill"anchor a contact pill" — a small pill pinned to the corner with a message icon; reach for it as a lighter-weight alternative to a full chat widget.

Footer curtainfooter-curtain"site ends with 151" — the page rises off a fixed footer. Half of all award sites end this way; ~10 lines of CSS.

Form with inline validation statesform-inline-validation-states"show inline validation" — one field in its valid state, one in its error state, each with an icon and a message; reach for it to demonstrate real-time field feedback.

Four-up metric rowfour-up-metric-row"stats are <n>" — four figures in a row, divided by hairlines; reach for it as the default metrics strip above a fold or footer.

Four-up metric rowfour-up-metric-row-2"four numbers on a rule" — hairline-separated figures with unit labels. Replace the placeholders with real figures.

Full-bleed gradient herofull-bleed-gradient-hero"give me a full-bleed gradient hero" — a slow-drifting colour field fills the whole section behind centred type; reach for it when the brand has a strong palette and the background should ca

Full-bleed media band with overlay titlefull-bleed-media-band-overlay"media band is <n>" — a full-width gradient band with a dark scrim and a large overlay title; reach for it as a section break between denser content.

Full-bleed quad bandfull-bleed-quad-band"run four across, full bleed" — no side padding, no gaps, four equal frames butted edge to edge.

Full-bleed statement CTAfull-bleed-statement-cta"give me a statement CTA" — one big claim, full width, a single filled button underneath.

Full-width slab CTAfull-width-slab-cta"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

fullscreen menufullscreen-menu"nav opens with 74" — the whole screen becomes the menu, links cascading in. Small sites feel massive.

galaxy generatorgalaxy-generator"cosmos = 155" — a parameterized spiral galaxy you can reshape live. The most-loved demo in the three.js world.

gallery expand (FLIP)gallery-expand-flip"gallery breathes with 237" — a thumbnail FLIPs into the full frame and back, siblings hold their ground, backdrop blurs.

Gaussian splats (Spark)gaussian-splats-spark"products become 174" — phone-captured photoreal 3D with true view-dependent light. The WB endgame for product pages.

generative art seedgenerative-art-seed"backgrounds are 104" — algorithmic one-of-ones; every visitor (or product) gets art nobody else has.

generative imagerygenerative-imagery"staging pipeline = 52" — product shots re-staged into lifestyle scenes at scale. Passes the 4K bar or doesn't ship.

generative UIgenerative-ui"chat answers as 107" — the assistant replies with real product cards, not paragraphs. Upgrade path for 50 + 103.

Generic logo wallgeneric-logo-wall"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.

gift finder quizgift-finder-quiz"gifting funnel = 103" — 3 taps → curated picks. The single best documented ROI in jewelry e-comm (+64% gift conversion).

gift wrapgift-wrap"gifting closes with 210" — wrap, ribbon and a handwritten note preview. AOV up, returns down.

glass transmissionglass-transmission"hero object in 28" — real refractive glass with chromatic dispersion. The Lusion look.

glitch burstglitch-burst"transitions spike with 36" — RGB split + slice tearing in short bursts. Aggressive; use in moments, not constantly.

god raysgod-rays"light shafts via 190" — volumetric beams raking through the scene. Cathedral mood on demand.

gooey cursor trailgooey-cursor-trail"cursor drips with 97" — a liquid blob chases the pointer and melts away.

gooey metaballsgooey-metaballs"blobby accents = 39" — shapes that merge like liquid when they touch. Organic, playful.

Gradient fade-out bandgradient-fade-out-band"fade the section out" — content dissolves into the page background before the next act starts clean.

Gradient-filled wordgradient-filled-word"fill one word with the gradient" — background-clip:text on a single word inside a plain sentence, built from the two accent tokens.

gradient mesh driftgradient-mesh-drift"background = 06" — slow drifting color field behind content. Calm, expensive-feeling ambience.

grain togglegrain-toggle"keep 05 on everything" — animated noise at ~6% opacity. The cheapest way to kill the "flat digital" look.

gravity lettersgravity-letters"404 page does 66" — the headline lets go, bounces on the floor, reassembles. Personality in one click.

GSAP pro pack showcasegsap-pro-pack-showcase"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.

Hairline cart ledgerhairline-cart-ledger"cart as a ledger" — line items as hairline-ruled rows — thumb, title, variant, unit price, quantity, line total — closed by a subtotal strip and a single full-width checkout action.

Hairline grid fieldhairline-grid-field"put the hairline grid behind it" — a drafting-table grid that reads as structure, not decoration.

Hairline quad gridhairline-quad-grid"four up on hairlines" — a 2×2 grid divided by rules, not gaps. Swap the gradient cells for real imagery.

Halftone ditherhalftone-dither"dither it like halftone" — two dot grids at different scales, each masked to its own corner, so density itself does the shading.

hand-drawn annotationshand-drawn-annotations"mark it up with 181" — marker circles and underlines that draw themselves. Human warmth on digital pages.

Hanging-indent paragraph sethanging-indent-paragraph-set"set it with a hanging indent" — numbered lines whose wrapped text tucks under the mark, a citation-list rhythm.

Hanging punctuation quotehanging-punctuation-quote"hang the quote mark" — the opening quotation mark sits outside the text block instead of eating into the first line.

:has() magichas-magic"forms self-aware via 203" — parents styled by their children's state. The selector that changed CSS architecture.

Headline with footnote annotationheadline-footnote-annotation"put a footnote mark on the headline" — a superscript reference and its note, the kind of detail that reads as set, not generated.

Hero with booking status striphero-booking-status-strip"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.

Hero with bordered spec panelhero-bordered-spec-panel"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.

Hero with bottom meta rowhero-bottom-meta-row"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

Hero with clipped line revealhero-clipped-line-reveal"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

Hero figurehero-figure"one number, enormous" — a single figure carrying the whole section, with a delta chip. Use it when one number IS the story.

Hero with inline email capturehero-inline-email-capture"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.

Hero number with captionhero-number-caption"stats are <n>" — one number filling the space, a caption underneath; reach for it when a single figure is the entire argument.

Hero with offset image panelhero-offset-image-panel"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

Hero with oversized numeralhero-oversized-numeral"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.

Hero with rotating word linehero-rotating-word-line"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

Hero with scrolling kicker striphero-scrolling-kicker-strip"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.

Hero with two-line mask revealhero-two-line-mask-reveal"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.

Hex clusterhex-cluster"cluster them as hexagons" — three clip-path hexagons interlocked like a honeycomb, instead of another rectangle grid.

hold to confirmhold-confirm"destructive actions use 188" — press and hold; the ring fills; letting go cancels. Friction exactly where it belongs.

hologram fresnelhologram-fresnel"accent object = 30" — fresnel edge-glow with scanlines. Sci-fi, restrained.

Horizon curtain footerhorizon-curtain-footer"end on a horizon" — the sign-off line sinks into a glowing line at the base, like the page is setting.

Horizon glowhorizon-glow"horizon glow under the fold" — a single light source at the base. The cheapest way to stop a black section reading as empty.

Horizontal bar comparisonhorizontal-bar-comparison"stats are <n>" — three horizontal bars with one emphasised; reach for it when the story is relative size, not absolute figures.

horizontal scrollhorizontal-scroll"collection browses with 17".

hover preview rowshover-preview-rows"indexes preview via 184" — list rows that play a live preview only while hovered. Agency-index energy.

Hover-reveal captionhover-reveal-caption"captions arrive on hover" — the frame stays clean until someone looks closer.

icon morphsicon-morphs"icons transform via 187" — play becomes pause, plus becomes close, hearts pop full. Click each.

Icon railicon-rail"icon rail nav" — a compact vertical stack of icon-only buttons with a current-page marker; reach for it when space is tight and labels can go in a tooltip instead.

idempotency (sim)idempotency-sim"charge once via 261" — the same spam of clicks, with and without an idempotency key. Why nobody gets billed twice.

idle attractidle-attract"the site performs 175" — when the visitor goes still, the page starts a self-running show. Museum-mode; any movement hands control back.

image trailimage-trail"gallery hero uses 24" — images bloom along the cursor's path and melt away.

image tubeimage-tube"collection flythrough = 100" — a tunnel of imagery you travel through. Peak lookbook energy.

Index-card heroindex-card-hero"open like an index card" — title, ref, and three meta rows. Archival rather than promotional.

Index dot scrollspy navindex-dot-scrollspy-nav"index the sections as dots" — numbered dot pagination on a connecting line, current section enlarged; a horizontal alternative to a side anchor list.

Indexed footerindexed-footer"index the footer" — numbered link groups. Reads like the back of a book rather than a sitemap dump.

inertia drag sliderinertia-drag-slider"collection slider is 42" — flick it and it glides with momentum, rubber-bands at the ends.

infinite drag fieldinfinite-drag-field"explore mode = 98" — the page as an endless desk you pan across. Moodboards, archives, collections.

infinite loop scrollinfinite-loop-scroll"the page wraps via 183" — no top, no bottom. Collections and showreels as a loop.

infinite tunnelinfinite-tunnel"intro flies through 79" — endless forward motion through recycling geometry. Openers and 404s.

Inline-field CTAinline-field-cta"one field and go" — a single input with the submit sitting inside it. The lowest-friction ask there is.

Inline form CTAinline-form-cta"CTA with one field" — a heading over a pill-shaped email capture, button built into the field.

Inline-label rowsinline-label-rows"labels on the same line" — a dense form that still reads. For settings and short intakes.

Inline mention lineinline-mention-line"mention it inline" — proof folded into a sentence rather than boxed out. The least salesy form there is.

Inset corner seaminset-corner-seam"notch the corner" — the next panel steps in from one edge. A seam with a direction.

instanced swarminstanced-swarm"background depth = 33" — hundreds of objects in one draw call, orbiting as a school.

intake validationintake-inbox"the form is alive — 250" — a real transactional email pipeline. The difference between a brochure and a business.

integration wallintegration-wall"ecosystem via 138" — the filterable logo wall. Instant credibility for Nimos or any platform surface.

iridescent metaliridescent-metal"product finish like 29" — oil-slick thin-film sheen shifting as it turns.

iris seamiris-seam"close the act with 247" — a clip-path iris scrubbed by scroll, centered on the pointer. A seam that feels aimed at you.

jelly blobjelly-blob"products wobble via 200" — a mesh with spring physics: poke it and it jiggles like it has mass.

Job queue list with state pillsjob-queue-list-state-pills"job queue is <n>" — a stacked list of queued jobs each carrying its own state pill; reach for it for a worker or task-queue panel. Layout only — no live jobs.

Justified two-column textjustified-two-column-text"set the body in two justified columns" — a magazine-style column split with a hairline rule between them.

JWT anatomy (real WebCrypto)jwt-anatomy-real-webcrypto"sessions decoded via 263" — the token every API checks, taken apart live: tamper with any part and verification fails.

Keyboard hint barkeyboard-hint-bar"add a keyboard hint bar" — a search trigger with a kbd-styled shortcut badge, ⌘K, sitting at the end.

kinetic 3D typekinetic-3d-type"words orbit with 162" — typography as geometry: text wrapped on a rotating drum. The image tube's louder sibling.

KPI header row with filter barkpi-header-row-filter-bar"KPI header is <n>" — a row of metric tiles over a hairline filter bar; reach for it as the top of a dashboard page, above the working view. Layout only — wire real numbers in.

Labelled rule seamlabelled-rule-seam"divide the acts with a labelled rule" — names the next act, which is what stops a long page feeling lost.

Lead and deklead-dek"set a lead and a dek" — the newspaper pairing: a heavy line, then a lighter one that carries the detail.

Lead-time and availability striplead-time-availability-strip"availability strip is <n>" — a thin status line with a pulse dot and a lead-time readout; reach for it under the price to set delivery expectations.

lead-time boardlead-time-board"availability = 122" — live stock and lead-time status per line. In production this reads supplier feeds through Nimos.

Learn hublearn-hub"/learn is 148" — the education-first spine: every price on the site links into one of these.

Lede with rulelede-rule"open the section with the lede" — eyebrow, rule, oversized opening paragraph. The editorial entry point.

Legal status barlegal-status-bar"just a legal bar" — one thin row: copyright and terms on one side, a status dot on the other.

Lenis + ScrollTrigger bridgelenis-scrolltrigger-bridge"the whole site scrolls like 01" — inertia + eased wheel. Non-negotiable base layer.

Let's-talk closerlet-s-talk-closer"end the page on a big let's-talk" — the type does the selling; one line, one link, one accent word.

Lifeware cardlifeware-card"Lifeware presents as 145" — the one-time framing is the product. The card leads with it.

line maskline-mask"paragraphs use 08" — quieter than 07. Editorial, Studio-Freight energy.

link image previewlink-image-preview"index list gets 64" — hovering a link floats its image along the cursor. Editorial index pages love this.

Link rolllink-roll"nav links roll with 25" — text flips to an accent copy of itself on hover.

liquid glassliquid-glass"nav wears glass — 229" — the 2026 Apple material: near-clear center, heavy refraction at the rim, specular top edge. Pure CSS.

Live configurator, options drive a shared previewlive-configurator-options-drive-shared"live configurator is <n>" — one row of radio options updates a preview swatch AND a caption elsewhere on the page, pure CSS, no JS; reach for it wherever a choice should visibly chang

live guestbooklive-guestbook"visitors persist via 251" — a real Postgres table behind RLS policies. State that survives the tab.

live presencelive-presence"add 105" — other shoppers visible as ghost cursors + live counts. Social proof you can feel. (Supabase Realtime in production.)

live presence (Supabase Realtime)live-presence-supabase-realtime"the room breathes with 252" — websocket presence: who's here right now, joining and leaving live.

Living text fillliving-text-fill"masthead = 89" — huge letters filled with a moving color field (or video, in production). One CSS property.

Log and activity feedlog-activity-feed"activity feed is <n>" — a timestamped list of events on a hairline timeline; reach for it as a log or audit panel on a dashboard. Layout only — no live events.

LYGIA shaderslygia-shaders"use 114's library" — this noise field is built from LYGIA's shader functions, fetched and resolved live. Hundreds of ready shader parts for E/F/K work.

Magic-link sign-inmagic-link-sign"sign-in is a magic link" — one field, no password. The visual only; wire it to your own auth.

Magic-link splitmagic-link-split"magic-link split" — copy on one side, a single email field on the other, no password field at all; reach for it for a lower-friction, passwordless entry point.

magneticmagnetic"all CTAs are 22" — buttons pull toward the cursor, then elastic-snap back. Bonhomme signature.

Margin line-numbered clausesmargin-line-numbered-clauses"number the clauses down the margin" — a real ordered list with CSS-counter line numbers hung in the gutter, the way a contract or spec reads. Not a ledger — flowing sentences, not label/val

margin what-ifmargin-what-if"teach the 20% via 219" — a slider showing what different margins would do to service quality. Radical transparency as a lesson.

Marked phrase, gradient underlinemarked-phrase-gradient-underline"mark a phrase in the text" — one phrase gets a gradient underline instead of a full highlight box.

Marker underlinemarker-underline"mark the phrase" — a hand-drawn-feeling underline under the words that matter.

Marquee alert bar navmarquee-alert-bar-nav"put a scrolling alert above the nav" — a thin ticker strip carries one line of status, the plain link row sits underneath it.

Marquee band heromarquee-band-hero"run the title as a band" — the headline itself travels. Loud, and it earns the noise by being the only motion.

Marquee-edge footermarquee-edge-footer"footer rides a marquee" — a slow ticker strip seals the page, compact bar underneath.

Marquee loop rowmarquee-loop-row"run it as a marquee" — small frames scrolling in an unbroken loop, the set duplicated once so the seam never shows.

Masonry three-columnmasonry-three-column"masonry it three across" — native CSS columns, uneven heights, no JS layout pass.

Materials and finish list with swatch chipsmaterials-finish-list-swatch-chips"materials list is <n>" — a stacked list of materials, each with a small swatch chip and a value; reach for it to spell out what a thing is made of.

Media card with duration pillmedia-card-duration-pill"media card is <n>" — a thumbnail card with a duration pill and a hairline under the title; reach for it in a video or course listing.

Media chapter listmedia-chapter-list"chapter the video" — timestamps beside titles. Turns a long recording into something navigable.

Media grid with feature cellmedia-grid-feature-cell"media grid is <n>" — four placeholder cells where one spans double width as the feature; reach for it as a lightweight gallery or portfolio teaser.

Mega-menu columnsmega-menu-columns"open a mega menu" — grouped columns with a featured cell. What a real catalogue navigation looks like.

the menu's MCP servermenu-s-mcp-server"agents shop the menu — 258" — 2026's rule: without an MCP surface your systems are invisible to AI. The catalog serves humans AND agents.

Minimal arrow-link CTA rowminimal-arrow-link-cta-row"give me a minimal arrow CTA row" — just two understated arrow links side by side, no button, no card; reach for it when the page has already made its case and the close should be quiet.

Minimal hero, one hairlineminimal-hero-one-hairline"give me a minimal hero" — type and a single hairline, nothing else; reach for it when the brand's confidence is the point and every extra element is noise.

Minimal sign-off footerminimal-sign-off-footer"close it out with a minimal sign-off" — a hairline rule, a wordmark, three links, nothing competing for attention.

mirror floormirror-floor"showroom floor = 201" — the product doubled in a soft reflection. Instant premium staging.

Mixed orientation pairmixed-orientation-pair"pair a portrait with a landscape" — deliberately different aspect ratios sitting on the same baseline.

Mono label / display pairingmono-label-display-pairing"pair a mono label with a display line" — a small uppercase eyebrow over a large display headline, the standard editorial stack.

Monthly/annual toggle, pure CSSmonthly-annual-toggle-pure-css"give me a monthly/annual toggle" — a switch flips the displayed price between monthly and annual, built on a hidden checkbox with no JavaScript; reach for it when the plan itself doesn't ch

moodboard composermoodboard-composer"clients play with 120" — shop-the-room in reverse: visitors compose their space from your catalog. Engagement that converts to carts.

morphing blobmorphing-blob"living shape = 32" — organic vertex-displaced form, endlessly breathing.

Multi-step form, progress rulemulti-step-form-progress-rule"multi-step form is <n>" — step 2 of 3 with a segmented progress rule above the fields; reach for it when a long form needs to feel like a short one.

Multistep signup with step indicatormultistep-signup-step-indicator"multistep signup is <n>" — a three-step indicator over the current step's field; the visual only, wire it to your own signup flow.

native carouselnative-carousel"sliders = 87" — browser-native snap carousel, momentum and physics included. Drag/swipe it.

Nested file tree listnested-file-tree-list"file tree is <n>" — native <details> folders holding indented file rows, keyboard-operable with no JS; reach for it as a compact file or resource browser inside a dashboard.

New device sign-in approvalnew-device-sign-approval"device approval is <n>" — a new-sign-in card with device rows and Approve/Deny; the visual only, wire it to your own session security.

Newsletter form with consent linenewsletter-form-consent-line"newsletter with consent is <n>" — a short signup field with an inline opt-in line beneath; reach for it wherever a footer capture needs to look deliberate about consent, not bolted on

Newsletter inline footernewsletter-inline-footer"footer needs a signup field" — copy on top, an underline-style email field with no visible box, in keeping with the rest of the page.

no false floorsno-false-floors"no dead ends — 243" — NN/g's false-floor fix: if a section ever looks finished, people stop. Cut-off type + peek + idle nudge.

Noise washnoise-wash"wash it with noise" — an SVG turbulence grain over a gradient. The thing that stops flat colour looking cheap.

Notification and alert stacknotification-alert-stack"alert stack is <n>" — a vertical stack of dismissible-looking alert cards, edge-marked by severity; reach for it as a notification panel on a dashboard.

Numbered act markernumbered-act-marker"mark the act on the rule" — a numbered pill (02 / 07) riding an otherwise plain hairline, placed off-centre.

Numbered chapter headingnumbered-chapter-heading"give it a chapter number" — a big set numeral, a kicker, and the title, the way a printed section opener reads.

Numbered pull statementnumbered-pull-statement"pull a numbered statement" — an oversized index numeral beside a short claim, the editorial way to call out one idea.

Numbered quote pairnumbered-quote-pair"two numbered quotes" — indexed like footnotes. Reads as record rather than marketing.

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

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

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

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

Onboarding checklist with progress ringonboarding-checklist-progress-ring"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 pairone-off-versus-subscription-pair"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.

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

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

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

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

Organisation invite accept cardorganisation-invite-accept-card"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.

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

Outline → fill hoveroutline-fill-hover"big nav words are 12" — hollow stroke type that floods with color on hover.

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

Outlined wordmark herooutlined-wordmark-hero"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.

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

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

Page header with breadcrumb and actionspage-header-breadcrumb-actions"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.

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

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

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

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

particles form textparticles-form-text"logo assembles with 41" — a thousand particles scatter and reform your wordmark.

Passkey prompt cardpasskey-prompt-card"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.

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

Password field with strength meterpassword-field-strength-meter"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 form (visual only)payment-card-form-visual-only"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 corner revealpeel-corner-reveal"peel the corner" — a lifted paper-corner fold over a media frame that curls further on hover, revealing the layer underneath.

Per-seat calculator layoutper-seat-calculator-layout"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.

Period comparison splitperiod-comparison-split"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 tablepermission-matrix-table"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

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

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

Picture-in-picture overlaypicture-picture-overlay"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.

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

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

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

points globe (2D)points-globe-2d"global reach = 81" — a rotating sphere of dots. Shipping maps, presence, network stories.

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

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

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

Preview flyout navpreview-flyout-nav"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.

Price with open breakdown disclosureprice-open-breakdown-disclosure"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

Price with struck-through comparisonprice-struck-through-comparison"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

Print headerprint-header"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 detail accordionproduct-detail-accordion"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 sidebarproduct-hero-spec-sidebar"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.

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

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

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

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

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

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

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

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

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

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

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

Pull-quote with rulepull-quote-rule"proof is one pull quote" — oversized quote, hairline, attribution. One strong quote beats a wall of three.

Pull quote with rulepull-quote-rule-2"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.

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

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

queue backpressure (sim)queue-backpressure-sim"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 text-link CTAquiet-text-link-cta"quiet CTA to close an article" — a hairline, a soft line of copy, one understated arrow link.

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

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

Quote with gradient portraitquote-gradient-portrait"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.

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

Quote panel with line-item breakdownquote-panel-line-item-breakdown"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.

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

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

Rating scale input rowrating-scale-input-row"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.

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

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

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

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

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

Recovery codes with checkbox revealrecovery-codes-checkbox-reveal"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 ROIrefurb-roi"refurb sells via 221" — desks you own vs replacement cost, savings counted live. The lifecycle pitch as an instrument.

Reorderable list with drag handlesreorderable-list-drag-handles"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.

reveal on scrollreveal-scroll"default entrance = 14" — the workhorse. Everything that doesn't have a fancier entrance gets this.

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

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

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

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

ripple on clickripple-click"hero reacts with 35" — clicks send water rings warping through the surface.

Rive runtimerive-runtime"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.

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

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

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

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

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

same-doc View Transitionsame-doc-view-transition"variants swap via 244" — document.startViewTransition morphs any DOM change natively. The atelier's variant switcher runs on this.

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

Saved and syncing status chipsaved-syncing-status-chip"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

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

scene blend (render targets)scene-blend-render-targets"acts dissolve through 242" — both scenes render to textures; a noisy edge blends them. How award pipelines hand one world to the next.

scramblescramble"labels decode with 09" — glyph noise resolves into words. Tech/lab flavor; use sparingly.

Scroll cuescroll-cue"add the scroll cue" — a travelling dot on a hairline. NN/g: every act needs a visible continuation cue or it reads as the end.

scroll-driven 3Dscroll-driven-3d"showcase spins with 31" — the object's rotation is welded to your scrollbar. Scroll up and down over this card.

scroll-scrub canvasscroll-scrub-canvas"product assembles with 48" — a frame sequence scrubbed by scroll. The Apple AirPods technique (in production: rendered image frames).

Scroll-snap chip railscroll-snap-chip-rail"let the categories scroll and snap" — a horizontal row of filter chips with native scroll-snap, edges faded to show there is more. For catalogues with too many categories for one row.

Scrollable terms consent gatescrollable-terms-consent-gate"terms consent gate is <n>" — a fixed-height scrollable terms box with a fade edge, gating a dimmed Continue button until the checkbox is checked, via :has(); reach for it wherever agr

Scrub bar with chapter marksscrub-bar-chapter-marks"show the scrub marks" — a play frame over a progress rail with tick marks at the chapter breaks and a thumb sitting mid-scrub.

SDF 3D type (troika)sdf-3d-type-troika"type is geometry — 235" — crisp signed-distance-field text in WebGL, sharp at any zoom. Type your own headline into the scene.

search by vibesearch-by-vibe"search is 51" — semantic search: "something my mother would wear to a wedding" returns the right products, not keyword misses.

Search field with filter chipssearch-field-filter-chips"search with chips is <n>" — a search field with a row of togglable filter chips underneath; reach for it on any listing or catalog page.

Section countersection-counter"count the sections" — current over total, fixed in a corner. Orientation is what stops a page feeling endless.

Segmented choice pickersegmented-choice-picker"segmented picker is <n>" — a pill-shaped radio group that reads as one control; reach for it instead of a dropdown when there are 2-4 real choices.

Segmented pill switchersegmented-pill-switcher"segmented pill switcher" — a real three-way radio control with a pill that slides to the checked option; reach for it for view toggles, not page navigation.

Segmented tab panel switchersegmented-tab-panel-switcher"tab switcher is <n>" — a segmented-control tab row swapping the panel below via radio inputs, no JS; reach for it to switch between Overview/Details/Logs style views inside one dashbo

Selection & scrollbarselection-amp-scrollbar"brand the chrome with 178" — selection color + scrollbar styling. The cheapest polish nobody skips on award sites.

sequence scrubsequence-scrub"launch page = 108" — the true Apple mechanism: a rendered frame sequence scrubbed by scroll. In production the frames come from the desktop GPU render rig.

server-drawn imageserver-drawn-image"links unfurl via 257" — a function draws the social card on demand: one endpoint, infinite personalized images.

server-sent streamserver-sent-stream"progress streams via 248" — Server-Sent Events from a live function. The primitive under every AI typing effect and build log.

service lifecycleservice-lifecycle"services read as 144" — design through decommission as one continuum. Clients see the whole relationship, not a transaction.

Session gate cardsession-gate-card"session gate" — blurred generic content behind a lock and a sign-in prompt; reach for it wherever a page needs to say you're logged out without leaking what's behind it.

Settings form panel, grouped rowssettings-form-panel-grouped-rows"settings panel is <n>" — a labelled group of setting rows, each with a control aligned right; reach for it as an account or config screen inside a dashboard.

shader fogshader-fog"atmosphere behind hero = 40" — slow procedural smoke. Deeper than 06, cheaper than 27.

shape morphshape-morph"brand mark breathes with 45" — vector shapes flow between forms. Logos, icons, section dividers.

Share split barshare-split-bar"split one bar by share" — proportions in a single rule, legend underneath. Clearer than a pie, always.

shared-element handoffshared-element-handoff"carry it across via 241" — one element persists through the seam, scrubbed and reversible. The single-continuous-surface trick.

Sheen sweepsheen-sweep"pass a sheen through it" — one hard-edged band of light crossing the panel on a loop, like brushed metal catching a window.

shimmer resolveshimmer-resolve"answers resolve via 196" — skeleton shimmer crystallizing into words, line by line. How 2026 AI products feel fast.

Shine sweep textshine-sweep-text"metallic type = 62" — a light band sweeps through the letters forever. Zero JS.

shop the roomshop-room"editorial sells with 135" — tap the pulsing dots inside the scene. Photography becomes a storefront.

showroom walkthroughshowroom-walkthrough"walk the room via 232" — a camera on a spline path through a furnished interior, scrubbed by scroll. The Igloo Inc. archetype.

Side page indexside-page-index"add a side page index" — a vertical rail of dots and labels down the edge, the active section shown larger and lit.

Sidebar nav with sliding markersidebar-nav-sliding-marker"sidebar marker nav" — a vertical rail where a thin accent bar tracks the hovered or focused item; reach for it on dashboards and account settings panels.

Sign-in cardsign-card"sign-in card" — an email-and-password card with generous spacing and a quiet accent on focus; the default when a client just needs a login screen.

Sign-off rule footersign-off-rule-footer"close it with the sign-off rule" — hairline, wordmark, links, a live status dot. The quietest possible ending.

Single-price statement panelsingle-price-statement-panel"give me a single-price panel" — one plan, one number, stated plainly; reach for it when there is nothing to compare and the offer is intentionally simple.

Sitemap footersitemap-footer"full sitemap footer" — grouped column links over a legal bar. The one every real site eventually needs.

Size and dimension selectorsize-dimension-selector"size selector is <n>" — a row of size buttons over a live dimension readout, radio inputs only; reach for it wherever a product ships in more than one size.

sizing toolsizing-tool"sizing = 125" — calibrate against a bank card, then sizes render at TRUE physical scale. The returns-killer.

skeleton shimmer loopskeleton-shimmer-loop"loading states use 77" — content shape shimmers before data lands. This one loads on a loop.

Skewed tab deck navskewed-tab-deck-nav"cut the tabs on a skew" — interlocking parallelogram tabs built from a skewed pseudo-element, not a clip-path chevron; reach for it on a secondary section nav that wants an edge.

Skip-to-content linkskip-content-link"wire up skip to content" — off-screen until keyboard focus, then it snaps into view; reach for it on any page with real navigation chrome above the main content.

slime mold (Physarum)slime-mold-physarum"living veins = 160" — thousands of agents finding paths like Physarum. Organic infrastructure, growing live.

snap chapterssnap-chapters"story mode = 90" — full-frame chapters with position dots. Decks, manifestos, product tours.

Snap stripsnap-strip"browse it as a snap strip" — native CSS scroll-snap, no carousel library, works with a trackpad and a thumb.

sound design layersound-design-layer"the site hums with 169" — the missing sensory channel (~70% of award winners ship audio). Off by default, always.

Span-cell gridspan-cell-grid"let one cell span two columns" — a three-column grid where a single frame breaks the rhythm on purpose.

Sparkline rowsparkline-row"stats are <n>" — a figure with its own trend line inline; reach for it when the shape of the number matters as much as the number.

spec comparisonspec-comparison"compare with 121" — side-by-side specs where the differences light up. Kills choice paralysis at the decision moment.

Spec ledgerspec-ledger"spec it as a ledger" — label/value rows on hairlines. What a datasheet looks like when someone cared.

Spec list with hover-defined termsspec-list-hover-defined-terms"glossary spec list is <n>" — spec rows with a small marker that reveals a plain-words definition on hover or focus; reach for it when a spec sheet uses jargon a buyer shouldn't have t

spec sheetspec-sheet"submittals via 129" — branded spec sheets generated on the spot, print-ready. Non-negotiable in contract furniture.

speculation rules badgespeculation-rules-badge"instant nav via 168" — one script tag in the head. The cheapest expensive-feeling upgrade on the entire menu.

speech inputspeech-input"voice input via 208" — hold the button, speak, watch it transcribe. The input side of 55.

Spline scenespline-scene"embed via 116" — interactive 3D authored in a design tool, embedded like an image. Fastest idea-to-3D when code isn't the point. (Sample scene; ours needs a Spline account.)

Split contact form with rulesplit-contact-form-rule"contact form is <n>" — a short pitch column beside a compact two-field form, divided by a single rule; reach for it when a contact block needs to feel considered, not bolted on.

Split CTAsplit-cta"split the ask" — copy on the left, the action on the right, hairline between. Reads as calm, converts like a banner.

Split CTAsplit-cta-2"split the CTA" — copy on the left, a divider, the button stack on the right.

Split editorial herosplit-editorial-hero"give me a split editorial hero" — oversized type on one side, a hairline rule and meta list on the other; reach for it when the headline should read like a magazine opener, not a landing pa

split-flap boardsplit-flap-board"departures via 153" — Solari-board mechanics for headlines, stats, drop announcements.

Split media and captionsplit-media-caption"media left, caption right" — the editorial pairing, with the caption doing real work.

spotlight revealspotlight-reveal"secret layer via 68" — content only visible inside a torch beam that follows the cursor.

SQL in the browsersql-browser"172 powers the dashboards" — real SQLite compiled to WASM. Edit the query — it's live.

Stacked brief intake formstacked-brief-intake-form"intake form is <n>" — a vertically stacked brief form with a full-width textarea; reach for it when the ask is open-ended and needs room to write.

Stacked type-pairing herostacked-type-pairing-hero"give me a hero with a serif/mono pairing" — an italic display line stacked between two small monospace labels; reach for it when the typography itself should carry the editorial tone.

stacking cardsstacking-cards"services/features section = 18".

stagger playgroundstagger-playground"waves ripple from 195" — the same grid, four different stagger origins. Choreography vocabulary in one card.

Stair-step rowstair-step-row"step them down like stairs" — four frames in a plain flex row, each one sitting a little lower than the last. No overlap, no rotation.

starfield warp (2D)starfield-warp-2d"loading jump = 80" — stars streak past at warp. Cheap, hypnotic, works everywhere.

Statement CTAstatement-cta"the ask is a statement" — one full-bleed line and an arrow link. No box, no button, no noise.

Stepped edge seamstepped-edge-seam"step the seam" — a stacked, stepped edge between two backgrounds instead of a straight line, like a ticket stub.

Stepped seamstepped-seam"step down into the next act" — a staircase edge. Geometry instead of a straight line.

Sticky buy barsticky-buy-bar"buy bar is <n>" — a horizontal bar with the item, a quantity stepper, and add-to-cart, meant to pin to the viewport; reach for it once the price is scrolled out of view but the decisi

Sticky CTA barsticky-cta-bar"give me a sticky CTA bar" — a floating pill with copy and a button, shadowed like it's sitting above the page.

Sticky index scroll panesticky-index-scroll-pane"pin the group labels as it scrolls" — position:sticky category headers inside their own scroll pane, the iOS-contacts move. For scope lists long enough to need it.

Sticky section headersticky-section-header"give me the sticky section header" — a slim pinned bar naming the current section with a thin progress rule beneath; reach for it on long single-page documents so a reader always knows wher

sticky-statesticky-state"headers know via 202" — the bar restyles itself the moment it sticks. Zero JS where supported; scroll the box.

Stitched rulestitched-rule"stitch the seam" — a dashed rule with a solid centre run. Reads bound rather than cut.

stone comparerstone-comparer"stones explain via 213" — cut, clarity and glow compared visually, not in a spec table.

stroke-fill scrubstroke-fill-scrub"headlines flood with 179" — hollow type filling as you scroll past. The SOTD hero staple.

Stroke headlinestroke-headline"outline the headline, fill one word" — hollow display type with a single solid word carrying the emphasis.

stylized waterstylized-water"product floats on 110" — a living water surface with sun glint and moving light. Campaign-hero material.

Subtitle track barsubtitle-track-bar"give it a caption track" — a solid subtitle plate fixed under the frame with a CC chip and a timecode, not a scrim over the image.

supplier scorecardsupplier-scorecard"suppliers ranked via 220" — lead-time reliability, QC pass rate, freight damage — the vetting made visible.

SVG line drawsvg-line-draw"underline/diagram draws with 44" — strokes draw themselves as you scroll. Scroll up and down over this card.

SVG organicssvg-organics"blobs breathe with 157" — living shapes from SVG filter chemistry alone. No canvas, no WebGL.

Sweeping rule seamsweeping-rule-seam"sweep a rule between acts" — a light travels the divider once. A seam you notice only if you look for it.

sync engine (sim)sync-engine-sim"it feels local via 260" — optimistic writes, server reconciliation, offline queue that flushes. The Linear feel, the 2026 category.

Tab bar with sliding filltab-bar-sliding-fill"sliding tab bar" — a filled tab background that glides between sections on hover or focus; reach for it for a secondary nav under a page header.

Tabbed content switchtabbed-content-switch"switch the content in tabs" — real radio inputs and :has(), no JS, so one panel of copy replaces another on click. For overview/specs/notes style content.

Tabbed footer panelstabbed-footer-panels"give the footer its own tabs" — radio inputs and :has() switch between Contact, Sitemap and Legal without leaving the footer.

Tabbed spec groupstabbed-spec-groups"tabbed specs are <n>" — radio-driven CSS-only tabs switching between spec categories, no JS; reach for it as an alternative to an accordion when the sections are peers, not a stack.

Tag-cloud wall footertag-cloud-wall-footer"wall the links instead of columning them" — a dense grid of chip-sized links with a couple pulled wide, for pages with too many links to make three neat columns.

Tag and keyword chip inputtag-keyword-chip-input"tag input is <n>" — removable keyword chips with a trailing text field; reach for it wherever someone builds a list of their own terms.

terrain flyoverterrain-flyover"cruise over 198" — endless procedural landscape sliding under the camera, fog to the horizon.

text dissolvetext-dissolve"words exit with 92" — type disintegrates into wind-blown particles and re-forms. Watch the loop.

text on a pathtext-path"caption rides 59" — words travel along a drawn curve as you scroll. Scroll up and down over this card.

text-wrap toggletext-wrap-toggle"headlines breathe via 205" — text-wrap: balance kills orphan words. The cheapest typography tell of a cared-for site.

theme fliptheme-flip"theme switch = 78" — the new theme floods outward in a circle from the toggle. No hard swap.

Theme switcher pill rowtheme-switcher-pill-row"add a theme switcher pill" — three icon options in a segmented pill with a sliding accent behind the active one.

Three-tier pricing rowthree-tier-pricing-row"use 365".

Three-up quote gridthree-up-quote-grid"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.

Ticker strip footerticker-strip-footer"footer with a ticker strip" — a clipped, oversized headline band above a plain nav row; static, not scrolling — the type carries the motion cue.

tilt cardtilt-card"product cards get 23" — perspective tilt following the cursor, with a moving light sheen.

Timeline railtimeline-rail"run it down a timeline rail" — dated entries on a vertical line. History, roadmap, or process.

toast stacktoast-stack"notifications = 76" — events slide in, stack, and excuse themselves. Cart adds, saves, agent updates.

Tone-shift band seamtone-shift-band-seam"shift the tone at the seam" — the section background itself changes across the band, not just a rule.

Topographic ringstopographic-rings"topographic rings behind it" — concentric contours, like a survey map. Depth without a single image.

Torn-edge footertorn-edge-footer"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.

Torn-edge striptorn-edge-strip"tear the edges where they overlap" — a zigzag clip-path on the trailing edge of each frame, like torn perforated sheets fanned out.

trade portal gatetrade-portal-gate"trade gate = 130" — the login wall that unlocks dealer pricing. Commitment signal in, repeat business out.

Trust badge rowtrust-badge-row"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

Two-column with margin notetwo-column-margin-note"body copy with a margin note" — the printed-page move: a narrow annotation column beside the text.

Two-factor code entrytwo-factor-code-entry"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.

Two-option comparison paneltwo-option-comparison-panel"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.

Two-path CTAtwo-path-cta"give them two doors" — ready now versus not yet. Both are a yes; only one is a purchase.

Two-size stacked lockuptwo-size-stacked-lockup"stack a huge word over a tiny one" — a display-size word with a mono caption underneath, the ratio doing the hierarchy.

Two-tier utility navtwo-tier-utility-nav"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.

Two-tone split footertwo-tone-split-footer"split the footer in two tones" — a contact half and a legal half, divided by a rule.

Two-up content cardstwo-up-content-cards"use 410".

typewritertypewriter"tagline types with 60" — writes, pauses, deletes, rewrites. Simple and endlessly watchable.

UGC wallugc-wall"worn by real people = 212" — the as-seen-on wall, hover to see who. Social proof as texture.

Underline-slide navunderline-slide-nav"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.

upholstery touchupholstery-touch"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 meter row with barsusage-meter-row-bars"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-tier ladderusage-tier-ladder"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.

variable-font proximityvariable-font-proximity"headline breathes with 57" — letter weight swells near the cursor. Needs a variable font; Inter is already loaded.

Variant swatch pickervariant-swatch-picker"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.

velocity aberrationvelocity-aberration"speed splits color via 193" — RGB channels separate with scroll velocity and snap back at rest.

velocity-adaptive seamvelocity-adaptive-seam"seams breathe with 240" — rush and the transition cuts short; linger and it plays full. Juries score this pacing explicitly.

velocity image bendvelocity-image-bend"galleries bend with 150" — THE Awwwards gallery signature: imagery that curves with scroll inertia and settles flat.

velocity marqueevelocity-marquee"use 11".

velocity skewvelocity-skew"type leans with 49" — text shears with your scroll speed and settles when you stop. Pure feel.

Verification code entryverification-code-entry"code entry is boxed" — six separated digits with a focus ring. The step everyone builds badly.

Vertical frame with action railvertical-frame-action-rail"give it a vertical frame and a rail" — a tall 9:16 media panel with stacked counters beside it, the short-form clip layout.

Vertical label beside headlinevertical-label-beside-headline"run a vertical tag beside the headline" — a rotated writing-mode label doing the job a kicker usually does, without eating a line.

Vertical rail stripvertical-rail-strip"index them down a rail" — frames stacked vertically off a single connecting line, each one marked by a dot rather than a number.

VFX-JSvfx-js"treat sections with 113" — drop-in WebGL effects on ordinary DOM elements, no shader writing. Section F powers, applied site-wide in minutes.

Video frame with play affordancevideo-frame-play-affordance"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.

View Transitionsview-transitions"grid-to-detail morphs with 47" — click a tile: the browser itself morphs it into the featured slot. Zero-library page transitions.

Vignette framevignette-frame"frame it with a vignette" — an inset hairline and a soft darkened edge. Makes any panel feel deliberate.

virtual scroll stagevirtual-scroll-stage"own the scroll via 246" — wheel and touch feed a virtual value; everything eases toward it. How ZERO-class narratives are driven.

voice interfacevoice-interface"add 55" — spoken answers and voice-driven browsing. This demo really speaks — the button uses your browser's own voice engine.

volume pricingvolume-pricing"tiers shown via 134" — buyers watch themselves unlock the next discount. Self-qualification without a sales call.

voronoi shattervoronoi-shatter"transitions break with 159" — imagery fractures into shards from your click point, then heals.

warranty flowwarranty-flow"claims resolve via 217" — photo, issue, resolution path in three taps. Service as a product feature.

wave textwave-text"playful accent = 65" — letters ride a standing wave. Loaders, empty states, footers.

Web Shareweb-share"sharing native via 223" — the OS share sheet, not a row of social icons. One API call.

webcam ring try-on (MediaPipe)webcam-ring-try-mediapipe"try-on = 173" — the census's #1 boutique conversion item: a ring rendered on your actual finger, live, in-browser.

WebGPU compute particles (TSL)webgpu-compute-particles-tsl"a hundred-thousand-particle budget: 234" — position and velocity never leave the GPU. TSL compute shaders, the 2026 differentiator.

WebGPU (three r184, isolated import)webgpu-three-r184-isolated-import"go WebGPU" — the post-WebGL era: compute shaders, 100M particles, TSL. This card runs three r184's WebGPU renderer beside our r170 stack.

webhook signatureswebhook-signatures"trust the hooks via 255" — payload signed client-side, verified server-side; flip one byte and watch it get rejected.

Weighted clause lineweighted-clause-line"weight one clause, not the size" — a single sentence where the emphasis clause jumps in font-weight, not size, so the page stays quiet.

What changes by tierwhat-changes-by-tier"show only what CHANGES between tiers" — the rows that are identical are noise. Cut them.

What's in the box, itemised panelwhat-s-box-itemised-panel"in the box is <n>" — a numbered itemised list of what ships, each line with a quantity; reach for it right after the buy button to set expectations before checkout.

What's included checklist panelwhat-s-included-checklist-panel"give me a what's-included panel" — a checked list of what the price covers, with the number underneath; reach for it when the sell is completeness, not comparison.

Wide letter-spaced label rowwide-letter-spaced-label-row"spread the labels edge to edge" — a bordered row of words at maximum letter-spacing, justified to the full width.

wireframe buildwireframe-build"product constructs via 82" — the mesh draws itself into existence as you scroll.

wishlist burstwishlist-burst"saves feel good via 211" — the heart pops with particles. Dopamine at the save moment.

word rotatorword-rotator"hero line rotates with 63" — one slot in the sentence flips through your value props.

word scrubword-scrub"manifesto paragraph gets 10".

worker renderingworker-rendering"heavy charts via 225" — rendering moved off the main thread entirely. Dashboards that never stutter.

zoom portalzoom-portal"chapters dive via 161" — scroll zooms INTO the image until it becomes the next section. The Apple transition.

zoom settlezoom-settle"gallery images use 20" — image starts oversized and settles to 1:1 as it scrolls through view.

360° viewer360-viewer"PDPs spin with 123" — the multi-angle inspection jewelry buyers demand. Production feeds it a photo turntable or our GLBs.

3D configurator3d-configurator"product page runs 101" — live material and finish switching with the price following. This one is fully working.

3D hotspots3d-hotspots"specs live on the object — 231" — annotations pinned to 3D anchor points, fading as they rotate out of view. Occlusion-aware.

accordion columnsaccordion-columns"category strip = 72" — columns that yawn open on hover. Five categories, one elegant row.

Accordion sitemap footeraccordion-sitemap-footer"collapse the sitemap into an accordion" — real <details> groups, no JS, the mobile-footer move. First group shown open, the rest close to one row.

adaptive pageadaptive-page"homepage adapts with 53" — hero, copy, and CTA re-rank per visitor context. One page, many faces.

agentic back-officeagentic-back-office"Nimos runs 56" — agents watching inventory, triaging orders, drafting supplier mail — reporting to one hub. The business runs while you sleep.

agentic storefrontagentic-storefront"wire 106" — your catalog answering inside ChatGPT/Gemini via MCP tools. The new free distribution channel; checkout stays yours.

Alternating line stackalternating-line-stack"stack the lines alternating" — left, right, left. Asymmetry does the work no centred block can.

Ambient media glowambient-media-glow"media glows via 176" — the YouTube ambient trick: imagery leaks its colors into the room around it.

Anchor list with progressanchor-list-progress"index the page down the side" — anchors with an active marker. Orientation is what stops long pages feeling long.

anchor morph dialoganchor-morph-dialog"dialogs grow from 167" — the panel morphs out of the button you pressed, and returns into it. No teleporting modals.

anchored tooltipanchored-tooltip"tooltips via 88" — elements that tether themselves to an anchor. Kills positioning libraries.

Angled slash dividerangled-slash-divider"cut the seam on an angle" — two acts split by a diagonal clip-path, with a thin accent stroke tracing the cut.

AR model-viewerar-model-viewer"products get 102" — drag to inspect; on a phone this places the object in your room via AR. Feeds from our GLB pipeline.

Arc curve dividerarc-curve-divider"curve the seam" — the next section rises as a smooth dome over the one above it, a single border-radius ellipse, no SVG.

As-featured-in stripas-featured-strip"proof is <n>" — a slow continuous strip of press-style marks; reach for it as a quiet trust signal above the fold, not a hero claim.

ASCII renderascii-render"easter egg in 38" — scenes drawn in live type. Terminal-core; pairs with 09.

Aspect ratio rowaspect-ratio-row"mix the aspect ratios" — portrait, square, landscape in one row. Rhythm instead of a uniform grid.

assembly playerassembly-player"guides via 136" — stepped assembly with a parts checklist. Pre-purchase confidence, post-purchase calm.

Asymmetric bentoasymmetric-bento"lay it out as an asymmetric bento" — named grid areas instead of a span, so one tall cell and one wide cell can both break the rhythm at once.

audio-reactiveaudio-reactive"visuals hear with 99" — real frequency analysis driving the graphics. This demo synthesizes its own beat.

Aurora driftaurora-drift"aurora behind the hero" — slow colour fields that never repeat visibly. Costs nothing; no canvas, no GL.

Back-to-top affordanceback-top-affordance"add back-to-top" — a floating round button with an up-chevron, the kind that only appears once you have scrolled.

before / afterbefore-after"proof section = 71" — drag the divider between two states. Refurb work, retouching, redesigns.

Before/after credibility pairingbefore-after-credibility-pairing"proof is <n>" — a plain panel next to a refined one; reach for it when the credibility argument is craft, not a number.

Bento contact footerbento-contact-footer"lay the footer out as a bento" — asymmetric grid-template-areas cells for contact, social, location and legal instead of equal columns.

bento live numberbento-live-number"features = 137" — the 2026 SaaS standard: mixed-size capability cards that read in five seconds.

Big-ask closerbig-ask-closer"end on the big ask" — oversized closing line with the address as the only link. A visible ending shortens the perceived middle.

Blockout collageblockout-collage"block it out like a collage" — three solid rectangles overlapped at low opacity, one rule crossing through. Bauhaus, not gradient.

blur-in revealblur-reveal"soft entrances use 61" — characters sharpen out of a blur. Dreamier than 07.

Booking date and slot pickerbooking-date-slot-picker"booking picker is <n>" — a week strip with one day selected above a grid of time slots; static and visual, wire real availability yourself.

booking slotsbooking-slots"consults book via 207" — the cal.com pattern: pick a day, pick a slot, done in two taps.

Border beamborder-beam"featured card wears 69" — a comet circles the border. Marks the one thing you want eyes on.

Breadcrumb with cut chevronsbreadcrumb-cut-chevrons"chevron breadcrumb" — a trail separated by a sliced arrow shape instead of a plain ">"; reach for it on deep catalogue or docs hierarchies.

brief starterbrief-starter"every page funnels to 147" — three inputs of momentum, then a warm handoff to the real /procurement intake.

budget vs actualbudget-vs-actual"money honest via 218" — paired bars per category, variance called out. Trust through numbers that move.

burger morphburger-morph"menu icon = 67" — three lines fold into an X. The detail everyone notices without noticing.

cache probecache-probe"speed is a header — 256" — the CDN caching dance shown with real responses. Why fast sites feel free to run.

Callout bandcallout-band"pull it out as a callout band" — a bordered aside for the sentence that must not be skimmed past.

Card CTA with rulecard-cta-rule"CTA in a card, with a rule" — heading, a hairline, then an arrow link that slides on hover.

card stack scrollcard-stack-scroll"sections stack via 228" — panels pile up and settle as you scroll; the one beneath dims and recedes. The Apple keynote scroll.

Care instructionscare-instructions"spell out the care" — symbols and plain rules. The page a buyer returns to after the sale.

care ritualcare-ritual"aftercare = 214" — a stepped care ritual that makes owning the piece feel like membership.

Case stripcase-strip"strip the case study down" — what, what changed, over how long. Three facts beat three paragraphs.

Centre-rule diptychcentre-rule-diptych"split it into a diptych with a centre rule" — two frames divided by a hairline instead of a gap, reads as one composed pair.

changelog feedchangelog-feed"alive-ness via 139" — a living what's-new feed. Watch it: entries keep arriving. Pairs with The Signet.

char cascadechar-cascade"headline enters with 07" — each character rises with a tiny rotation, staggered. The classic hero move.

Checklist panelchecklist-panel"list it as a checklist" — ticked rows in a bordered panel. For scope, inclusions, or requirements.

Chevron notch seamchevron-notch-seam"notch the seam with a chevron" — a downward chevron sitting on the rule, marking the break without a label.

circular textcircular-text"badge/stamp = 58" — rotating ring of type. Corner badges, seals, section markers.

click rippleclick-ripple"taps ripple via 186" — the press radiates from the exact touch point. Tactile confirmation.

clip revealclip-reveal"images unveil with 19" — the image is uncovered like a curtain rather than fading in.

cloth wavecloth-wave"images drape with 84" — imagery on rippling fabric. Lookbooks and campaign heroes.

cold startcold-start"explain serverless via 253" — first hit boots an instance (cold), second reuses it (warm), with real timings and the region.

column speed gridcolumn-speed-grid"galleries drift with 182" — center column slow, edges fast. Instant depth for image grids.

Command hint barcommand-hint-bar"hint the command palette" — a fake-input bar advertising ⌘K. The cheapest discoverability there is.

command palette (wired to the whole menu)command-palette-wired-whole-menu"add 149" — the defining SaaS interaction. This one actually navigates the menu: try "glass" or "128".

commerce micro packcommerce-micro-pack"cart moments = 164" — the product flies an arc into the cart, confetti on landing, live drop countdown with a draining stock bar.

Compact nav bar with dividercompact-nav-bar-divider"one bar, divided" — mark on the left, links right, a hairline under. The default that never looks wrong.

Comparison columnscomparison-columns"put them side by side" — two columns, one rule, no winner declared. Let the reader decide.

Comparison paircomparison-pair"put the two numbers head to head" — before and after with the gap between them stated.

Compression Streamscompression-streams"exports shrink via 222" — browser-native compression for CSV/JSON downloads. Boring, Baseline, free.

concierge chatconcierge-chat"add 50" — a styling/product advisor that streams answers, knows the catalog, and hands off to checkout.

Conic spoke wheelconic-spoke-wheel"spin a spoke wheel behind it" — repeating-conic-gradient spokes turning once a minute. Reads as machined, not decorative.

container queries slidercontainer-queries-slider"components adapt via 204" — drag the slider: the card restyles by its container, not the viewport. Design-system-grade responsiveness.

context cursor labelscontext-cursor-labels"the cursor speaks with 185" — hovering media, the cursor grows and says what a click will do.

Continues-below descend cuecontinues-below-descend-cue"cue that it continues below" — a short line and a drifting chevron pointing down, the scroll invitation that isn't an animated bounce.

coordinated install flowcoordinated-install-flow"install section = 146" — the compliant referral pattern: no named partner, no fake live booking, just the honest flow.

copy at scalecopy-at-scale"catalog copy via 54" — every product page gets voice-consistent descriptions generated from specs, reviewed by gate.

Corkboard note wallcorkboard-note-wall"pin it to a corkboard" — a dense grid of slightly rotated note cards, uneven on purpose. For loose observations that should not look like a tidy list.

Corner-anchored navcorner-anchored-nav"anchor the nav in the corner" — mark top-left, links stacked top-right, a status line bottom-left; no bar, no rule, the page corner does the organising.

Corner glow paircorner-glow-pair"light the two corners" — opposing soft sources. Gives a flat panel a direction without a shape in it.

Corner index framecorner-index-frame"tag the corner with a figure index" — a single frame with a museum-label tab hanging off its top edge.

Corner metacorner-meta"put the meta in the corners" — coordinates, status, index. The frame around the work that says a person set this.

Corner register markscorner-register-marks"put registration marks in the corners" — a print-shop crosshair and four bracket corners. Structure without a single gradient.

corner shapescorner-shapes"cards wear 86" — squircles, scoops, notches, bevels. The anti-default corner language.

costed plan previewcosted-plan-preview"plans render as 143" — the DAF signature artifact: a costed plan with the margin visible, not hidden. In production this reads the live catalog.

countercounter"stats section uses 13" — numbers roll up when they enter the viewport.

Credential ledgercredential-ledger"proof is <n>" — a short ledger of credentials with a seal mark; reach for it when the trust argument is who signed off, not who spoke.

Credential listcredential-list"proof is a credential list" — plain rows of what is verifiable. Reads honest precisely because it is not styled like a boast.

Cross-page morphcross-page-morph"pages morph with 109" — real multi-page navigation where shared elements fly between pages. Zero JS, zero router.

CRT treatmentcrt-treatment"archive footage = 94" — scanlines, barrel curve, rolling band, phosphor flicker. Full broadcast nostalgia.

CSS 3D dioramacss-3d-diorama"tiny world via 166" — a whole room in stacked CSS transforms. Story scenes without a single polygon.

CSS natives packcss-natives-pack"go native with 165" — hover the bars, pop the popover, open the details. Zero JavaScript in any of them.

CSS scroll-driven animationcss-scroll-driven-animation"cheap reveals via 85" — scroll-linked animation with no JS at all. The free-performance version of 14.

custom cursorcustom-cursor"add 02" — dot tracks tight, ring lags behind. Hides itself on touch devices.

day / night roomday-night-room"give it evenings — 233" — one click and the sun hands off to the lamps: every light, color and shadow lerps. Nothing snaps.

deck swipedeck-swipe"browse mode = 73" — swipeable card stack. Lookbooks, product discovery, yes/no curation.

Definition pairdefinition-pair"set the terms as definition pairs" — term and meaning, hung on a rule. For glossaries and explainers.

delivery routedelivery-route"freight visible via 216" — the shipment tracing its route with live position. Calm through visibility.

Delta rowsdelta-rows"show the movement, not just the number" — value plus its change, on hairlines.

depth parallax photodepth-parallax-photo"product shots get 96" — depth-map parallax makes flat photography lean like a hologram.

device signalsdevice-signals"the page adapts via 224" — battery, connection speed, memory, cores: real signals for serving lighter experiences when it matters.

device tier gatedevice-tier-gate"majors degrade with 245" — GPU string + memory + cores pick the tier; the centerpiece falls back to CSS, then to a poster. Never just reduced-motion.

Diagonal band footerdiagonal-band-footer"cut the closer on a diagonal" — an accent-coloured clip-path wedge carries the closing line and CTA above a plain link row.

Diagonal notch captiondiagonal-notch-caption"cut a notch for the caption" — the media panel loses a diagonal corner and the caption sits in exactly the space it gave up.

Diagonal scan linesdiagonal-scan-lines"diagonal scan behind it" — a fine rule texture that drifts. Reads technical without reading retro.

Diagonal split content paneldiagonal-split-content-panel"cut the content on a diagonal" — a clip-path wedge sets one statement apart from the next, without a straight rule down the middle.

Diff summarydiff-summary"summarise the diff" — files changed with added/removed counts. The row every review starts from.

dimension diagramsdimension-diagrams"specs draw with 132" — interactive footprints and clearance zones. Herman-Miller-depth PDPs.

directional hover packdirectional-hover-pack"hovers know direction via 158" — fills that enter where your cursor entered, plus the macOS dock magnify.

displacement hoverdisplacement-hover"gallery images swap with 34" — one image liquefies into another through a noise map. The signature Codrops hover.

dither fielddither-field"background texture = 37" — ordered-dither shading, the retro-print look that's everywhere on 2026 Awwwards.

dot grid repeldot-grid-repel"section background = 70" — a field of dots that flinches away from the cursor and springs back.

Dot matrix fadedot-matrix-fade"dot matrix behind the section" — a quiet texture that gives flat panels somewhere to sit.

dotLottiedotlottie"motion graphics drop in via 236" — After Effects animation playing on a wasm renderer. The designer's tool, Rive's older sibling.

Double hairline with centred dotdouble-hairline-centred-dot"run two hairlines with a dot between" — a quieter seam than one rule, for a break that shouldn't shout.

drag reorder griddrag-reorder-grid"boards reorder via 194" — pick up, hover, drop; neighbors glide aside. Kanban physics.

Drop-cap lededrop-cap-lede"give the opening a drop cap" — the oldest signal that a page was set, not generated.

durable workflow (sim)durable-workflow-sim"jobs survive via 259" — durable execution, the 2026 default for AI pipelines. Simulated here; the real engines wire in from one SDK.

dynamic islanddynamic-island"status lives in 152" — one pill fluidly morphing between states: order placed, shipping, arrived. Watch it cycle.

edge vs region raceedge-vs-region-race"show the wire with 249" — live round-trip times to both runtimes, with the regions they answered from.

education-first priceeducation-first-price"DAF cards use 142" — every price opens its own explanation and links to a lesson. Transparency as the differentiator.

elastic tabselastic-tabs"filters snap with 75" — the highlight pill overshoots and settles like it has mass.

embedding mapembedding-map"the catalog as a galaxy = 197" — items positioned by semantic similarity. Browse by neighborhood, not category.

Empty-state panelempty-state-panel"empty state is <n>" — a dashed-frame panel with a mark, a line of copy, and one action; reach for it wherever a dashboard list has nothing in it yet.

engraving previewengraving-preview"personalize with 124" — live engraving + metal preview with the price following. The +30–50% AOV tool. Type in it.

Enterprise talk-to-us panel beside two tiersenterprise-talk-us-panel-beside"use 505".

Expanding column footerexpanding-column-footer"let a footer column expand on hover" — flex-grow transition widens whichever column the cursor is on; shown here with Work pre-expanded.

exploded assemblyexploded-assembly"the product comes apart with 230" — every component drifts to its exploded position on the slider. Flat-pack honesty as a hero moment.

EyeDroppereyedropper"sample reality via 209" — the native color picker that reaches OUTSIDE the browser. Configurators that match your wall paint.

fabric & finish pickerfabric-finish-picker"PDPs get 118" — the Herman Miller / HAY move: swatches swap material, price and lead time live. Sells the custom order.

Facet shard clusterfacet-shard-cluster"scatter some facets behind it" — five clip-path shards at odd angles, low opacity, like broken glass caught in low light.

FAQ disclosurefaq-disclosure"FAQ as disclosures" — native <details>, no JS, keyboard-accessible for free. The rows animate open on modern browsers.

Feature with thumbsfeature-thumbs"one big, four small" — the product-page arrangement. The thumbs mark the current frame.

Fee transparencyfee-transparency"show the fee openly" — cost, margin and total, stated rather than buried. Education-first pricing.

Figure/label ledgerfigure-label-ledger"stats are <n>" — figures and labels in a two-column ledger; reach for it when you have more rows than a four-up strip can hold.

File-drop zonefile-drop-zone"file drop zone is <n>" — a dashed drop target with an upload glyph and a browse fallback; visual only, wire the real upload yourself.

file savefile-save"deliverables export via 226" — plans, quotes and spec sheets leaving the browser as real files.

Fill sweep buttonfill-sweep-button"secondary buttons are 26" — a color wave rises through the button on hover.

Filmstrip content scrollerfilmstrip-content-scroller"use 544".

Filmstrip with scrub railfilmstrip-scrub-rail"run it as a filmstrip with a scrub rail" — a row of frames over a rail whose marker drifts, visual only, no dragging.

financing calloutfinancing-callout"reframe with 141" — $1,240 becomes $104/mo at the exact hesitation moment. Standard on Burrow, Floyd, and fine jewelry.

Flip card pairflip-card-pair"flip them to reveal a caption" — a real 3D rotateY flip on hover or focus, caption on the back face, no overlay trick.

FLIP shuffleflip-shuffle"filters animate with 43" — items glide to their new positions instead of snapping. Essential for product filtering.

Floating status pillfloating-status-pill"float a status pill" — a small pinned badge with a pulsing dot for save state, connection state, or build state.

floorplan dropperfloorplan-dropper"plan the floor with 238" — clients drop furniture onto their floorplan and watch the budget build. A brief that draws itself.

flow field (2D)flow-field-2d"living background = 83" — particles tracing invisible wind. The most organic ambience per kilobyte.

fluid ink (grid advection, own mini-runtime)fluid-ink-grid-advection-own"hero is 91" — ink that swirls and settles like liquid. (Full GPU Navier-Stokes = the WebGPU upgrade on radar.)

Focus ringfocus-ring"make the focus ring visible" — the accessibility detail almost everyone deletes. Tab into it and see.

Folded index cardfolded-index-card"file it as an index card" — a media frame with a small filed tab above it, like a contact sheet pulled from a drawer.

font flickerfont-flicker"chaos type = 180" — letters cycle through typefaces like a ransom note, then settle. Playful, editorial.

Footer curtainfooter-curtain"site ends with 151" — the page rises off a fixed footer. Half of all award sites end this way; ~10 lines of CSS.

Four-up metric rowfour-up-metric-row"stats are <n>" — four figures in a row, divided by hairlines; reach for it as the default metrics strip above a fold or footer.

Four-up metric rowfour-up-metric-row-2"four numbers on a rule" — hairline-separated figures with unit labels. Replace the placeholders with real figures.

Full-bleed quad bandfull-bleed-quad-band"run four across, full bleed" — no side padding, no gaps, four equal frames butted edge to edge.

Full-bleed statement CTAfull-bleed-statement-cta"give me a statement CTA" — one big claim, full width, a single filled button underneath.

fullscreen menufullscreen-menu"nav opens with 74" — the whole screen becomes the menu, links cascading in. Small sites feel massive.

galaxy generatorgalaxy-generator"cosmos = 155" — a parameterized spiral galaxy you can reshape live. The most-loved demo in the three.js world.

gallery expand (FLIP)gallery-expand-flip"gallery breathes with 237" — a thumbnail FLIPs into the full frame and back, siblings hold their ground, backdrop blurs.

Gaussian splats (Spark)gaussian-splats-spark"products become 174" — phone-captured photoreal 3D with true view-dependent light. The WB endgame for product pages.

generative art seedgenerative-art-seed"backgrounds are 104" — algorithmic one-of-ones; every visitor (or product) gets art nobody else has.

generative imagerygenerative-imagery"staging pipeline = 52" — product shots re-staged into lifestyle scenes at scale. Passes the 4K bar or doesn't ship.

generative UIgenerative-ui"chat answers as 107" — the assistant replies with real product cards, not paragraphs. Upgrade path for 50 + 103.

Generic logo wallgeneric-logo-wall"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.

gift finder quizgift-finder-quiz"gifting funnel = 103" — 3 taps → curated picks. The single best documented ROI in jewelry e-comm (+64% gift conversion).

gift wrapgift-wrap"gifting closes with 210" — wrap, ribbon and a handwritten note preview. AOV up, returns down.

glass transmissionglass-transmission"hero object in 28" — real refractive glass with chromatic dispersion. The Lusion look.

glitch burstglitch-burst"transitions spike with 36" — RGB split + slice tearing in short bursts. Aggressive; use in moments, not constantly.

god raysgod-rays"light shafts via 190" — volumetric beams raking through the scene. Cathedral mood on demand.

gooey cursor trailgooey-cursor-trail"cursor drips with 97" — a liquid blob chases the pointer and melts away.

gooey metaballsgooey-metaballs"blobby accents = 39" — shapes that merge like liquid when they touch. Organic, playful.

Gradient fade-out bandgradient-fade-out-band"fade the section out" — content dissolves into the page background before the next act starts clean.

Gradient-filled wordgradient-filled-word"fill one word with the gradient" — background-clip:text on a single word inside a plain sentence, built from the two accent tokens.

gradient mesh driftgradient-mesh-drift"background = 06" — slow drifting color field behind content. Calm, expensive-feeling ambience.

grain togglegrain-toggle"keep 05 on everything" — animated noise at ~6% opacity. The cheapest way to kill the "flat digital" look.

gravity lettersgravity-letters"404 page does 66" — the headline lets go, bounces on the floor, reassembles. Personality in one click.

Hairline grid fieldhairline-grid-field"put the hairline grid behind it" — a drafting-table grid that reads as structure, not decoration.

Hairline quad gridhairline-quad-grid"four up on hairlines" — a 2×2 grid divided by rules, not gaps. Swap the gradient cells for real imagery.

Halftone ditherhalftone-dither"dither it like halftone" — two dot grids at different scales, each masked to its own corner, so density itself does the shading.

hand-drawn annotationshand-drawn-annotations"mark it up with 181" — marker circles and underlines that draw themselves. Human warmth on digital pages.

Hanging-indent paragraph sethanging-indent-paragraph-set"set it with a hanging indent" — numbered lines whose wrapped text tucks under the mark, a citation-list rhythm.

Hanging punctuation quotehanging-punctuation-quote"hang the quote mark" — the opening quotation mark sits outside the text block instead of eating into the first line.

:has() magichas-magic"forms self-aware via 203" — parents styled by their children's state. The selector that changed CSS architecture.

Headline with footnote annotationheadline-footnote-annotation"put a footnote mark on the headline" — a superscript reference and its note, the kind of detail that reads as set, not generated.

Hero figurehero-figure"one number, enormous" — a single figure carrying the whole section, with a delta chip. Use it when one number IS the story.

Hero number with captionhero-number-caption"stats are <n>" — one number filling the space, a caption underneath; reach for it when a single figure is the entire argument.

Hex clusterhex-cluster"cluster them as hexagons" — three clip-path hexagons interlocked like a honeycomb, instead of another rectangle grid.

hold to confirmhold-confirm"destructive actions use 188" — press and hold; the ring fills; letting go cancels. Friction exactly where it belongs.

hologram fresnelhologram-fresnel"accent object = 30" — fresnel edge-glow with scanlines. Sci-fi, restrained.

Horizon curtain footerhorizon-curtain-footer"end on a horizon" — the sign-off line sinks into a glowing line at the base, like the page is setting.

Horizon glowhorizon-glow"horizon glow under the fold" — a single light source at the base. The cheapest way to stop a black section reading as empty.

Horizontal bar comparisonhorizontal-bar-comparison"stats are <n>" — three horizontal bars with one emphasised; reach for it when the story is relative size, not absolute figures.

horizontal scrollhorizontal-scroll"collection browses with 17".

hover preview rowshover-preview-rows"indexes preview via 184" — list rows that play a live preview only while hovered. Agency-index energy.

Hover-reveal captionhover-reveal-caption"captions arrive on hover" — the frame stays clean until someone looks closer.

icon morphsicon-morphs"icons transform via 187" — play becomes pause, plus becomes close, hearts pop full. Click each.

Icon railicon-rail"icon rail nav" — a compact vertical stack of icon-only buttons with a current-page marker; reach for it when space is tight and labels can go in a tooltip instead.

idempotency (sim)idempotency-sim"charge once via 261" — the same spam of clicks, with and without an idempotency key. Why nobody gets billed twice.

idle attractidle-attract"the site performs 175" — when the visitor goes still, the page starts a self-running show. Museum-mode; any movement hands control back.

image trailimage-trail"gallery hero uses 24" — images bloom along the cursor's path and melt away.

image tubeimage-tube"collection flythrough = 100" — a tunnel of imagery you travel through. Peak lookbook energy.

Index-card heroindex-card-hero"open like an index card" — title, ref, and three meta rows. Archival rather than promotional.

Index dot scrollspy navindex-dot-scrollspy-nav"index the sections as dots" — numbered dot pagination on a connecting line, current section enlarged; a horizontal alternative to a side anchor list.

Indexed footerindexed-footer"index the footer" — numbered link groups. Reads like the back of a book rather than a sitemap dump.

inertia drag sliderinertia-drag-slider"collection slider is 42" — flick it and it glides with momentum, rubber-bands at the ends.

infinite drag fieldinfinite-drag-field"explore mode = 98" — the page as an endless desk you pan across. Moodboards, archives, collections.

infinite loop scrollinfinite-loop-scroll"the page wraps via 183" — no top, no bottom. Collections and showreels as a loop.

infinite tunnelinfinite-tunnel"intro flies through 79" — endless forward motion through recycling geometry. Openers and 404s.

Inline-field CTAinline-field-cta"one field and go" — a single input with the submit sitting inside it. The lowest-friction ask there is.

Inline form CTAinline-form-cta"CTA with one field" — a heading over a pill-shaped email capture, button built into the field.

Inline-label rowsinline-label-rows"labels on the same line" — a dense form that still reads. For settings and short intakes.

Inline mention lineinline-mention-line"mention it inline" — proof folded into a sentence rather than boxed out. The least salesy form there is.

Inset corner seaminset-corner-seam"notch the corner" — the next panel steps in from one edge. A seam with a direction.

instanced swarminstanced-swarm"background depth = 33" — hundreds of objects in one draw call, orbiting as a school.

intake validationintake-inbox"the form is alive — 250" — a real transactional email pipeline. The difference between a brochure and a business.

integration wallintegration-wall"ecosystem via 138" — the filterable logo wall. Instant credibility for Nimos or any platform surface.

iridescent metaliridescent-metal"product finish like 29" — oil-slick thin-film sheen shifting as it turns.

iris seamiris-seam"close the act with 247" — a clip-path iris scrubbed by scroll, centered on the pointer. A seam that feels aimed at you.

jelly blobjelly-blob"products wobble via 200" — a mesh with spring physics: poke it and it jiggles like it has mass.

Justified two-column textjustified-two-column-text"set the body in two justified columns" — a magazine-style column split with a hairline rule between them.

JWT anatomy (real WebCrypto)jwt-anatomy-real-webcrypto"sessions decoded via 263" — the token every API checks, taken apart live: tamper with any part and verification fails.

Keyboard hint barkeyboard-hint-bar"add a keyboard hint bar" — a search trigger with a kbd-styled shortcut badge, ⌘K, sitting at the end.

kinetic 3D typekinetic-3d-type"words orbit with 162" — typography as geometry: text wrapped on a rotating drum. The image tube's louder sibling.

Labelled rule seamlabelled-rule-seam"divide the acts with a labelled rule" — names the next act, which is what stops a long page feeling lost.

Lead and deklead-dek"set a lead and a dek" — the newspaper pairing: a heavy line, then a lighter one that carries the detail.

lead-time boardlead-time-board"availability = 122" — live stock and lead-time status per line. In production this reads supplier feeds through Nimos.

Learn hublearn-hub"/learn is 148" — the education-first spine: every price on the site links into one of these.

Lede with rulelede-rule"open the section with the lede" — eyebrow, rule, oversized opening paragraph. The editorial entry point.

Legal status barlegal-status-bar"just a legal bar" — one thin row: copyright and terms on one side, a status dot on the other.

Lenis + ScrollTrigger bridgelenis-scrolltrigger-bridge"the whole site scrolls like 01" — inertia + eased wheel. Non-negotiable base layer.

Let's-talk closerlet-s-talk-closer"end the page on a big let's-talk" — the type does the selling; one line, one link, one accent word.

Lifeware cardlifeware-card"Lifeware presents as 145" — the one-time framing is the product. The card leads with it.

line maskline-mask"paragraphs use 08" — quieter than 07. Editorial, Studio-Freight energy.

link image previewlink-image-preview"index list gets 64" — hovering a link floats its image along the cursor. Editorial index pages love this.

Link rolllink-roll"nav links roll with 25" — text flips to an accent copy of itself on hover.

liquid glassliquid-glass"nav wears glass — 229" — the 2026 Apple material: near-clear center, heavy refraction at the rim, specular top edge. Pure CSS.

live guestbooklive-guestbook"visitors persist via 251" — a real Postgres table behind RLS policies. State that survives the tab.

live presencelive-presence"add 105" — other shoppers visible as ghost cursors + live counts. Social proof you can feel. (Supabase Realtime in production.)

live presence (Supabase Realtime)live-presence-supabase-realtime"the room breathes with 252" — websocket presence: who's here right now, joining and leaving live.

Living text fillliving-text-fill"masthead = 89" — huge letters filled with a moving color field (or video, in production). One CSS property.

LYGIA shaderslygia-shaders"use 114's library" — this noise field is built from LYGIA's shader functions, fetched and resolved live. Hundreds of ready shader parts for E/F/K work.

Magic-link sign-inmagic-link-sign"sign-in is a magic link" — one field, no password. The visual only; wire it to your own auth.

Magic-link splitmagic-link-split"magic-link split" — copy on one side, a single email field on the other, no password field at all; reach for it for a lower-friction, passwordless entry point.

magneticmagnetic"all CTAs are 22" — buttons pull toward the cursor, then elastic-snap back. Bonhomme signature.

margin what-ifmargin-what-if"teach the 20% via 219" — a slider showing what different margins would do to service quality. Radical transparency as a lesson.

Marked phrase, gradient underlinemarked-phrase-gradient-underline"mark a phrase in the text" — one phrase gets a gradient underline instead of a full highlight box.

Marker underlinemarker-underline"mark the phrase" — a hand-drawn-feeling underline under the words that matter.

Marquee alert bar navmarquee-alert-bar-nav"put a scrolling alert above the nav" — a thin ticker strip carries one line of status, the plain link row sits underneath it.

Marquee band heromarquee-band-hero"run the title as a band" — the headline itself travels. Loud, and it earns the noise by being the only motion.

Marquee-edge footermarquee-edge-footer"footer rides a marquee" — a slow ticker strip seals the page, compact bar underneath.

Marquee loop rowmarquee-loop-row"run it as a marquee" — small frames scrolling in an unbroken loop, the set duplicated once so the seam never shows.

Masonry three-columnmasonry-three-column"masonry it three across" — native CSS columns, uneven heights, no JS layout pass.

Media card with duration pillmedia-card-duration-pill"media card is <n>" — a thumbnail card with a duration pill and a hairline under the title; reach for it in a video or course listing.

Media chapter listmedia-chapter-list"chapter the video" — timestamps beside titles. Turns a long recording into something navigable.

Mega-menu columnsmega-menu-columns"open a mega menu" — grouped columns with a featured cell. What a real catalogue navigation looks like.

the menu's MCP servermenu-s-mcp-server"agents shop the menu — 258" — 2026's rule: without an MCP surface your systems are invisible to AI. The catalog serves humans AND agents.

Minimal sign-off footerminimal-sign-off-footer"close it out with a minimal sign-off" — a hairline rule, a wordmark, three links, nothing competing for attention.

mirror floormirror-floor"showroom floor = 201" — the product doubled in a soft reflection. Instant premium staging.

Mixed orientation pairmixed-orientation-pair"pair a portrait with a landscape" — deliberately different aspect ratios sitting on the same baseline.

Mono label / display pairingmono-label-display-pairing"pair a mono label with a display line" — a small uppercase eyebrow over a large display headline, the standard editorial stack.

moodboard composermoodboard-composer"clients play with 120" — shop-the-room in reverse: visitors compose their space from your catalog. Engagement that converts to carts.

morphing blobmorphing-blob"living shape = 32" — organic vertex-displaced form, endlessly breathing.

native carouselnative-carousel"sliders = 87" — browser-native snap carousel, momentum and physics included. Drag/swipe it.

New device sign-in approvalnew-device-sign-approval"device approval is <n>" — a new-sign-in card with device rows and Approve/Deny; the visual only, wire it to your own session security.

Newsletter inline footernewsletter-inline-footer"footer needs a signup field" — copy on top, an underline-style email field with no visible box, in keeping with the rest of the page.

no false floorsno-false-floors"no dead ends — 243" — NN/g's false-floor fix: if a section ever looks finished, people stop. Cut-off type + peek + idle nudge.

Noise washnoise-wash"wash it with noise" — an SVG turbulence grain over a gradient. The thing that stops flat colour looking cheap.

Numbered act markernumbered-act-marker"mark the act on the rule" — a numbered pill (02 / 07) riding an otherwise plain hairline, placed off-centre.

Numbered chapter headingnumbered-chapter-heading"give it a chapter number" — a big set numeral, a kicker, and the title, the way a printed section opener reads.

Numbered pull statementnumbered-pull-statement"pull a numbered statement" — an oversized index numeral beside a short claim, the editorial way to call out one idea.

Numbered quote pairnumbered-quote-pair"two numbered quotes" — indexed like footnotes. Reads as record rather than marketing.

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

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

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

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

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

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

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

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

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

Outline → fill hoveroutline-fill-hover"big nav words are 12" — hollow stroke type that floods with color on hover.

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

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

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

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

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

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

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

particles form textparticles-form-text"logo assembles with 41" — a thousand particles scatter and reform your wordmark.

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

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

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

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

Picture-in-picture overlaypicture-picture-overlay"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.

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

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

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

points globe (2D)points-globe-2d"global reach = 81" — a rotating sphere of dots. Shipping maps, presence, network stories.

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

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

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

Print headerprint-header"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 motion loopproduct-motion-loop"pieces move with 126" — 6-second light-play loops on PDPs. +15–25% documented buy lift over $200.

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

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

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

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

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

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

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

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

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

Pull-quote with rulepull-quote-rule"proof is one pull quote" — oversized quote, hairline, attribution. One strong quote beats a wall of three.

Pull quote with rulepull-quote-rule-2"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.

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

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

queue backpressure (sim)queue-backpressure-sim"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 text-link CTAquiet-text-link-cta"quiet CTA to close an article" — a hairline, a soft line of copy, one understated arrow link.

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

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

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

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

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

Rating scale input rowrating-scale-input-row"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.

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

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

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

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

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

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

reveal on scrollreveal-scroll"default entrance = 14" — the workhorse. Everything that doesn't have a fancier entrance gets this.

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

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

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

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

ripple on clickripple-click"hero reacts with 35" — clicks send water rings warping through the surface.

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

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

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

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

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

same-doc View Transitionsame-doc-view-transition"variants swap via 244" — document.startViewTransition morphs any DOM change natively. The atelier's variant switcher runs on this.

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

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

scene blend (render targets)scene-blend-render-targets"acts dissolve through 242" — both scenes render to textures; a noisy edge blends them. How award pipelines hand one world to the next.

scramblescramble"labels decode with 09" — glyph noise resolves into words. Tech/lab flavor; use sparingly.

Scroll cuescroll-cue"add the scroll cue" — a travelling dot on a hairline. NN/g: every act needs a visible continuation cue or it reads as the end.

scroll-driven 3Dscroll-driven-3d"showcase spins with 31" — the object's rotation is welded to your scrollbar. Scroll up and down over this card.

scroll-scrub canvasscroll-scrub-canvas"product assembles with 48" — a frame sequence scrubbed by scroll. The Apple AirPods technique (in production: rendered image frames).

Scrub bar with chapter marksscrub-bar-chapter-marks"show the scrub marks" — a play frame over a progress rail with tick marks at the chapter breaks and a thumb sitting mid-scrub.

SDF 3D type (troika)sdf-3d-type-troika"type is geometry — 235" — crisp signed-distance-field text in WebGL, sharp at any zoom. Type your own headline into the scene.

search by vibesearch-by-vibe"search is 51" — semantic search: "something my mother would wear to a wedding" returns the right products, not keyword misses.

Search field with filter chipssearch-field-filter-chips"search with chips is <n>" — a search field with a row of togglable filter chips underneath; reach for it on any listing or catalog page.

Section countersection-counter"count the sections" — current over total, fixed in a corner. Orientation is what stops a page feeling endless.

Segmented choice pickersegmented-choice-picker"segmented picker is <n>" — a pill-shaped radio group that reads as one control; reach for it instead of a dropdown when there are 2-4 real choices.

Selection & scrollbarselection-amp-scrollbar"brand the chrome with 178" — selection color + scrollbar styling. The cheapest polish nobody skips on award sites.

sequence scrubsequence-scrub"launch page = 108" — the true Apple mechanism: a rendered frame sequence scrubbed by scroll. In production the frames come from the desktop GPU render rig.

server-drawn imageserver-drawn-image"links unfurl via 257" — a function draws the social card on demand: one endpoint, infinite personalized images.

server-sent streamserver-sent-stream"progress streams via 248" — Server-Sent Events from a live function. The primitive under every AI typing effect and build log.

service lifecycleservice-lifecycle"services read as 144" — design through decommission as one continuum. Clients see the whole relationship, not a transaction.

shader fogshader-fog"atmosphere behind hero = 40" — slow procedural smoke. Deeper than 06, cheaper than 27.

shape morphshape-morph"brand mark breathes with 45" — vector shapes flow between forms. Logos, icons, section dividers.

Share split barshare-split-bar"split one bar by share" — proportions in a single rule, legend underneath. Clearer than a pie, always.

shared-element handoffshared-element-handoff"carry it across via 241" — one element persists through the seam, scrubbed and reversible. The single-continuous-surface trick.

Sheen sweepsheen-sweep"pass a sheen through it" — one hard-edged band of light crossing the panel on a loop, like brushed metal catching a window.

shimmer resolveshimmer-resolve"answers resolve via 196" — skeleton shimmer crystallizing into words, line by line. How 2026 AI products feel fast.

Shine sweep textshine-sweep-text"metallic type = 62" — a light band sweeps through the letters forever. Zero JS.

shop the roomshop-room"editorial sells with 135" — tap the pulsing dots inside the scene. Photography becomes a storefront.

showroom walkthroughshowroom-walkthrough"walk the room via 232" — a camera on a spline path through a furnished interior, scrubbed by scroll. The Igloo Inc. archetype.

Side page indexside-page-index"add a side page index" — a vertical rail of dots and labels down the edge, the active section shown larger and lit.

Sign-in cardsign-card"sign-in card" — an email-and-password card with generous spacing and a quiet accent on focus; the default when a client just needs a login screen.

Sign-off rule footersign-off-rule-footer"close it with the sign-off rule" — hairline, wordmark, links, a live status dot. The quietest possible ending.

Sitemap footersitemap-footer"full sitemap footer" — grouped column links over a legal bar. The one every real site eventually needs.

sizing toolsizing-tool"sizing = 125" — calibrate against a bank card, then sizes render at TRUE physical scale. The returns-killer.

skeleton shimmer loopskeleton-shimmer-loop"loading states use 77" — content shape shimmers before data lands. This one loads on a loop.

slime mold (Physarum)slime-mold-physarum"living veins = 160" — thousands of agents finding paths like Physarum. Organic infrastructure, growing live.

snap chapterssnap-chapters"story mode = 90" — full-frame chapters with position dots. Decks, manifestos, product tours.

Snap stripsnap-strip"browse it as a snap strip" — native CSS scroll-snap, no carousel library, works with a trackpad and a thumb.

sound design layersound-design-layer"the site hums with 169" — the missing sensory channel (~70% of award winners ship audio). Off by default, always.

Span-cell gridspan-cell-grid"let one cell span two columns" — a three-column grid where a single frame breaks the rhythm on purpose.

Sparkline rowsparkline-row"stats are <n>" — a figure with its own trend line inline; reach for it when the shape of the number matters as much as the number.

spec comparisonspec-comparison"compare with 121" — side-by-side specs where the differences light up. Kills choice paralysis at the decision moment.

Spec ledgerspec-ledger"spec it as a ledger" — label/value rows on hairlines. What a datasheet looks like when someone cared.

spec sheetspec-sheet"submittals via 129" — branded spec sheets generated on the spot, print-ready. Non-negotiable in contract furniture.

speculation rules badgespeculation-rules-badge"instant nav via 168" — one script tag in the head. The cheapest expensive-feeling upgrade on the entire menu.

speech inputspeech-input"voice input via 208" — hold the button, speak, watch it transcribe. The input side of 55.

Split CTAsplit-cta"split the ask" — copy on the left, the action on the right, hairline between. Reads as calm, converts like a banner.

Split CTAsplit-cta-2"split the CTA" — copy on the left, a divider, the button stack on the right.

split-flap boardsplit-flap-board"departures via 153" — Solari-board mechanics for headlines, stats, drop announcements.

Split media and captionsplit-media-caption"media left, caption right" — the editorial pairing, with the caption doing real work.

spotlight revealspotlight-reveal"secret layer via 68" — content only visible inside a torch beam that follows the cursor.

SQL in the browsersql-browser"172 powers the dashboards" — real SQLite compiled to WASM. Edit the query — it's live.

Stacked brief intake formstacked-brief-intake-form"intake form is <n>" — a vertically stacked brief form with a full-width textarea; reach for it when the ask is open-ended and needs room to write.

stacking cardsstacking-cards"services/features section = 18".

stagger playgroundstagger-playground"waves ripple from 195" — the same grid, four different stagger origins. Choreography vocabulary in one card.

Stair-step rowstair-step-row"step them down like stairs" — four frames in a plain flex row, each one sitting a little lower than the last. No overlap, no rotation.

starfield warp (2D)starfield-warp-2d"loading jump = 80" — stars streak past at warp. Cheap, hypnotic, works everywhere.

Statement CTAstatement-cta"the ask is a statement" — one full-bleed line and an arrow link. No box, no button, no noise.

Stepped edge seamstepped-edge-seam"step the seam" — a stacked, stepped edge between two backgrounds instead of a straight line, like a ticket stub.

Stepped seamstepped-seam"step down into the next act" — a staircase edge. Geometry instead of a straight line.

Sticky CTA barsticky-cta-bar"give me a sticky CTA bar" — a floating pill with copy and a button, shadowed like it's sitting above the page.

sticky-statesticky-state"headers know via 202" — the bar restyles itself the moment it sticks. Zero JS where supported; scroll the box.

Stitched rulestitched-rule"stitch the seam" — a dashed rule with a solid centre run. Reads bound rather than cut.

stone comparerstone-comparer"stones explain via 213" — cut, clarity and glow compared visually, not in a spec table.

stroke-fill scrubstroke-fill-scrub"headlines flood with 179" — hollow type filling as you scroll past. The SOTD hero staple.

Stroke headlinestroke-headline"outline the headline, fill one word" — hollow display type with a single solid word carrying the emphasis.

stylized waterstylized-water"product floats on 110" — a living water surface with sun glint and moving light. Campaign-hero material.

Subtitle track barsubtitle-track-bar"give it a caption track" — a solid subtitle plate fixed under the frame with a CC chip and a timecode, not a scrim over the image.

supplier scorecardsupplier-scorecard"suppliers ranked via 220" — lead-time reliability, QC pass rate, freight damage — the vetting made visible.

SVG line drawsvg-line-draw"underline/diagram draws with 44" — strokes draw themselves as you scroll. Scroll up and down over this card.

SVG organicssvg-organics"blobs breathe with 157" — living shapes from SVG filter chemistry alone. No canvas, no WebGL.

Sweeping rule seamsweeping-rule-seam"sweep a rule between acts" — a light travels the divider once. A seam you notice only if you look for it.

sync engine (sim)sync-engine-sim"it feels local via 260" — optimistic writes, server reconciliation, offline queue that flushes. The Linear feel, the 2026 category.

Tab bar with sliding filltab-bar-sliding-fill"sliding tab bar" — a filled tab background that glides between sections on hover or focus; reach for it for a secondary nav under a page header.

Tabbed content switchtabbed-content-switch"switch the content in tabs" — real radio inputs and :has(), no JS, so one panel of copy replaces another on click. For overview/specs/notes style content.

Tabbed footer panelstabbed-footer-panels"give the footer its own tabs" — radio inputs and :has() switch between Contact, Sitemap and Legal without leaving the footer.

Tag and keyword chip inputtag-keyword-chip-input"tag input is <n>" — removable keyword chips with a trailing text field; reach for it wherever someone builds a list of their own terms.

terrain flyoverterrain-flyover"cruise over 198" — endless procedural landscape sliding under the camera, fog to the horizon.

text dissolvetext-dissolve"words exit with 92" — type disintegrates into wind-blown particles and re-forms. Watch the loop.

text on a pathtext-path"caption rides 59" — words travel along a drawn curve as you scroll. Scroll up and down over this card.

text-wrap toggletext-wrap-toggle"headlines breathe via 205" — text-wrap: balance kills orphan words. The cheapest typography tell of a cared-for site.

theme fliptheme-flip"theme switch = 78" — the new theme floods outward in a circle from the toggle. No hard swap.

Theme switcher pill rowtheme-switcher-pill-row"add a theme switcher pill" — three icon options in a segmented pill with a sliding accent behind the active one.

Three-tier pricing rowthree-tier-pricing-row"use 365".

Three-up quote gridthree-up-quote-grid"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.

Ticker strip footerticker-strip-footer"footer with a ticker strip" — a clipped, oversized headline band above a plain nav row; static, not scrolling — the type carries the motion cue.

tilt cardtilt-card"product cards get 23" — perspective tilt following the cursor, with a moving light sheen.

Timeline railtimeline-rail"run it down a timeline rail" — dated entries on a vertical line. History, roadmap, or process.

toast stacktoast-stack"notifications = 76" — events slide in, stack, and excuse themselves. Cart adds, saves, agent updates.

Tone-shift band seamtone-shift-band-seam"shift the tone at the seam" — the section background itself changes across the band, not just a rule.

Topographic ringstopographic-rings"topographic rings behind it" — concentric contours, like a survey map. Depth without a single image.

Torn-edge footertorn-edge-footer"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.

Torn-edge striptorn-edge-strip"tear the edges where they overlap" — a zigzag clip-path on the trailing edge of each frame, like torn perforated sheets fanned out.

trade portal gatetrade-portal-gate"trade gate = 130" — the login wall that unlocks dealer pricing. Commitment signal in, repeat business out.

Two-column with margin notetwo-column-margin-note"body copy with a margin note" — the printed-page move: a narrow annotation column beside the text.

Two-factor code entrytwo-factor-code-entry"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.

Two-path CTAtwo-path-cta"give them two doors" — ready now versus not yet. Both are a yes; only one is a purchase.

Two-size stacked lockuptwo-size-stacked-lockup"stack a huge word over a tiny one" — a display-size word with a mono caption underneath, the ratio doing the hierarchy.

Two-tone split footertwo-tone-split-footer"split the footer in two tones" — a contact half and a legal half, divided by a rule.

Two-up content cardstwo-up-content-cards"use 410".

typewritertypewriter"tagline types with 60" — writes, pauses, deletes, rewrites. Simple and endlessly watchable.

UGC wallugc-wall"worn by real people = 212" — the as-seen-on wall, hover to see who. Social proof as texture.

Underline-slide navunderline-slide-nav"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.

upholstery touchupholstery-touch"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-tier ladderusage-tier-ladder"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.

variable-font proximityvariable-font-proximity"headline breathes with 57" — letter weight swells near the cursor. Needs a variable font; Inter is already loaded.

Variant swatch pickervariant-swatch-picker"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.

velocity aberrationvelocity-aberration"speed splits color via 193" — RGB channels separate with scroll velocity and snap back at rest.

velocity-adaptive seamvelocity-adaptive-seam"seams breathe with 240" — rush and the transition cuts short; linger and it plays full. Juries score this pacing explicitly.

velocity image bendvelocity-image-bend"galleries bend with 150" — THE Awwwards gallery signature: imagery that curves with scroll inertia and settles flat.

velocity marqueevelocity-marquee"use 11".

velocity skewvelocity-skew"type leans with 49" — text shears with your scroll speed and settles when you stop. Pure feel.

Verification code entryverification-code-entry"code entry is boxed" — six separated digits with a focus ring. The step everyone builds badly.

Vertical frame with action railvertical-frame-action-rail"give it a vertical frame and a rail" — a tall 9:16 media panel with stacked counters beside it, the short-form clip layout.

Vertical label beside headlinevertical-label-beside-headline"run a vertical tag beside the headline" — a rotated writing-mode label doing the job a kicker usually does, without eating a line.

Vertical rail stripvertical-rail-strip"index them down a rail" — frames stacked vertically off a single connecting line, each one marked by a dot rather than a number.

VFX-JSvfx-js"treat sections with 113" — drop-in WebGL effects on ordinary DOM elements, no shader writing. Section F powers, applied site-wide in minutes.

View Transitionsview-transitions"grid-to-detail morphs with 47" — click a tile: the browser itself morphs it into the featured slot. Zero-library page transitions.

Vignette framevignette-frame"frame it with a vignette" — an inset hairline and a soft darkened edge. Makes any panel feel deliberate.

virtual scroll stagevirtual-scroll-stage"own the scroll via 246" — wheel and touch feed a virtual value; everything eases toward it. How ZERO-class narratives are driven.

voice interfacevoice-interface"add 55" — spoken answers and voice-driven browsing. This demo really speaks — the button uses your browser's own voice engine.

volume pricingvolume-pricing"tiers shown via 134" — buyers watch themselves unlock the next discount. Self-qualification without a sales call.

voronoi shattervoronoi-shatter"transitions break with 159" — imagery fractures into shards from your click point, then heals.

warranty flowwarranty-flow"claims resolve via 217" — photo, issue, resolution path in three taps. Service as a product feature.

wave textwave-text"playful accent = 65" — letters ride a standing wave. Loaders, empty states, footers.

Web Shareweb-share"sharing native via 223" — the OS share sheet, not a row of social icons. One API call.

webcam ring try-on (MediaPipe)webcam-ring-try-mediapipe"try-on = 173" — the census's #1 boutique conversion item: a ring rendered on your actual finger, live, in-browser.

WebGPU compute particles (TSL)webgpu-compute-particles-tsl"a hundred-thousand-particle budget: 234" — position and velocity never leave the GPU. TSL compute shaders, the 2026 differentiator.

webhook signatureswebhook-signatures"trust the hooks via 255" — payload signed client-side, verified server-side; flip one byte and watch it get rejected.

Weighted clause lineweighted-clause-line"weight one clause, not the size" — a single sentence where the emphasis clause jumps in font-weight, not size, so the page stays quiet.

What changes by tierwhat-changes-by-tier"show only what CHANGES between tiers" — the rows that are identical are noise. Cut them.

Wide letter-spaced label rowwide-letter-spaced-label-row"spread the labels edge to edge" — a bordered row of words at maximum letter-spacing, justified to the full width.

wireframe buildwireframe-build"product constructs via 82" — the mesh draws itself into existence as you scroll.

wishlist burstwishlist-burst"saves feel good via 211" — the heart pops with particles. Dopamine at the save moment.

word rotatorword-rotator"hero line rotates with 63" — one slot in the sentence flips through your value props.

word scrubword-scrub"manifesto paragraph gets 10".

worker renderingworker-rendering"heavy charts via 225" — rendering moved off the main thread entirely. Dashboards that never stutter.

zoom portalzoom-portal"chapters dive via 161" — scroll zooms INTO the image until it becomes the next section. The Apple transition.

zoom settlezoom-settle"gallery images use 20" — image starts oversized and settles to 1:1 as it scrolls through view.

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information