Every pattern, running.

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

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

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

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

Say: "filters snap with 75" — the highlight pill overshoots and settles like it has mass.

Say: "headlines flood with 179" — hollow type filling as you scroll past. The SOTD hero staple.

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

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

Say: "product finish like 29" — oil-slick thin-film sheen shifting as it turns.

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

Say: "showcase spins with 31" — the object's rotation is welded to your scrollbar. Scroll up and down over this card.

Say: "living shape = 32" — organic vertex-displaced form, endlessly breathing.

Say: "background depth = 33" — hundreds of objects in one draw call, orbiting as a school.

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

Say: "hero reacts with 35" — clicks send water rings warping through the surface.

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

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

Say: "atmosphere behind hero = 40" — slow procedural smoke. Deeper than 06, cheaper than 27.

Say: "intro flies through 79" — endless forward motion through recycling geometry. Openers and 404s.

Say: "product constructs via 82" — the mesh draws itself into existence as you scroll.

Say: "images drape with 84" — imagery on rippling fabric. Lookbooks and campaign heroes.

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

Say: "archive footage = 94" — scanlines, barrel curve, rolling band, phosphor flicker. Full broadcast nostalgia.

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

Say: "collection flythrough = 100" — a tunnel of imagery you travel through. Peak lookbook energy.

Say: "product page runs 101" — live material and finish switching with the price following. This one is fully working.

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

Say: "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.

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

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

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

Say: "living texture = 156" — Turing patterns growing in real time. Chemistry, not animation.

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

Say: "products become 174" — phone-captured photoreal 3D with true view-dependent light. The WB endgame for product pages.

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

Say: "light shafts via 190" — volumetric beams raking through the scene. Cathedral mood on demand.

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

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

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

Say: "cruise over 198" — endless procedural landscape sliding under the camera, fog to the horizon.

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

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

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

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

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

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

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

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

Say: "type is geometry — 235" — crisp signed-distance-field text in WebGL, sharp at any zoom. Type your own headline into the scene.

Say: "let them touch the fabric — 239" — a velvet swatch that dents under the pointer and springs back. Sheen, nap, give: tactility on a screen.

Say: "acts dissolve through 242" — both scenes render to textures; a noisy edge blends them. How award pipelines hand one world to the next.

Say: "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.

Say: "the whole site scrolls like 01" — inertia + eased wheel. Non-negotiable base layer.

Say: "add 02" — dot tracks tight, ring lags behind. Hides itself on touch devices.

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

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

Say: "background = 06" — slow drifting color field behind content. Calm, expensive-feeling ambience.

Say: "headline enters with 07" — each character rises with a tiny rotation, staggered. The classic hero move.

Say: "paragraphs use 08" — quieter than 07. Editorial, Studio-Freight energy.

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

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

Say: "default entrance = 14" — the workhorse. Everything that doesn't have a fancier entrance gets this.

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

Say: "images unveil with 19" — the image is uncovered like a curtain rather than fading in.

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

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

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

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

Say: "gallery hero uses 24" — images bloom along the cursor's path and melt away.

Say: "easter egg in 38" — scenes drawn in live type. Terminal-core; pairs with 09.

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

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

Say: "brand mark breathes with 45" — vector shapes flow between forms. Logos, icons, section dividers.

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

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

Say: "type leans with 49" — text shears with your scroll speed and settles when you stop. Pure feel.

Say: "badge/stamp = 58" — rotating ring of type. Corner badges, seals, section markers.

Say: "caption rides 59" — words travel along a drawn curve as you scroll. Scroll up and down over this card.

Say: "soft entrances use 61" — characters sharpen out of a blur. Dreamier than 07.

Say: "hero line rotates with 63" — one slot in the sentence flips through your value props.

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

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

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

Say: "proof section = 71" — drag the divider between two states. Refurb work, retouching, redesigns.

Say: "browse mode = 73" — swipeable card stack. Lookbooks, product discovery, yes/no curation.

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

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

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

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

Say: "cursor drips with 97" — a liquid blob chases the pointer and melts away.

Say: "explore mode = 98" — the page as an endless desk you pan across. Moodboards, archives, collections.

Say: "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.

Say: "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.

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

Say: "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.)

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

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

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

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

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

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

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

Say: "specs draw with 132" — interactive footprints and clearance zones. Herman-Miller-depth PDPs.

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

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

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

Say: "DAF cards use 142" — every price opens its own explanation and links to a lesson. Transparency as the differentiator.

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

Say: "add 149" — the defining SaaS interaction. This one actually navigates the menu: try "glass" or "128".

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

Say: "departures via 153" — Solari-board mechanics for headlines, stats, drop announcements.

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

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

Say: "hovers know direction via 158" — fills that enter where your cursor entered, plus the macOS dock magnify.

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

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

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

Say: "tiny world via 166" — a whole room in stacked CSS transforms. Story scenes without a single polygon.

Say: "dialogs grow from 167" — the panel morphs out of the button you pressed, and returns into it. No teleporting modals.

Say: "172 powers the dashboards" — real SQLite compiled to WASM. Edit the query — it's live.

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

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

Say: "mark it up with 181" — marker circles and underlines that draw themselves. Human warmth on digital pages.

Say: "galleries drift with 182" — center column slow, edges fast. Instant depth for image grids.

Say: "the page wraps via 183" — no top, no bottom. Collections and showreels as a loop.

Say: "the cursor speaks with 185" — hovering media, the cursor grows and says what a click will do.

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

Say: "icons transform via 187" — play becomes pause, plus becomes close, hearts pop full. Click each.

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

Say: "boards reorder via 194" — pick up, hover, drop; neighbors glide aside. Kanban physics.

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

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

Say: "saves feel good via 211" — the heart pops with particles. Dopamine at the save moment.

Say: "money honest via 218" — paired bars per category, variance called out. Trust through numbers that move.

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

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

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

Say: "gallery breathes with 237" — a thumbnail FLIPs into the full frame and back, siblings hold their ground, backdrop blurs.

Say: "seams breathe with 240" — rush and the transition cuts short; linger and it plays full. Juries score this pacing explicitly.

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

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

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

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

Say: "blobby accents = 39" — shapes that merge like liquid when they touch. Organic, playful.

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

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

Say: "section background = 70" — a field of dots that flinches away from the cursor and springs back.

Say: "loading jump = 80" — stars streak past at warp. Cheap, hypnotic, works everywhere.

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

Say: "living background = 83" — particles tracing invisible wind. The most organic ambience per kilobyte.

Say: "hero is 91" — ink that swirls and settles like liquid. (Full GPU Navier-Stokes = the WebGPU upgrade on radar.)

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

Say: "visuals hear with 99" — real frequency analysis driving the graphics. This demo synthesizes its own beat.

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

Say: "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.

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

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

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

Say: "transitions break with 159" — imagery fractures into shards from your click point, then heals.

Say: "living veins = 160" — thousands of agents finding paths like Physarum. Organic infrastructure, growing live.

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

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

Say: "stones explain via 213" — cut, clarity and glow compared visually, not in a spec table.

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

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

Say: "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.

Say: "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.

Say: "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.

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

Say: "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.

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

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

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

Say: "tooltips via 88" — elements that tether themselves to an anchor. Kills positioning libraries.

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

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

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

Say: "instant nav via 168" — one script tag in the head. The cheapest expensive-feeling upgrade on the entire menu.

Say: "headers know via 202" — the bar restyles itself the moment it sticks. Zero JS where supported; scroll the box.

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

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

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

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

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

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

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

Say: "deliverables export via 226" — plans, quotes and spec sheets leaving the browser as real files.

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

Say: "variants swap via 244" — document.startViewTransition morphs any DOM change natively. The atelier's variant switcher runs on this.

Say: "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.

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

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

Say: "show the wire with 249" — live round-trip times to both runtimes, with the regions they answered from.

Say: "visitors persist via 251" — a real Postgres table behind RLS policies. State that survives the tab.

Say: "the room breathes with 252" — websocket presence: who's here right now, joining and leaving live.

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

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

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

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

render server-side

Say: "links unfurl via 257" — a function draws the social card on demand: one endpoint, infinite personalized images.

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

Say: "jobs survive via 259" — durable execution, the 2026 default for AI pipelines. Simulated here; the real engines wire in from one SDK.

Say: "it feels local via 260" — optimistic writes, server reconciliation, offline queue that flushes. The Linear feel, the 2026 category.

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

Say: "absorb the spike via 262" — push the producer past the consumer and watch the queue fill, then overflow. Every outage post-mortem, one slider.

Say: "sessions decoded via 263" — the token every API checks, taken apart live: tamper with any part and verification fails.

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

Say: "secondary buttons are 26" — a color wave rises through the button on hover.

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

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

Say: "metallic type = 62" — a light band sweeps through the letters forever. Zero JS.

Say: "menu icon = 67" — three lines fold into an X. The detail everyone notices without noticing.

Say: "secret layer via 68" — content only visible inside a torch beam that follows the cursor.

Say: "featured card wears 69" — a comet circles the border. Marks the one thing you want eyes on.

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

Say: "loading states use 77" — content shape shimmers before data lands. This one loads on a loop.

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

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

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

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

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

Say: "editorial sells with 135" — tap the pulsing dots inside the scene. Photography becomes a storefront.

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

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

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

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

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

Say: "go native with 165" — hover the bars, pop the popover, open the details. Zero JavaScript in any of them.

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

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

Say: "brand the chrome with 178" — selection color + scrollbar styling. The cheapest polish nobody skips on award sites.

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

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

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

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

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

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

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

Say: "validate intake with 250" — clear required-field feedback without sending visitor data anywhere.

Say: "code entry is boxed" — six separated digits with a focus ring. The step everyone builds badly.

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

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

Say: "proof is <n>" — a plain panel next to a refined one; reach for it when the credibility argument is craft, not a number.

Say: "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.

Say: "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.

Say: "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.

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

Say: "split the ask" — copy on the left, the action on the right, hairline between. Reads as calm, converts like a banner.

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

Say: "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.

Say: "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.

Say: "end on the big ask" — oversized closing line with the address as the only link. A visible ending shortens the perceived middle.

Say: "footer rides a marquee" — a slow ticker strip seals the page, compact bar underneath.

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

Say: "give me a real sitemap footer" — a brand column plus grouped link lists, for pages with enough to actually list.

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

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

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

Say: "proof is one pull quote" — oversized quote, hairline, attribution. One strong quote beats a wall of three.

Say: "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.

Say: "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.

Say: "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.

Say: "four numbers on a rule" — hairline-separated figures with unit labels. Replace the placeholders with real figures.

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

Say: "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.

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

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "CTA in a card, with a rule" — heading, a hairline, then an arrow link that slides on hover.

Say: "give me a statement CTA" — one big claim, full width, a single filled button underneath.

Say: "CTA with one field" — a heading over a pill-shaped email capture, button built into the field.

Say: "quiet CTA to close an article" — a hairline, a soft line of copy, one understated arrow link.

Say: "split the CTA" — copy on the left, a divider, the button stack on the right.

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

Say: "end on a horizon" — the sign-off line sinks into a glowing line at the base, like the page is setting.

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

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

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

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

Say: "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.

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

Say: "chevron breadcrumb" — a trail separated by a sliced arrow shape instead of a plain ">"; reach for it on deep catalogue or docs hierarchies.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "aurora behind the hero" — slow colour fields that never repeat visibly. Costs nothing; no canvas, no GL.

Say: "diagonal scan behind it" — a fine rule texture that drifts. Reads technical without reading retro.

Say: "dot matrix behind the section" — a quiet texture that gives flat panels somewhere to sit.

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

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

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

Say: "open the section with the lede" — eyebrow, rule, oversized opening paragraph. The editorial entry point.

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

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

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

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

Say: "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.

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

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

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "one big, four small" — the product-page arrangement. The thumbs mark the current frame.

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

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

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

Say: "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.

Say: "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.

Say: "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 considered.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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 page.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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 defend itself on demand, not by default.

Say: "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.

Say: "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.

Say: "give me a three-tier pricing row" — three plans side by side, the middle one raised and bordered in the accent; reach for it as the default pricing section when there's a clear plan to push.

Say: "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 change, only the billing period.

Say: "divide the acts with a labelled rule" — names the next act, which is what stops a long page feeling lost.

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

Say: "stack the lines alternating" — left, right, left. Asymmetry does the work no centred block can.

Say: "give the opening a drop cap" — the oldest signal that a page was set, not generated.

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

Say: "outline the headline, fill one word" — hollow display type with a single solid word carrying the emphasis.

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

Say: "topographic rings behind it" — concentric contours, like a survey map. Depth without a single image.

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

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

Say: "set the terms as definition pairs" — term and meaning, hung on a rule. For glossaries and explainers.

Say: "run it down a timeline rail" — dated entries on a vertical line. History, roadmap, or process.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "captions arrive on hover" — the frame stays clean until someone looks closer.

Say: "masonry it three across" — native CSS columns, uneven heights, no JS layout pass.

Say: "set the quote over the frame" — type on imagery with a legibility scrim, done properly.

Say: "index the page down the side" — anchors with an active marker. Orientation is what stops long pages feeling long.

Say: "open a mega menu" — grouped columns with a featured cell. What a real catalogue navigation looks like.

Say: "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.

Say: "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.

Say: "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.

Say: "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 fits flat.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

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

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

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

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

Say: "light the two corners" — opposing soft sources. Gives a flat panel a direction without a shape in it.

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

Say: "list it as a checklist" — ticked rows in a bordered panel. For scope, inclusions, or requirements.

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

Say: "two content cards side by side" — a pair of bordered panels with a kicker, a title and a link.

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

Say: "index the footer" — numbered link groups. Reads like the back of a book rather than a sitemap dump.

Say: "fade the section out" — content dissolves into the page background before the next act starts clean.

Say: "hang the quote mark" — the opening quotation mark sits outside the text block instead of eating into the first line.

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

Say: "add a theme switcher pill" — three icon options in a segmented pill with a sliding accent behind the active one.

Say: "mark a phrase in the text" — one phrase gets a gradient underline instead of a full highlight box.

Say: "mix the aspect ratios" — portrait, square, landscape in one row. Rhythm instead of a uniform grid.

Say: "media left, caption right" — the editorial pairing, with the caption doing real work.

Say: "pair a mono label with a display line" — a small uppercase eyebrow over a large display headline, the standard editorial stack.

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

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

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

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

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

Say: "two numbered quotes" — indexed like footnotes. Reads as record rather than marketing.

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

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

Say: "show the movement, not just the number" — value plus its change, on hairlines.

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

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

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

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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.

Say: "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 where they are.

Say: "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 kept.

Say: "put them side by side" — two columns, one rule, no winner declared. Let the reader decide.

Say: "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, not a form.