# THE MOTION MENU — build kit for any AI

You are being handed a **working pattern library for premium websites**: 596 numbered,
production-tested motion/3D/backend patterns, every one of them live and runnable. This
document is the whole interface. You do not need a plugin, a connector, or a filesystem.

## How to use it

1. The person will name patterns **by number** — "hero gets 27 + 07", "add 84", "use 149" —
   or a whole **section by letter** — "all of section J". The section map (letter → exact
   number list) is in the index below and at `https://motion-menu-two.vercel.app/p/sections.md`. Sections are
   NON-contiguous; use the exact lists, never a range guess.
2. **Fetch the code for that number**: `https://motion-menu-two.vercel.app/p/<number>.md`
   → e.g. `https://motion-menu-two.vercel.app/p/84.md` returns pattern 84's HTML + CSS + JS, ready to transplant.
   (If you cannot browse, ask the person to paste that URL's contents.)
3. Every page also needs the runtime spine once: `https://motion-menu-two.vercel.app/p/runtime.md`
4. Full index (all 596 numbers + titles) is at the bottom of this document, and at
   `https://motion-menu-two.vercel.app/p/index.md`. Live, searchable demo: https://motion-menu-two.vercel.app (⌘K).

## The laws — these are not style preferences, they are the difference between
## an award-level page and AI slop. Do not relax them.

- **Full-width.** No traditional centered-container layouts. Content meets the edges.
- **One motion physics per page.** Every element obeys the same inertia, easing and lerp
  family. Mixed physics is the single loudest "made by a template" tell.
- **Out of view = destroyed.** Off-screen work is not paused, it is torn down and rebuilt
  on approach. This is what keeps a heavy page at 60fps. The runtime enforces it.
- **Keep the constants.** Easing curves, durations, lerp factors, shader values ARE the
  taste. Adapt selectors and copy; never "improve" the physics.
- **Centerpieces are working tools, not decorations** — a configurator, a floorplan
  dropper, a spec sheet. Something the visitor operates.
- **Real assets only.** Procedural placeholder art is a stand-in for development. Ship real
  photography/renders. Never fabricate a client, a project, or a track record.
- **Transitions should not be recognizable as transitions.** Seams (section AC, 240–247,
  plus 161/90/04/93) play over the swap so one scene becomes another.

## DESIGN DIGEST — the anti-slop contract

Motion Menu is a design-intelligence layer, not a snippet vending machine. The default
agent flow is **intent → digest → act map → theme → compatibility validation → extracted
code → implementation → browser QA → version record**. If a consumer skips that order, its
output is an unverified implementation candidate, never a finished Motion Menu result.

Before composing, call `get_kit`, `check_updates`, `list_themes`, `build_page`, then
`validate_combination`. Refuse to proceed without a real brand intent, primary user action,
responsive plan, reduced-motion plan, and truthful content. Name acts by product meaning;
do not invent a generic numbered `01 / 02 / 03 / 04` story cadence.

The hard gates are: 5–7 acts, 2–4 patterns per act, 12–18 viewport-heights, no pattern more
than twice, exactly one heavy spectacle, and a loud/quiet density wave. Never stack one
pattern per section, use a centered SaaS container by default, leak Motion Menu chrome into
the client site, or fill the page with “features / benefits / solution / scale” language.

Every output must preserve the extracted physics constants, destroy off-screen heavy work,
keep the primary copy readable before animation, provide a real working centerpiece, and
ship a reduced-motion state with no heavy download. Desktop and mobile must be composed
deliberately: no overflow, no clipped primary action, keyboard focus, and 44px touch targets.

Run the full verification contract before calling a build done: typecheck, lint, format,
desktop/mobile screenshots, alignment measurement, reduced-motion pass, console-error pass,
fast-scroll lifecycle pass, accessibility audit, and cold anonymous route checks. Record the
Motion Menu manifest version beside generated code. The machine-readable contract is
`https://motion-menu-two.vercel.app/p/design-digest.json`.

## The stack (pinned — these versions are tested together)

`three@0.170.0` · `gsap@3.13.0` (ScrollTrigger, Flip, SplitText, ScrambleText, MorphSVG,
Observer, MotionPath — all free) · `lenis@1.3.17`

Known gotchas, all learned the hard way:
- Lenis 1.3 overrides `window.scrollTo` → programmatic scroll must use `lenis.scrollTo(y, {immediate:true})`.
- A GLSL uniform used in both shader stages needs matching precision (use `highp` in the fragment).
- SplitText cannot measure `display:none` content — initialize it after the element is visible.
- Browsers cap ~15 live WebGL contexts per page → use the create-on-approach / destroy-on-exit lifecycle.
- Honor `prefers-reduced-motion`: kill Lenis, collapse timelines.

## COMPOSING PAGES — assemble a full page from numbers

Ask the MCP server (`POST https://motion-menu-two.vercel.app/api/mcp`) — `compose_page` builds a complete standalone page
from any of the 596 patterns plus a theme, with optional per-section text swaps;
`recommend_patterns` picks from intent and `validate_combination` sanity-checks a set first.
Machine assets, useful to any agent composing by hand: `https://motion-menu-two.vercel.app/p/<n>.json`
({html, css, js, chrome} per pattern), `https://motion-menu-two.vercel.app/p/catalog.json` (pick list),
`https://motion-menu-two.vercel.app/p/compose.json` (importmap + the menu's shared runtime verbatim, so composed pages
run patterns unmodified).

## THEMES — plug-and-play re-skin (no color work by hand)

Patterns arrive in the menu's acid-on-black palette. A THEME re-skins any bundle to a brand:
11 color tokens + font stacks, plus a literal-substitution map for the colors baked into
JS/GLSL/canvas code. Never hand-pick colors when a theme exists.

- **Build/tune a theme visually**: https://motion-menu-two.vercel.app/theme.html (presets: mm · daf · wb · blmedia,
  exports theme.json / theme.css / a pasteable agent block, shareable URL).
- **Fetch a theme**: `https://motion-menu-two.vercel.app/t/<name>.json` (index: `https://motion-menu-two.vercel.app/t/themes.json`). It contains
  `tokens` + `fonts`; the agent block / MCP add the precomputed `css` + `subst` map.
- **MCP**: `get_pattern {number, theme}` returns the bundle ALREADY re-skinned;
  `list_themes` / `get_theme` for the raw materials.
- **On Ben's machine**: `python3 ~/motion-menu/extract.py 34 84 --theme daf`.
- Applying one by hand: swap in the theme's `:root` block, then replace each key of `subst`
  (exact strings — hex, `0x` numbers, `"r,g,b"` triplets, GLSL `vec3(...)`) with its value.
  Physics constants stay untouched, as always.

## ONE-PAGE SITE PROTOCOL — read this before you touch a single pattern

The menu is a **catalog**; a site is a **story**. An agent that stacks patterns vertically has
rebuilt the menu, not built a site. This protocol exists because two rebuilds failed that way.

### Step 1 — write the act map first, in words, before any code
One page = **5–7 acts**. Each act = one message, one centerpiece, **2–4 patterns maximum**.
- Any single pattern appears **at most twice** page-wide, wearing different content each time.
- Page total: **12–18 viewport-heights**.
- Exactly **one** act gets the heavy 3D spectacle. One.
- Alternate loud (GL/shader) and quiet (type/whitespace) acts — the density wave IS the pacing.

Default skeleton for a commerce + education + brand page (numbers are orderable/replaceable):
- **ARRIVAL** — 03 preloader → hero 150 or 27, type-in 07 · global chrome: 02 cursor, 05 grain, 177 progress, 149 ⌘K
- **BRAND** — 89 living text fill, 96 depth parallax, 14 reveals · seam out: 161 zoom portal
- **COMMERCE** — working centerpiece: 101 configurator or 231 hotspots · 228 card stack compresses
  four offer messages into one viewport · 142 offer card
- **EDUCATION** — 148 learn hub, 71 before/after, 129 spec sheet · quiet act, type does the work
- **PROOF / CRAFT** — the one heavy GL moment: 232 walkthrough or 174 splats · 127 provenance, 44 line draw
- **ACTION** — a dwell tool: 238 floorplan dropper or 147 brief starter, feeding the real intake route
- **CLOSE** — 151 footer curtain (a visible ending shortens the perceived middle), 58 circular text

### Step 2 — skeleton first, patterns second
1. Take the runtime (`https://motion-menu-two.vercel.app/p/runtime.md`) — ONE Lenis, ONE ticker, `mountOnView`/`autoGL`.
2. **Greybox every act with plain text and scroll it.** Fix pacing NOW. Pattern beauty cannot
   rescue wrong pacing, and you will not notice the problem once it is pretty.
3. Then fetch and transplant patterns **one act at a time**, verifying each act before the next.
4. Seams last.

**Major/minor staging** — classify every act's pieces. MINORS (type, reveals, chips) mount early
(~600px before entry) so the next act is already alive as you arrive. The MAJOR (that act's one
GL/pinned centerpiece) mounts late (~160px) and dies promptly once passed — never more than 1–2
majors alive at once. The seam plays OVER the swap: the old major dies and the new one is born
under cover. That is what makes transitions unrecognizable.

### Why a 5-minute page will not feel long
- **Compression** — stacks/accordions/decks put several messages in one viewport-height.
- **Orientation** — named acts + a progress readout; feeling lost is what makes pages feel long.
- **Dwell tools stop the odometer** — time inside a configurator is engagement, not distance.
- **Seams read as arrival**, not travel.

---

# INDEX — all 596 patterns

Fetch any one: `https://motion-menu-two.vercel.app/p/<number>.md`


## Sections — order by the handful

- **A · GLOBAL FEEL** (10): 01, 02, 03, 04, 05, 06, 175, 176, 177, 178
- **B · TEXT** (10): 07, 08, 09, 12, 13, 179, 180, 181, 10, 11
- **C · SCROLL CHOREOGRAPHY** (10): 14, 15, 19, 20, 21, 182, 183, 16, 17, 18
- **D · HOVER & MICRO** (10): 22, 23, 24, 25, 26, 184, 185, 186, 187, 188
- **E · WEBGL / 3D** (10): 27, 28, 29, 30, 31, 32, 33, 189, 190, 191
- **F · SHADER CRAFT** (10): 34, 35, 36, 37, 38, 39, 40, 41, 192, 193
- **G · MOTION SYSTEMS** (10): 42, 43, 44, 45, 46, 47, 48, 49, 194, 195
- **H · THE AI LAYER** (11): 50, 51, 52, 53, 54, 55, 56, 140, 141, 196, 197
- **I · TEXT & TYPE II** (10): 57, 58, 59, 60, 61, 62, 63, 64, 65, 66
- **J · INTERFACE MICRO II** (12): 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78
- **K · WEBGL II** (10): 79, 80, 81, 82, 83, 84, 198, 199, 200, 201
- **L · PLATFORM NATIVES** (10): 85, 86, 87, 88, 89, 90, 202, 203, 204, 205
- **M · HEAVY HITTERS** (10): 91, 92, 93, 94, 95, 96, 97, 98, 99, 100
- **N · COMMERCE & CONNECTED** (10): 101, 102, 103, 104, 105, 106, 107, 108, 206, 207
- **O · FRESH OFF THE RADAR** (10): 109, 110, 111, 112, 113, 114, 115, 116, 208, 209
- **Q · DOMAIN PACKS** (12): 117, 118, 119, 120, 121, 122, 134, 135, 136, 137, 138, 139
- **S · BOUTIQUE PACK** (10): 123, 124, 125, 126, 127, 210, 211, 212, 213, 214
- **T · PROCUREMENT PACK** (10): 128, 129, 130, 131, 132, 133, 215, 216, 217, 218
- **W · DAF PACK** (10): 142, 143, 144, 145, 146, 147, 148, 219, 220, 221
- **Y · NEXT WAVE VOL. 1** (10): 149, 150, 151, 152, 153, 154, 155, 156, 157, 158
- **Z · NEXT WAVE VOL. 2** (12): 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170
- **AA · HEAVY TECH** (10): 171, 172, 173, 174, 222, 223, 224, 225, 226, 227
- **AB · NEXT WAVE VOL. 3** (12): 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239
- **AC · SEAMS & HANDOFFS** (8): 240, 241, 242, 243, 244, 245, 246, 247
- **AD · THE BACKEND LAYER** (17): 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 260, 261, 262, 263, 264

## A · GLOBAL FEEL

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

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

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

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

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

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

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

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

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

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

## B · TEXT

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

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

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

**10** word scrub — "manifesto paragraph gets 10".

**11** velocity marquee — "use 11".

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

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

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

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

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

## C · SCROLL CHOREOGRAPHY

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

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

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

**17** horizontal scroll — "collection browses with 17".

**18** stacking cards — "services/features section = 18".

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

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

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

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

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

## D · HOVER & MICRO

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

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

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

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

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

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

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

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

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

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

## E · WEBGL / 3D

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

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

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

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

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

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

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

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

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

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

## F · SHADER CRAFT

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

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

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

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

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

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

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

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

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

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

## G · MOTION SYSTEMS

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

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

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

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

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

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

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

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

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

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

## H · THE AI LAYER

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

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

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

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

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

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

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

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

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

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

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

## I · TEXT & TYPE II

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

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

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

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

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

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

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

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

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

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

## J · INTERFACE MICRO II

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

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

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

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

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

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

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

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

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

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

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

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

## K · WEBGL II

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

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

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

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

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

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

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

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

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

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

## L · PLATFORM NATIVES

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

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

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

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

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

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

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

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

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

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

## M · HEAVY HITTERS

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

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

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

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

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

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

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

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

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

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

## N · COMMERCE & CONNECTED

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

**102** AR 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.

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

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

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

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

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

**108** sequence 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.

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

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

## O · FRESH OFF THE RADAR

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

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

**111** Rive 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.

**112** GSAP 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.

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

**114** LYGIA 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.

**115** 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.

**116** Spline 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.)

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

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

## Q · DOMAIN PACKS

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

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

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

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

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

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

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

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

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

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

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

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

## S · BOUTIQUE PACK

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

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

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

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

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

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

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

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

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

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

## T · PROCUREMENT PACK

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

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

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

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

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

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

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

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

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

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

## W · DAF PACK

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

**143** costed 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.

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

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

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

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

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

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

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

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

## Y · NEXT WAVE VOL. 1

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

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

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

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

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

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

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

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

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

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

## Z · NEXT WAVE VOL. 2

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

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

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

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

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

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

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

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

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

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

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

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

## AA · HEAVY TECH

**171** in-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.

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

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

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

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

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

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

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

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

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

## AB · NEXT WAVE VOL. 3

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

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

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

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

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

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

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

**235** 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.

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

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

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

**239** upholstery 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.

## AC · SEAMS & HANDOFFS

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

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

**242** 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.

**243** no 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.

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

**245** device 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.

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

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

## AD · THE BACKEND LAYER

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

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

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

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

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

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

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

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

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

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

**258** the menu'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.

**259** 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.

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

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

**262** 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.

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

**264** 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.

**265** Verification code entry

**266** Magic-link sign-in

**267** Horizontal bar comparison

**268** Before/after credibility pairing

**269** Bento grid, one metric emphasised

**270** Counter row with unit labels

**271** Credential ledger

**272** Inline-field CTA

**273** Split CTA

**274** Statement CTA

**275** As-featured-in strip

**276** Figure/label ledger

**277** Big-ask closer

**278** Marquee-edge footer

**279** Sign-off rule footer

**280** Sitemap footer

**281** Four-up metric row

**282** Generic logo wall

**283** Hero number with caption

**284** Credential list

**285** Pull-quote with rule

**286** Pull quote with rule

**287** Quote with gradient portrait

**288** Three-up quote grid

**289** Sparkline row

**290** Four-up metric row

**291** Hero figure

**292** Account-created confirmation

**293** Provider button stack

**294** Passkey prompt card

**295** Magic-link split

**296** Session gate card

**297** Sign-in card

**298** Two-factor code entry

**299** Card CTA with rule

**300** Full-bleed statement CTA

**301** Inline form CTA

**302** Quiet text-link CTA

**303** Split CTA

**304** Sticky CTA bar

**305** Horizon curtain footer

**306** Legal status bar

**307** Let's-talk closer

**308** Ticker strip footer

**309** Minimal sign-off footer

**310** Newsletter inline footer

**311** Outline wordmark footer

**312** Breadcrumb with cut chevrons

**313** Centered wordmark bar

**314** Icon rail

**315** Segmented pill switcher

**316** Sidebar nav with sliding marker

**317** Tab bar with sliding fill

**318** Underline-slide nav

**319** Aurora drift

**320** Diagonal scan lines

**321** Dot matrix fade

**322** Hairline grid field

**323** Horizon glow

**324** FAQ disclosure

**325** Lede with rule

**326** Spec ledger

**327** Numbered step ladder

**328** Two-column with margin note

**329** Corner meta

**330** Scroll cue

**331** Booking date and slot picker

**332** File-drop zone

**333** Multi-step form, progress rule

**334** Newsletter form with consent line

**335** Search field with filter chips

**336** Segmented choice picker

**337** Split contact form with rule

**338** Stacked brief intake form

**339** Feature with thumbs

**340** Hairline quad grid

**341** Offset pair

**342** Snap strip

**343** Hero with bordered spec panel

**344** Centred statement hero

**345** Hero with clipped line reveal

**346** Minimal hero, one hairline

**347** Asymmetric hero, offset caption

**348** Outlined wordmark hero

**349** Hero with scrolling kicker strip

**350** Split editorial hero

**351** Ambient glow media frame

**352** Audio player row with waveform

**353** Media card with duration pill

**354** Editorial figure with caption

**355** 16:9 embed frame with chrome bar

**356** Full-bleed media band with overlay title

**357** Media grid with feature cell

**358** Video frame with play affordance

**359** Compact price strip

**360** Comparison table, hairline grid

**361** What's included checklist panel

**362** Price with open breakdown disclosure

**363** Quote panel with line-item breakdown

**364** Single-price statement panel

**365** Three-tier pricing row

**366** Monthly/annual toggle, pure CSS

**367** Labelled rule seam

**368** Sweeping rule seam

**369** Alternating line stack

**370** Drop-cap lede

**371** Rotating word headline

**372** Stroke headline

**373** Noise wash

**374** Topographic rings

**375** Vignette frame

**376** Callout band

**377** Definition pair

**378** Timeline rail

**379** Log and activity feed

**380** Notification and alert stack

**381** Empty-state panel

**382** Job queue list with state pills

**383** KPI header row with filter bar

**384** Settings form panel, grouped rows

**385** Compact sidebar and content shell

**386** Data table with status column

**387** Usage meter row with bars

**388** Hover-reveal caption

**389** Masonry three-column

**390** Quote over media frame

**391** Anchor list with progress

**392** Mega-menu columns

**393** Lead-time and availability strip

**394** What's in the box, itemised panel

**395** Two-option comparison panel

**396** Product detail accordion

**397** Feature callout row, hairline numbering

**398** Product hero with spec sidebar

**399** Materials and finish list with swatch chips

**400** Size and dimension selector

**401** Variant swatch picker

**402** Angled slash divider

**403** Arc curve divider

**404** Plan gate

**405** Back-to-top affordance

**406** Corner glow pair

**407** Perspective floor

**408** Checklist panel

**409** Quote break

**410** Two-up content cards

**411** Floating status pill

**412** Indexed footer

**413** Gradient fade-out band

**414** Hanging punctuation quote

**415** Justified two-column text

**416** Keyboard hint bar

**417** Theme switcher pill row

**418** Marked phrase, gradient underline

**419** Aspect ratio row

**420** Split media and caption

**421** Mono label / display pairing

**422** Command hint bar

**423** Numbered act marker

**424** Numbered pull statement

**425** Overlapping panel seam

**426** Oversized glyph graphic

**427** Numbered quote pair

**428** Reading progress bar

**429** Side page index

**430** Delta rows

**431** Ring gauge

**432** Stepped edge seam

**433** Organisation switcher

**434** Announcement strip with dismiss

**435** Breadcrumb and share row

**436** Cookie consent bar

**437** Corner social link cluster

**438** Footer-anchored contact pill

**439** Skip-to-content link

**440** Sticky section header

**441** Saved and syncing status chip

**442** Comparison columns

**443** CTA with availability line

**444** Boxed book-a-call CTA

**445** Bordered panel CTA with two actions

**446** CTA with what-happens-next checklist

**447** Full-width slab CTA

**448** CTA over a gradient band

**449** CTA with countdown-style meta line

**450** Minimal arrow-link CTA row

**451** CTA with phone and email pair

**452** CTA with quiet secondary link

**453** Diff summary

**454** Run timeline

**455** Two-tone split footer

**456** Address form, grouped fields

**457** Compact two-field row with submit

**458** Form with inline validation states

**459** Payment card form (visual only)

**460** Rating scale input row

**461** Tag and keyword chip input

**462** Centre-rule diptych

**463** Corner index frame

**464** Filmstrip with scrub rail

**465** Full-bleed quad band

**466** Mixed orientation pair

**467** Scattered frame stack

**468** Span-cell grid

**469** Diagonal split hero

**470** Hero with inline email capture

**471** Full-bleed gradient hero

**472** Hero with oversized numeral

**473** Hero with bottom meta row

**474** Hero with offset image panel

**475** Hero with rotating word line

**476** Stacked type-pairing hero

**477** Hero with booking status strip

**478** Hero with two-line mask reveal

**479** Media chapter list

**480** Compact nav bar with divider

**481** Per-seat calculator layout

**482** Care instructions

**483** Provenance chain

**484** Rating summary

**485** Chevron notch seam

**486** Continues-below descend cue

**487** Double hairline with centred dot

**488** Rotated stamp-tag seam

**489** Tone-shift band seam

**490** Progress ladder

**491** Headline with footnote annotation

**492** Numbered chapter heading

**493** Gradient-filled word

**494** Hanging-indent paragraph set

**495** Two-size stacked lockup

**496** Vertical label beside headline

**497** Weighted clause line

**498** Wide letter-spaced label row

**499** Print header

**500** Section counter

**501** Two-path CTA

**502** Inline-label rows

**503** Question opener

**504** Currency and region switcher row

**505** Enterprise talk-to-us panel beside two tiers

**506** Fee transparency

**507** One-off versus subscription pair

**508** Price with struck-through comparison

**509** Usage-tier ladder

**510** Inline mention line

**511** Stepped seam

**512** Stitched rule

**513** Comparison pair

**514** Marker underline

**515** Focus ring

**516** Progress CTA

**517** One question at a time

**518** Index-card hero

**519** Marquee band hero

**520** What changes by tier

**521** Case strip

**522** Inset corner seam

**523** Share split bar

**524** Lead and dek

**525** New device sign-in approval

**526** Organisation invite accept card

**527** Account lockout cooldown notice

**528** Multistep signup with step indicator

**529** Password field with strength meter

**530** Recovery codes with checkbox reveal

**531** Account type selection cards

**532** Scrollable terms consent gate

**533** Blockout collage

**534** Conic spoke wheel

**535** Corner register marks

**536** Facet shard cluster

**537** Halftone dither

**538** Orbit rings

**539** Ridge silhouette

**540** Sheen sweep

**541** Diagonal split content panel

**542** Annotated diagram pins

**543** Drop-cap column feature

**544** Filmstrip content scroller

**545** Margin line-numbered clauses

**546** Corkboard note wall

**547** Sticky index scroll pane

**548** Tabbed content switch

**549** Activity heatmap grid

**550** Period comparison split

**551** Nested file tree list

**552** Onboarding checklist with progress ring

**553** Page header with breadcrumb and actions

**554** Permission matrix table

**555** Reorderable list with drag handles

**556** Segmented tab panel switcher

**557** Accordion sitemap footer

**558** Bento contact footer

**559** Diagonal band footer

**560** Expanding column footer

**561** Orbit badge footer

**562** Tabbed footer panels

**563** Tag-cloud wall footer

**564** Torn-edge footer

**565** Asymmetric bento

**566** Flip card pair

**567** Hex cluster

**568** Marquee loop row

**569** Radial orbit thumbs

**570** Stair-step row

**571** Torn-edge strip

**572** Vertical rail strip

**573** Diagonal notch caption

**574** Folded index card

**575** Peel corner reveal

**576** Picture-in-picture overlay

**577** Radial progress ring

**578** Scrub bar with chapter marks

**579** Subtitle track bar

**580** Vertical frame with action rail

**581** Scroll-snap chip rail

**582** Corner-anchored nav

**583** Disclosure drawer nav

**584** Index dot scrollspy nav

**585** Marquee alert bar nav

**586** Preview flyout nav

**587** Skewed tab deck nav

**588** Two-tier utility nav

**589** Sticky buy bar

**590** Certification badge grid

**591** Downloadable resources list

**592** Live configurator, options drive a shared preview

**593** Spec list with hover-defined terms

**594** 360 spin viewer, static illustration

**595** Tabbed spec groups

**596** Trust badge row