{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "motionmenu", "homepage": "https://motion-menu-two.vercel.app", "items": [ { "name": "motion-menu-runtime", "type": "registry:file", "title": "Motion Menu runtime", "description": "One Lenis physics, one ticker, and the mount-on-view / destroy-on-exit lifecycle every WebGL pattern depends on. Install once per app.", "categories": [ "foundations" ] }, { "name": "lenis-scrolltrigger-bridge", "type": "registry:block", "title": "Lenis + ScrollTrigger bridge", "description": "\"the whole site scrolls like 01\" — inertia + eased wheel. Non-negotiable base layer.", "categories": [ "role-chrome", "global", "feel", "lenis" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "custom-cursor", "type": "registry:block", "title": "custom cursor", "description": "\"add 02\" — dot tracks tight, ring lags behind. Hides itself on touch devices.", "categories": [ "role-chrome", "global", "feel", "js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "preloader", "type": "registry:block", "title": "preloader", "description": "\"open with 03\" — counter climbs 0→100 while assets load, curtain lifts, page breathes in.", "categories": [ "role-hero", "global", "feel", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "page-transition", "type": "registry:block", "title": "page transition", "description": "\"pages change with 04\" — colored slabs sweep the screen between routes. No hard cuts, ever.", "categories": [ "role-seam", "global", "feel", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "grain-toggle", "type": "registry:block", "title": "grain toggle", "description": "\"keep 05 on everything\" — animated noise at ~6% opacity. The cheapest way to kill the \"flat digital\" look.", "categories": [ "role-background", "global", "feel", "svg" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "gradient-mesh-drift", "type": "registry:block", "title": "gradient mesh drift", "description": "\"background = 06\" — slow drifting color field behind content. Calm, expensive-feeling ambience.", "categories": [ "role-background", "global", "feel", "gsap", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "char-cascade", "type": "registry:block", "title": "char cascade", "description": "\"headline enters with 07\" — each character rises with a tiny rotation, staggered. The classic hero move.", "categories": [ "role-hero", "text", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "line-mask", "type": "registry:block", "title": "line mask", "description": "\"paragraphs use 08\" — quieter than 07. Editorial, Studio-Freight energy.", "categories": [ "role-type", "text", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "scramble", "type": "registry:block", "title": "scramble", "description": "\"labels decode with 09\" — glyph noise resolves into words. Tech/lab flavor; use sparingly.", "categories": [ "role-background", "text", "js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "word-scrub", "type": "registry:block", "title": "word scrub", "description": "\"manifesto paragraph gets 10\".", "categories": [ "role-type", "text" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "velocity-marquee", "type": "registry:block", "title": "velocity marquee", "description": "\"use 11\".", "categories": [ "role-gallery", "text" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "outline-fill-hover", "type": "registry:block", "title": "Outline → fill hover", "description": "\"big nav words are 12\" — hollow stroke type that floods with color on hover.", "categories": [ "role-nav", "text", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "counter", "type": "registry:block", "title": "counter", "description": "\"stats section uses 13\" — numbers roll up when they enter the viewport.", "categories": [ "role-stats", "text", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "reveal-scroll", "type": "registry:block", "title": "reveal on scroll", "description": "\"default entrance = 14\" — the workhorse. Everything that doesn't have a fancier entrance gets this.", "categories": [ "role-content", "scroll", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "parallax-layers", "type": "registry:block", "title": "parallax layers", "description": "\"hero layers move with 15\" — depths drift at different speeds while you scroll. Instant dimensionality.", "categories": [ "role-hero", "scroll", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "pinned-scrub-scene", "type": "registry:block", "title": "pinned scrub scene", "description": "\"product story is 16\" — scrub-driven scene while the viewport holds. The backbone of every Apple-style product page.", "categories": [ "role-product", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "horizontal-scroll", "type": "registry:block", "title": "horizontal scroll", "description": "\"collection browses with 17\".", "categories": [ "role-gallery", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stacking-cards", "type": "registry:block", "title": "stacking cards", "description": "\"services/features section = 18\".", "categories": [ "role-content", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "clip-reveal", "type": "registry:block", "title": "clip reveal", "description": "\"images unveil with 19\" — the image is uncovered like a curtain rather than fading in.", "categories": [ "role-seam", "scroll", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "zoom-settle", "type": "registry:block", "title": "zoom settle", "description": "\"gallery images use 20\" — image starts oversized and settles to 1:1 as it scrolls through view.", "categories": [ "role-gallery", "scroll", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "progress-bar", "type": "registry:block", "title": "progress bar", "description": "\"add 21\" — thin bar tracking read progress. Pairs well with long editorial pages.", "categories": [ "role-stats", "scroll", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "magnetic", "type": "registry:block", "title": "magnetic", "description": "\"all CTAs are 22\" — buttons pull toward the cursor, then elastic-snap back. Bonhomme signature.", "categories": [ "role-chrome", "hover", "micro", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "tilt-card", "type": "registry:block", "title": "tilt card", "description": "\"product cards get 23\" — perspective tilt following the cursor, with a moving light sheen.", "categories": [ "role-product", "hover", "micro", "js", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "image-trail", "type": "registry:block", "title": "image trail", "description": "\"gallery hero uses 24\" — images bloom along the cursor's path and melt away.", "categories": [ "role-hero", "hover", "micro", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "link-roll", "type": "registry:block", "title": "Link roll", "description": "\"nav links roll with 25\" — text flips to an accent copy of itself on hover.", "categories": [ "role-nav", "hover", "micro", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "fill-sweep-button", "type": "registry:block", "title": "Fill sweep button", "description": "\"secondary buttons are 26\" — a color wave rises through the button on hover.", "categories": [ "role-cta", "hover", "micro", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "particle-field", "type": "registry:block", "title": "particle field", "description": "\"hero atmosphere = 27\" — thousands of drifting points, additive glow, reacts to the cursor.", "categories": [ "role-hero", "webgl", "3d", "three", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "glass-transmission", "type": "registry:block", "title": "glass transmission", "description": "\"hero object in 28\" — real refractive glass with chromatic dispersion. The Lusion look.", "categories": [ "role-hero", "webgl", "3d", "three", "boutique" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "iridescent-metal", "type": "registry:block", "title": "iridescent metal", "description": "\"product finish like 29\" — oil-slick thin-film sheen shifting as it turns.", "categories": [ "role-product", "webgl", "3d", "three", "boutique" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hologram-fresnel", "type": "registry:block", "title": "hologram fresnel", "description": "\"accent object = 30\" — fresnel edge-glow with scanlines. Sci-fi, restrained.", "categories": [ "role-product", "webgl", "3d", "three", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "scroll-driven-3d", "type": "registry:block", "title": "scroll-driven 3D", "description": "\"showcase spins with 31\" — the object's rotation is welded to your scrollbar. Scroll up and down over this card.", "categories": [ "role-gallery", "webgl", "3d", "three", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "morphing-blob", "type": "registry:block", "title": "morphing blob", "description": "\"living shape = 32\" — organic vertex-displaced form, endlessly breathing.", "categories": [ "role-form", "webgl", "3d", "three", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "instanced-swarm", "type": "registry:block", "title": "instanced swarm", "description": "\"background depth = 33\" — hundreds of objects in one draw call, orbiting as a school.", "categories": [ "role-background", "webgl", "3d", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "displacement-hover", "type": "registry:block", "title": "displacement hover", "description": "\"gallery images swap with 34\" — one image liquefies into another through a noise map. The signature Codrops hover.", "categories": [ "role-background", "shader", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "ripple-click", "type": "registry:block", "title": "ripple on click", "description": "\"hero reacts with 35\" — clicks send water rings warping through the surface.", "categories": [ "role-hero", "shader", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "glitch-burst", "type": "registry:block", "title": "glitch burst", "description": "\"transitions spike with 36\" — RGB split + slice tearing in short bursts. Aggressive; use in moments, not constantly.", "categories": [ "role-type", "shader", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "dither-field", "type": "registry:block", "title": "dither field", "description": "\"background texture = 37\" — ordered-dither shading, the retro-print look that's everywhere on 2026 Awwwards.", "categories": [ "role-background", "shader", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "ascii-render", "type": "registry:block", "title": "ASCII render", "description": "\"easter egg in 38\" — scenes drawn in live type. Terminal-core; pairs with 09.", "categories": [ "role-type", "shader", "canvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "gooey-metaballs", "type": "registry:block", "title": "gooey metaballs", "description": "\"blobby accents = 39\" — shapes that merge like liquid when they touch. Organic, playful.", "categories": [ "role-chrome", "shader", "canvas", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "shader-fog", "type": "registry:block", "title": "shader fog", "description": "\"atmosphere behind hero = 40\" — slow procedural smoke. Deeper than 06, cheaper than 27.", "categories": [ "role-hero", "shader", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "particles-form-text", "type": "registry:block", "title": "particles form text", "description": "\"logo assembles with 41\" — a thousand particles scatter and reform your wordmark.", "categories": [ "role-form", "shader", "canvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "inertia-drag-slider", "type": "registry:block", "title": "inertia drag slider", "description": "\"collection slider is 42\" — flick it and it glides with momentum, rubber-bands at the ends.", "categories": [ "role-gallery", "motion-system", "js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "flip-shuffle", "type": "registry:block", "title": "FLIP shuffle", "description": "\"filters animate with 43\" — items glide to their new positions instead of snapping. Essential for product filtering.", "categories": [ "role-product", "motion-system", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "svg-line-draw", "type": "registry:block", "title": "SVG line draw", "description": "\"underline/diagram draws with 44\" — strokes draw themselves as you scroll. Scroll up and down over this card.", "categories": [ "role-content", "motion-system", "svg", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "shape-morph", "type": "registry:block", "title": "shape morph", "description": "\"brand mark breathes with 45\" — vector shapes flow between forms. Logos, icons, section dividers.", "categories": [ "role-background", "motion-system", "svg", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "odometer", "type": "registry:block", "title": "odometer", "description": "\"prices/stats roll with 46\" — each digit is a slot-machine column. Richer than 13.", "categories": [ "role-stats", "motion-system", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "view-transitions", "type": "registry:block", "title": "View Transitions", "description": "\"grid-to-detail morphs with 47\" — click a tile: the browser itself morphs it into the featured slot. Zero-library page transitions.", "categories": [ "role-seam", "motion-system", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "scroll-scrub-canvas", "type": "registry:block", "title": "scroll-scrub canvas", "description": "\"product assembles with 48\" — a frame sequence scrubbed by scroll. The Apple AirPods technique (in production: rendered image frames).", "categories": [ "role-product", "motion-system", "canvas", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "velocity-skew", "type": "registry:block", "title": "velocity skew", "description": "\"type leans with 49\" — text shears with your scroll speed and settles when you stop. Pure feel.", "categories": [ "role-type", "motion-system", "lenis", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "concierge-chat", "type": "registry:block", "title": "concierge chat", "description": "\"add 50\" — a styling/product advisor that streams answers, knows the catalog, and hands off to checkout.", "categories": [ "role-product", "ai", "realtime" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "search-by-vibe", "type": "registry:block", "title": "search by vibe", "description": "\"search is 51\" — semantic search: \"something my mother would wear to a wedding\" returns the right products, not keyword misses.", "categories": [ "role-nav", "ai" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "generative-imagery", "type": "registry:block", "title": "generative imagery", "description": "\"staging pipeline = 52\" — product shots re-staged into lifestyle scenes at scale. Passes the 4K bar or doesn't ship.", "categories": [ "role-product", "ai", "backend" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "adaptive-page", "type": "registry:block", "title": "adaptive page", "description": "\"homepage adapts with 53\" — hero, copy, and CTA re-rank per visitor context. One page, many faces.", "categories": [ "role-hero", "ai" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "copy-at-scale", "type": "registry:block", "title": "copy at scale", "description": "\"catalog copy via 54\" — every product page gets voice-consistent descriptions generated from specs, reviewed by gate.", "categories": [ "role-product", "ai" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "voice-interface", "type": "registry:block", "title": "voice interface", "description": "\"add 55\" — spoken answers and voice-driven browsing. This demo really speaks — the button uses your browser's own voice engine.", "categories": [ "role-cta", "ai" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "agentic-back-office", "type": "registry:block", "title": "agentic back-office", "description": "\"Nimos runs 56\" — agents watching inventory, triaging orders, drafting supplier mail — reporting to one hub. The business runs while you sleep.", "categories": [ "role-content", "ai", "nimos" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "variable-font-proximity", "type": "registry:block", "title": "variable-font proximity", "description": "\"headline breathes with 57\" — letter weight swells near the cursor. Needs a variable font; Inter is already loaded.", "categories": [ "role-chrome", "text", "type" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "circular-text", "type": "registry:block", "title": "circular text", "description": "\"badge/stamp = 58\" — rotating ring of type. Corner badges, seals, section markers.", "categories": [ "role-testimonial", "text", "type", "svg" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "text-path", "type": "registry:block", "title": "text on a path", "description": "\"caption rides 59\" — words travel along a drawn curve as you scroll. Scroll up and down over this card.", "categories": [ "role-type", "text", "type", "svg", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "typewriter", "type": "registry:block", "title": "typewriter", "description": "\"tagline types with 60\" — writes, pauses, deletes, rewrites. Simple and endlessly watchable.", "categories": [ "role-type", "text", "type", "js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "blur-reveal", "type": "registry:block", "title": "blur-in reveal", "description": "\"soft entrances use 61\" — characters sharpen out of a blur. Dreamier than 07.", "categories": [ "role-type", "text", "type", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "shine-sweep-text", "type": "registry:block", "title": "Shine sweep text", "description": "\"metallic type = 62\" — a light band sweeps through the letters forever. Zero JS.", "categories": [ "role-type", "text", "type", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "word-rotator", "type": "registry:block", "title": "word rotator", "description": "\"hero line rotates with 63\" — one slot in the sentence flips through your value props.", "categories": [ "role-hero", "text", "type", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "link-image-preview", "type": "registry:block", "title": "link image preview", "description": "\"index list gets 64\" — hovering a link floats its image along the cursor. Editorial index pages love this.", "categories": [ "role-chrome", "text", "type", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "wave-text", "type": "registry:block", "title": "wave text", "description": "\"playful accent = 65\" — letters ride a standing wave. Loaders, empty states, footers.", "categories": [ "role-type", "text", "type", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "gravity-letters", "type": "registry:block", "title": "gravity letters", "description": "\"404 page does 66\" — the headline lets go, bounces on the floor, reassembles. Personality in one click.", "categories": [ "role-type", "text", "type", "js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "burger-morph", "type": "registry:block", "title": "burger morph", "description": "\"menu icon = 67\" — three lines fold into an X. The detail everyone notices without noticing.", "categories": [ "role-nav", "interface", "micro", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "spotlight-reveal", "type": "registry:block", "title": "spotlight reveal", "description": "\"secret layer via 68\" — content only visible inside a torch beam that follows the cursor.", "categories": [ "role-chrome", "interface", "micro", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "border-beam", "type": "registry:block", "title": "Border beam", "description": "\"featured card wears 69\" — a comet circles the border. Marks the one thing you want eyes on.", "categories": [ "role-chrome", "interface", "micro", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "dot-grid-repel", "type": "registry:block", "title": "dot grid repel", "description": "\"section background = 70\" — a field of dots that flinches away from the cursor and springs back.", "categories": [ "role-background", "interface", "micro", "canvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "before-after", "type": "registry:block", "title": "before / after", "description": "\"proof section = 71\" — drag the divider between two states. Refurb work, retouching, redesigns.", "categories": [ "role-testimonial", "interface", "micro", "js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "accordion-columns", "type": "registry:block", "title": "accordion columns", "description": "\"category strip = 72\" — columns that yawn open on hover. Five categories, one elegant row.", "categories": [ "role-content", "interface", "micro", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "deck-swipe", "type": "registry:block", "title": "deck swipe", "description": "\"browse mode = 73\" — swipeable card stack. Lookbooks, product discovery, yes/no curation.", "categories": [ "role-gallery", "interface", "micro", "gsap", "pointer" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "fullscreen-menu", "type": "registry:block", "title": "fullscreen menu", "description": "\"nav opens with 74\" — the whole screen becomes the menu, links cascading in. Small sites feel massive.", "categories": [ "role-nav", "interface", "micro", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "elastic-tabs", "type": "registry:block", "title": "elastic tabs", "description": "\"filters snap with 75\" — the highlight pill overshoots and settles like it has mass.", "categories": [ "role-chrome", "interface", "micro", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "toast-stack", "type": "registry:block", "title": "toast stack", "description": "\"notifications = 76\" — events slide in, stack, and excuse themselves. Cart adds, saves, agent updates.", "categories": [ "role-form", "interface", "micro", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "skeleton-shimmer-loop", "type": "registry:block", "title": "skeleton shimmer loop", "description": "\"loading states use 77\" — content shape shimmers before data lands. This one loads on a loop.", "categories": [ "role-content", "interface", "micro", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "theme-flip", "type": "registry:block", "title": "theme flip", "description": "\"theme switch = 78\" — the new theme floods outward in a circle from the toggle. No hard swap.", "categories": [ "role-chrome", "interface", "micro", "gsap", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "infinite-tunnel", "type": "registry:block", "title": "infinite tunnel", "description": "\"intro flies through 79\" — endless forward motion through recycling geometry. Openers and 404s.", "categories": [ "role-hero", "webgl", "3d", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "starfield-warp-2d", "type": "registry:block", "title": "starfield warp (2D)", "description": "\"loading jump = 80\" — stars streak past at warp. Cheap, hypnotic, works everywhere.", "categories": [ "role-background", "webgl", "3d", "canvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "points-globe-2d", "type": "registry:block", "title": "points globe (2D)", "description": "\"global reach = 81\" — a rotating sphere of dots. Shipping maps, presence, network stories.", "categories": [ "role-background", "webgl", "3d", "canvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "wireframe-build", "type": "registry:block", "title": "wireframe build", "description": "\"product constructs via 82\" — the mesh draws itself into existence as you scroll.", "categories": [ "role-product", "webgl", "3d", "three", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "flow-field-2d", "type": "registry:block", "title": "flow field (2D)", "description": "\"living background = 83\" — particles tracing invisible wind. The most organic ambience per kilobyte.", "categories": [ "role-background", "webgl", "3d", "canvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "cloth-wave", "type": "registry:block", "title": "cloth wave", "description": "\"images drape with 84\" — imagery on rippling fabric. Lookbooks and campaign heroes.", "categories": [ "role-product", "webgl", "3d", "three", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "css-scroll-driven-animation", "type": "registry:block", "title": "CSS scroll-driven animation", "description": "\"cheap reveals via 85\" — scroll-linked animation with no JS at all. The free-performance version of 14.", "categories": [ "role-content", "platform-native", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "corner-shapes", "type": "registry:block", "title": "corner shapes", "description": "\"cards wear 86\" — squircles, scoops, notches, bevels. The anti-default corner language.", "categories": [ "role-chrome", "platform-native", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "native-carousel", "type": "registry:block", "title": "native carousel", "description": "\"sliders = 87\" — browser-native snap carousel, momentum and physics included. Drag/swipe it.", "categories": [ "role-gallery", "platform-native", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "anchored-tooltip", "type": "registry:block", "title": "anchored tooltip", "description": "\"tooltips via 88\" — elements that tether themselves to an anchor. Kills positioning libraries.", "categories": [ "role-chrome", "platform-native", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "living-text-fill", "type": "registry:block", "title": "Living text fill", "description": "\"masthead = 89\" — huge letters filled with a moving color field (or video, in production). One CSS property.", "categories": [ "role-type", "platform-native", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "snap-chapters", "type": "registry:block", "title": "snap chapters", "description": "\"story mode = 90\" — full-frame chapters with position dots. Decks, manifestos, product tours.", "categories": [ "role-product", "platform-native", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "fluid-ink-grid-advection-own", "type": "registry:block", "title": "fluid ink (grid advection, own mini-runtime)", "description": "\"hero is 91\" — ink that swirls and settles like liquid. (Full GPU Navier-Stokes = the WebGPU upgrade on radar.)", "categories": [ "role-hero", "heavy", "simulation" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "text-dissolve", "type": "registry:block", "title": "text dissolve", "description": "\"words exit with 92\" — type disintegrates into wind-blown particles and re-forms. Watch the loop.", "categories": [ "role-type", "heavy", "canvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "pixelation-transition", "type": "registry:block", "title": "pixelation transition", "description": "\"images swap via 93\" — mosaic up, resolve into the next image. Retro-digital section cuts.", "categories": [ "role-seam", "heavy", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "crt-treatment", "type": "registry:block", "title": "CRT treatment", "description": "\"archive footage = 94\" — scanlines, barrel curve, rolling band, phosphor flicker. Full broadcast nostalgia.", "categories": [ "role-background", "heavy", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "physics-letters", "type": "registry:block", "title": "physics letters", "description": "\"headline is 95\" — every letter is a rigid body. Visitors can't resist playing with it.", "categories": [ "role-type", "heavy", "js", "pointer" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "depth-parallax-photo", "type": "registry:block", "title": "depth parallax photo", "description": "\"product shots get 96\" — depth-map parallax makes flat photography lean like a hologram.", "categories": [ "role-product", "heavy", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "gooey-cursor-trail", "type": "registry:block", "title": "gooey cursor trail", "description": "\"cursor drips with 97\" — a liquid blob chases the pointer and melts away.", "categories": [ "role-chrome", "heavy", "svg" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "infinite-drag-field", "type": "registry:block", "title": "infinite drag field", "description": "\"explore mode = 98\" — the page as an endless desk you pan across. Moodboards, archives, collections.", "categories": [ "role-gallery", "heavy", "js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "audio-reactive", "type": "registry:block", "title": "audio-reactive", "description": "\"visuals hear with 99\" — real frequency analysis driving the graphics. This demo synthesizes its own beat.", "categories": [ "role-background", "heavy", "webaudio" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "image-tube", "type": "registry:block", "title": "image tube", "description": "\"collection flythrough = 100\" — a tunnel of imagery you travel through. Peak lookbook energy.", "categories": [ "role-gallery", "heavy", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "3d-configurator", "type": "registry:block", "title": "3D configurator", "description": "\"product page runs 101\" — live material and finish switching with the price following. This one is fully working.", "categories": [ "role-pricing", "commerce", "connected", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "ar-model-viewer", "type": "registry:block", "title": "AR model-viewer", "description": "\"products get 102\" — drag to inspect; on a phone this places the object in your room via AR. Feeds from our GLB pipeline.", "categories": [ "role-product", "commerce", "connected", "platform-native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "gift-finder-quiz", "type": "registry:block", "title": "gift finder quiz", "description": "\"gifting funnel = 103\" — 3 taps → curated picks. The single best documented ROI in jewelry e-comm (+64% gift conversion).", "categories": [ "role-form", "commerce", "connected", "quiz-picks" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "generative-art-seed", "type": "registry:block", "title": "generative art seed", "description": "\"backgrounds are 104\" — algorithmic one-of-ones; every visitor (or product) gets art nobody else has.", "categories": [ "role-product", "commerce", "connected", "canvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "live-presence", "type": "registry:block", "title": "live presence", "description": "\"add 105\" — other shoppers visible as ghost cursors + live counts. Social proof you can feel. (Supabase Realtime in production.)", "categories": [ "role-testimonial", "commerce", "connected", "realtime" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "agentic-storefront", "type": "registry:block", "title": "agentic storefront", "description": "\"wire 106\" — your catalog answering inside ChatGPT/Gemini via MCP tools. The new free distribution channel; checkout stays yours.", "categories": [ "role-form", "commerce", "connected", "mcp", "2026" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "generative-ui", "type": "registry:block", "title": "generative UI", "description": "\"chat answers as 107\" — the assistant replies with real product cards, not paragraphs. Upgrade path for 50 + 103.", "categories": [ "role-product", "commerce", "connected", "ai-sdk" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sequence-scrub", "type": "registry:block", "title": "sequence scrub", "description": "\"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.", "categories": [ "role-hero", "commerce", "connected", "canvas", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "cross-page-morph", "type": "registry:block", "title": "Cross-page morph", "description": "\"pages morph with 109\" — real multi-page navigation where shared elements fly between pages. Zero JS, zero router.", "categories": [ "role-seam", "frontier", "view-transitions" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stylized-water", "type": "registry:block", "title": "stylized water", "description": "\"product floats on 110\" — a living water surface with sun glint and moving light. Campaign-hero material.", "categories": [ "role-hero", "frontier", "three", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "rive-runtime", "type": "registry:block", "title": "Rive runtime", "description": "\"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.", "categories": [ "role-media", "frontier", "rive-runtime" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "gsap-pro-pack-showcase", "type": "registry:block", "title": "GSAP pro pack showcase", "description": "\"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.", "categories": [ "role-gallery", "frontier", "gsap-3-13", "free-now" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "vfx-js", "type": "registry:block", "title": "VFX-JS", "description": "\"treat sections with 113\" — drop-in WebGL effects on ordinary DOM elements, no shader writing. Section F powers, applied site-wide in minutes.", "categories": [ "role-media", "frontier", "vfx-js-core" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "lygia-shaders", "type": "registry:block", "title": "LYGIA shaders", "description": "\"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.", "categories": [ "role-background", "frontier", "lygia-xyz" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "webgpu-three-r184-isolated-import", "type": "registry:block", "title": "WebGPU (three r184, isolated import)", "description": "\"go WebGPU\" — the post-WebGL era: compute shaders, 100M particles, TSL. This card runs three r184's WebGPU renderer beside our r170 stack.", "categories": [ "role-background", "frontier", "webgpu", "r184" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "spline-scene", "type": "registry:block", "title": "Spline scene", "description": "\"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.)", "categories": [ "role-product", "frontier", "splinetool" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "saas-pricing", "type": "registry:block", "title": "SaaS pricing", "description": "\"pricing = 117\" — tiered table with billing toggle and rolling prices. The SaaS conversion workhorse.", "categories": [ "role-pricing", "domain", "saas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "fabric-finish-picker", "type": "registry:block", "title": "fabric & finish picker", "description": "\"PDPs get 118\" — the Herman Miller / HAY move: swatches swap material, price and lead time live. Sells the custom order.", "categories": [ "role-pricing", "domain", "daf" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "quote-builder", "type": "registry:block", "title": "quote builder", "description": "\"trade page runs 119\" — line items, quantities, trade discount, live totals. The DAF procurement intake, as a component.", "categories": [ "role-pricing", "domain", "procurement" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "moodboard-composer", "type": "registry:block", "title": "moodboard composer", "description": "\"clients play with 120\" — shop-the-room in reverse: visitors compose their space from your catalog. Engagement that converts to carts.", "categories": [ "role-product", "domain", "interior-design" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "spec-comparison", "type": "registry:block", "title": "spec comparison", "description": "\"compare with 121\" — side-by-side specs where the differences light up. Kills choice paralysis at the decision moment.", "categories": [ "role-product", "domain", "daf", "saas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "lead-time-board", "type": "registry:block", "title": "lead-time board", "description": "\"availability = 122\" — live stock and lead-time status per line. In production this reads supplier feeds through Nimos.", "categories": [ "role-stats", "domain", "procurement", "live" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "360-viewer", "type": "registry:block", "title": "360° viewer", "description": "\"PDPs spin with 123\" — the multi-angle inspection jewelry buyers demand. Production feeds it a photo turntable or our GLBs.", "categories": [ "role-gallery", "boutique", "commerce", "pointer" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "engraving-preview", "type": "registry:block", "title": "engraving preview", "description": "\"personalize with 124\" — live engraving + metal preview with the price following. The +30–50% AOV tool. Type in it.", "categories": [ "role-pricing", "boutique", "commerce" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sizing-tool", "type": "registry:block", "title": "sizing tool", "description": "\"sizing = 125\" — calibrate against a bank card, then sizes render at TRUE physical scale. The returns-killer.", "categories": [ "role-product", "boutique", "commerce" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "product-motion-loop", "type": "registry:block", "title": "product motion loop", "description": "\"pieces move with 126\" — 6-second light-play loops on PDPs. +15–25% documented buy lift over $200.", "categories": [ "role-product", "boutique", "commerce", "canvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "provenance-badges", "type": "registry:block", "title": "provenance badges", "description": "\"certs via 127\" — recycled metal, lab-grown, chain-of-custody — expandable at the decision point. Tap them.", "categories": [ "role-testimonial", "boutique", "commerce", "trust" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "project-calculator", "type": "registry:block", "title": "project calculator", "description": "\"intake = 128\" — dimensions in, costed plan out, live. The DAF brief as an instrument instead of a form.", "categories": [ "role-pricing", "procurement", "b2b" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "spec-sheet", "type": "registry:block", "title": "spec sheet", "description": "\"submittals via 129\" — branded spec sheets generated on the spot, print-ready. Non-negotiable in contract furniture.", "categories": [ "role-product", "procurement", "b2b" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "trade-portal-gate", "type": "registry:block", "title": "trade portal gate", "description": "\"trade gate = 130\" — the login wall that unlocks dealer pricing. Commitment signal in, repeat business out.", "categories": [ "role-pricing", "procurement", "b2b" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "project-timeline", "type": "registry:block", "title": "project timeline", "description": "\"delivery clarity via 131\" — phases on a week grid with a live today-line. Tap a bar. Answers \"when\" before it's asked.", "categories": [ "role-content", "procurement", "b2b" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "dimension-diagrams", "type": "registry:block", "title": "dimension diagrams", "description": "\"specs draw with 132\" — interactive footprints and clearance zones. Herman-Miller-depth PDPs.", "categories": [ "role-product", "procurement", "b2b", "daf" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sample-request", "type": "registry:block", "title": "sample request", "description": "\"swatches ship via 133\" — pick three, address, done. The physical-touch bridge for fabric-sensitive orders.", "categories": [ "role-product", "procurement", "b2b", "daf" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "volume-pricing", "type": "registry:block", "title": "volume pricing", "description": "\"tiers shown via 134\" — buyers watch themselves unlock the next discount. Self-qualification without a sales call.", "categories": [ "role-pricing", "domain", "b2b" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "shop-room", "type": "registry:block", "title": "shop the room", "description": "\"editorial sells with 135\" — tap the pulsing dots inside the scene. Photography becomes a storefront.", "categories": [ "role-product", "domain", "daf" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "assembly-player", "type": "registry:block", "title": "assembly player", "description": "\"guides via 136\" — stepped assembly with a parts checklist. Pre-purchase confidence, post-purchase calm.", "categories": [ "role-product", "domain", "daf" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "bento-live-number", "type": "registry:block", "title": "bento live number", "description": "\"features = 137\" — the 2026 SaaS standard: mixed-size capability cards that read in five seconds.", "categories": [ "role-content", "domain", "saas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "integration-wall", "type": "registry:block", "title": "integration wall", "description": "\"ecosystem via 138\" — the filterable logo wall. Instant credibility for Nimos or any platform surface.", "categories": [ "role-testimonial", "domain", "saas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "changelog-feed", "type": "registry:block", "title": "changelog feed", "description": "\"alive-ness via 139\" — a living what's-new feed. Watch it: entries keep arriving. Pairs with The Signet.", "categories": [ "role-content", "domain", "saas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "prompt-playground", "type": "registry:block", "title": "prompt playground", "description": "\"playground = 140\" — visitors feel the product before signup. Live token/cost math builds AI-product trust.", "categories": [ "role-product", "ai", "tokens" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "financing-callout", "type": "registry:block", "title": "financing callout", "description": "\"reframe with 141\" — $1,240 becomes $104/mo at the exact hesitation moment. Standard on Burrow, Floyd, and fine jewelry.", "categories": [ "role-pricing", "ai", "commerce" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "education-first-price", "type": "registry:block", "title": "education-first price", "description": "\"DAF cards use 142\" — every price opens its own explanation and links to a lesson. Transparency as the differentiator.", "categories": [ "role-pricing", "daf" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "costed-plan-preview", "type": "registry:block", "title": "costed plan preview", "description": "\"plans render as 143\" — the DAF signature artifact: a costed plan with the margin visible, not hidden. In production this reads the live catalog.", "categories": [ "role-pricing", "daf" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "service-lifecycle", "type": "registry:block", "title": "service lifecycle", "description": "\"services read as 144\" — design through decommission as one continuum. Clients see the whole relationship, not a transaction.", "categories": [ "role-content", "daf" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "lifeware-card", "type": "registry:block", "title": "Lifeware card", "description": "\"Lifeware presents as 145\" — the one-time framing is the product. The card leads with it.", "categories": [ "role-product", "daf" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "coordinated-install-flow", "type": "registry:block", "title": "coordinated install flow", "description": "\"install section = 146\" — the compliant referral pattern: no named partner, no fake live booking, just the honest flow.", "categories": [ "role-form", "daf", "honest-copy" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "brief-starter", "type": "registry:block", "title": "brief starter", "description": "\"every page funnels to 147\" — three inputs of momentum, then a warm handoff to the real /procurement intake.", "categories": [ "role-form", "daf", "commerce" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "learn-hub", "type": "registry:block", "title": "Learn hub", "description": "\"/learn is 148\" — the education-first spine: every price on the site links into one of these.", "categories": [ "role-pricing", "daf", "education" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "command-palette-wired-whole-menu", "type": "registry:block", "title": "command palette (wired to the whole menu)", "description": "\"add 149\" — the defining SaaS interaction. This one actually navigates the menu: try \"glass\" or \"128\".", "categories": [ "role-nav", "signature", "k", "wired-live" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "velocity-image-bend", "type": "registry:block", "title": "velocity image bend", "description": "\"galleries bend with 150\" — THE Awwwards gallery signature: imagery that curves with scroll inertia and settles flat.", "categories": [ "role-gallery", "signature", "three", "lenis" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "footer-curtain", "type": "registry:block", "title": "Footer curtain", "description": "\"site ends with 151\" — the page rises off a fixed footer. Half of all award sites end this way; ~10 lines of CSS.", "categories": [ "role-footer", "signature", "css-sticky" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "dynamic-island", "type": "registry:block", "title": "dynamic island", "description": "\"status lives in 152\" — one pill fluidly morphing between states: order placed, shipping, arrived. Watch it cycle.", "categories": [ "role-chrome", "signature", "gsap-spring" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "split-flap-board", "type": "registry:block", "title": "split-flap board", "description": "\"departures via 153\" — Solari-board mechanics for headlines, stats, drop announcements.", "categories": [ "role-type", "signature", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "progressive-blur-content", "type": "registry:block", "title": "progressive blur content", "description": "\"edges melt with 154\" — the Apple look: content dissolving into directional blur instead of hard clips.", "categories": [ "role-chrome", "signature", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "galaxy-generator", "type": "registry:block", "title": "galaxy generator", "description": "\"cosmos = 155\" — a parameterized spiral galaxy you can reshape live. The most-loved demo in the three.js world.", "categories": [ "role-background", "signature", "three", "20k-points" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "reaction-diffusion", "type": "registry:block", "title": "reaction-diffusion", "description": "\"living texture = 156\" — Turing patterns growing in real time. Chemistry, not animation.", "categories": [ "role-background", "signature", "glsl", "ping-pong" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "svg-organics", "type": "registry:block", "title": "SVG organics", "description": "\"blobs breathe with 157\" — living shapes from SVG filter chemistry alone. No canvas, no WebGL.", "categories": [ "role-background", "signature", "feturbulence" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "directional-hover-pack", "type": "registry:block", "title": "directional hover pack", "description": "\"hovers know direction via 158\" — fills that enter where your cursor entered, plus the macOS dock magnify.", "categories": [ "role-nav", "signature", "js", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "voronoi-shatter", "type": "registry:block", "title": "voronoi shatter", "description": "\"transitions break with 159\" — imagery fractures into shards from your click point, then heals.", "categories": [ "role-seam", "signature", "canvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "slime-mold-physarum", "type": "registry:block", "title": "slime mold (Physarum)", "description": "\"living veins = 160\" — thousands of agents finding paths like Physarum. Organic infrastructure, growing live.", "categories": [ "role-background", "signature", "simulation" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "zoom-portal", "type": "registry:block", "title": "zoom portal", "description": "\"chapters dive via 161\" — scroll zooms INTO the image until it becomes the next section. The Apple transition.", "categories": [ "role-seam", "signature", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "kinetic-3d-type", "type": "registry:block", "title": "kinetic 3D type", "description": "\"words orbit with 162\" — typography as geometry: text wrapped on a rotating drum. The image tube's louder sibling.", "categories": [ "role-type", "signature", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "observer-swipe-motionpath", "type": "registry:block", "title": "Observer swipe + MotionPath", "description": "\"one-pager runs 163\" — unified wheel/touch section-swiping plus elements riding drawn paths. Both GSAP plugins, both free now.", "categories": [ "role-gallery", "signature", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "commerce-micro-pack", "type": "registry:block", "title": "commerce micro pack", "description": "\"cart moments = 164\" — the product flies an arc into the cart, confetti on landing, live drop countdown with a draining stock bar.", "categories": [ "role-hero", "signature", "commerce" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "css-natives-pack", "type": "registry:block", "title": "CSS natives pack", "description": "\"go native with 165\" — hover the bars, pop the popover, open the details. Zero JavaScript in any of them.", "categories": [ "role-chrome", "signature", "2026-css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "css-3d-diorama", "type": "registry:block", "title": "CSS 3D diorama", "description": "\"tiny world via 166\" — a whole room in stacked CSS transforms. Story scenes without a single polygon.", "categories": [ "role-background", "signature", "pure-css-3d" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "anchor-morph-dialog", "type": "registry:block", "title": "anchor morph dialog", "description": "\"dialogs grow from 167\" — the panel morphs out of the button you pressed, and returns into it. No teleporting modals.", "categories": [ "role-cta", "signature", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "speculation-rules-badge", "type": "registry:block", "title": "speculation rules badge", "description": "\"instant nav via 168\" — one script tag in the head. The cheapest expensive-feeling upgrade on the entire menu.", "categories": [ "role-nav", "signature", "platform-native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sound-design-layer", "type": "registry:block", "title": "sound design layer", "description": "\"the site hums with 169\" — the missing sensory channel (~70% of award winners ship audio). Off by default, always.", "categories": [ "role-chrome", "signature", "webaudio", "opt" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "reasoning-disclosure-chat", "type": "registry:block", "title": "reasoning-disclosure chat", "description": "\"chat anatomy = 170\" — collapsible thinking, tool-call chips, hoverable citations. The UI standard our section H predates.", "categories": [ "role-dashboard", "signature", "2026-ai-ui" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "browser-ai-search-transformers-js", "type": "registry:block", "title": "in-browser AI search (transformers.js)", "description": "\"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.", "categories": [ "role-type", "heavy", "frontier", "transformers-js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sql-browser", "type": "registry:block", "title": "SQL in the browser", "description": "\"172 powers the dashboards\" — real SQLite compiled to WASM. Edit the query — it's live.", "categories": [ "role-dashboard", "heavy", "frontier", "sqlite-wasm" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "webcam-ring-try-mediapipe", "type": "registry:block", "title": "webcam ring try-on (MediaPipe)", "description": "\"try-on = 173\" — the census's #1 boutique conversion item: a ring rendered on your actual finger, live, in-browser.", "categories": [ "role-product", "heavy", "frontier", "mediapipe" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "gaussian-splats-spark", "type": "registry:block", "title": "Gaussian splats (Spark)", "description": "\"products become 174\" — phone-captured photoreal 3D with true view-dependent light. The WB endgame for product pages.", "categories": [ "role-product", "heavy", "frontier", "spark" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "idle-attract", "type": "registry:block", "title": "idle attract", "description": "\"the site performs 175\" — when the visitor goes still, the page starts a self-running show. Museum-mode; any movement hands control back.", "categories": [ "role-chrome", "global", "feel", "js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "ambient-media-glow", "type": "registry:block", "title": "Ambient media glow", "description": "\"media glows via 176\" — the YouTube ambient trick: imagery leaks its colors into the room around it.", "categories": [ "role-media", "global", "feel", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "reading-progress", "type": "registry:block", "title": "reading progress", "description": "\"long reads get 177\" — live percent-read and time-left. This one measures the actual menu as you scroll it.", "categories": [ "role-stats", "global", "feel" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "selection-amp-scrollbar", "type": "registry:block", "title": "Selection & scrollbar", "description": "\"brand the chrome with 178\" — selection color + scrollbar styling. The cheapest polish nobody skips on award sites.", "categories": [ "role-chrome", "global", "feel", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stroke-fill-scrub", "type": "registry:block", "title": "stroke-fill scrub", "description": "\"headlines flood with 179\" — hollow type filling as you scroll past. The SOTD hero staple.", "categories": [ "role-hero", "text", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "font-flicker", "type": "registry:block", "title": "font flicker", "description": "\"chaos type = 180\" — letters cycle through typefaces like a ransom note, then settle. Playful, editorial.", "categories": [ "role-type", "text", "js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hand-drawn-annotations", "type": "registry:block", "title": "hand-drawn annotations", "description": "\"mark it up with 181\" — marker circles and underlines that draw themselves. Human warmth on digital pages.", "categories": [ "role-type", "text", "svg" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "column-speed-grid", "type": "registry:block", "title": "column speed grid", "description": "\"galleries drift with 182\" — center column slow, edges fast. Instant depth for image grids.", "categories": [ "role-gallery", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "infinite-loop-scroll", "type": "registry:block", "title": "infinite loop scroll", "description": "\"the page wraps via 183\" — no top, no bottom. Collections and showreels as a loop.", "categories": [ "role-gallery", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hover-preview-rows", "type": "registry:block", "title": "hover preview rows", "description": "\"indexes preview via 184\" — list rows that play a live preview only while hovered. Agency-index energy.", "categories": [ "role-chrome", "hover", "micro", "canvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "context-cursor-labels", "type": "registry:block", "title": "context cursor labels", "description": "\"the cursor speaks with 185\" — hovering media, the cursor grows and says what a click will do.", "categories": [ "role-chrome", "hover", "micro", "cursor" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "click-ripple", "type": "registry:block", "title": "click ripple", "description": "\"taps ripple via 186\" — the press radiates from the exact touch point. Tactile confirmation.", "categories": [ "role-chrome", "hover", "micro", "material" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "icon-morphs", "type": "registry:block", "title": "icon morphs", "description": "\"icons transform via 187\" — play becomes pause, plus becomes close, hearts pop full. Click each.", "categories": [ "role-chrome", "hover", "micro", "morphsvg" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hold-confirm", "type": "registry:block", "title": "hold to confirm", "description": "\"destructive actions use 188\" — press and hold; the ring fills; letting go cancels. Friction exactly where it belongs.", "categories": [ "role-chrome", "hover", "micro", "js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "ribbon-trail", "type": "registry:block", "title": "ribbon trail", "description": "\"the cursor trails 189\" — a glossy 3D ribbon flowing behind the pointer. Lusion signature.", "categories": [ "role-chrome", "webgl", "3d", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "god-rays", "type": "registry:block", "title": "god rays", "description": "\"light shafts via 190\" — volumetric beams raking through the scene. Cathedral mood on demand.", "categories": [ "role-background", "webgl", "3d", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "points-morph", "type": "registry:block", "title": "points morph", "description": "\"forms become forms with 191\" — a cloud of points flowing between sphere, torus and helix.", "categories": [ "role-background", "webgl", "3d", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "painterly-filter", "type": "registry:block", "title": "painterly filter", "description": "\"imagery painted via 192\" — live oil-paint stylization over the picture. Editorial art direction, zero Photoshop.", "categories": [ "role-gallery", "shader", "glsl" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "velocity-aberration", "type": "registry:block", "title": "velocity aberration", "description": "\"speed splits color via 193\" — RGB channels separate with scroll velocity and snap back at rest.", "categories": [ "role-gallery", "shader", "glsl", "lenis" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "drag-reorder-grid", "type": "registry:block", "title": "drag reorder grid", "description": "\"boards reorder via 194\" — pick up, hover, drop; neighbors glide aside. Kanban physics.", "categories": [ "role-dashboard", "motion-system", "pointer", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stagger-playground", "type": "registry:block", "title": "stagger playground", "description": "\"waves ripple from 195\" — the same grid, four different stagger origins. Choreography vocabulary in one card.", "categories": [ "role-content", "motion-system", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "shimmer-resolve", "type": "registry:block", "title": "shimmer resolve", "description": "\"answers resolve via 196\" — skeleton shimmer crystallizing into words, line by line. How 2026 AI products feel fast.", "categories": [ "role-content", "ai", "ai-ui" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "embedding-map", "type": "registry:block", "title": "embedding map", "description": "\"the catalog as a galaxy = 197\" — items positioned by semantic similarity. Browse by neighborhood, not category.", "categories": [ "role-background", "ai", "semantic-space" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "terrain-flyover", "type": "registry:block", "title": "terrain flyover", "description": "\"cruise over 198\" — endless procedural landscape sliding under the camera, fog to the horizon.", "categories": [ "role-background", "webgl", "3d", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "portal-window", "type": "registry:block", "title": "portal window", "description": "\"another world via 199\" — a framed window showing a second live scene inside the first.", "categories": [ "role-seam", "webgl", "3d", "render-target" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "jelly-blob", "type": "registry:block", "title": "jelly blob", "description": "\"products wobble via 200\" — a mesh with spring physics: poke it and it jiggles like it has mass.", "categories": [ "role-product", "webgl", "3d", "soft-body" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "mirror-floor", "type": "registry:block", "title": "mirror floor", "description": "\"showroom floor = 201\" — the product doubled in a soft reflection. Instant premium staging.", "categories": [ "role-product", "webgl", "3d", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sticky-state", "type": "registry:block", "title": "sticky-state", "description": "\"headers know via 202\" — the bar restyles itself the moment it sticks. Zero JS where supported; scroll the box.", "categories": [ "role-nav", "platform-native", "scroll-state" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "has-magic", "type": "registry:block", "title": ":has() magic", "description": "\"forms self-aware via 203\" — parents styled by their children's state. The selector that changed CSS architecture.", "categories": [ "role-form", "platform-native", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "container-queries-slider", "type": "registry:block", "title": "container queries slider", "description": "\"components adapt via 204\" — drag the slider: the card restyles by its container, not the viewport. Design-system-grade responsiveness.", "categories": [ "role-gallery", "platform-native", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "text-wrap-toggle", "type": "registry:block", "title": "text-wrap toggle", "description": "\"headlines breathe via 205\" — text-wrap: balance kills orphan words. The cheapest typography tell of a cared-for site.", "categories": [ "role-type", "platform-native", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "order-tracker", "type": "registry:block", "title": "order tracker", "description": "\"orders narrate via 206\" — the Domino's pattern: a living stepper from placed to at-your-door.", "categories": [ "role-content", "commerce", "connected" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "booking-slots", "type": "registry:block", "title": "booking slots", "description": "\"consults book via 207\" — the cal.com pattern: pick a day, pick a slot, done in two taps.", "categories": [ "role-form", "commerce", "connected", "scheduling" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "speech-input", "type": "registry:block", "title": "speech input", "description": "\"voice input via 208\" — hold the button, speak, watch it transcribe. The input side of 55.", "categories": [ "role-form", "frontier", "ai" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "eyedropper", "type": "registry:block", "title": "EyeDropper", "description": "\"sample reality via 209\" — the native color picker that reaches OUTSIDE the browser. Configurators that match your wall paint.", "categories": [ "role-form", "frontier", "native-api" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "gift-wrap", "type": "registry:block", "title": "gift wrap", "description": "\"gifting closes with 210\" — wrap, ribbon and a handwritten note preview. AOV up, returns down.", "categories": [ "role-product", "boutique", "commerce" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "wishlist-burst", "type": "registry:block", "title": "wishlist burst", "description": "\"saves feel good via 211\" — the heart pops with particles. Dopamine at the save moment.", "categories": [ "role-product", "boutique", "commerce", "micro" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "ugc-wall", "type": "registry:block", "title": "UGC wall", "description": "\"worn by real people = 212\" — the as-seen-on wall, hover to see who. Social proof as texture.", "categories": [ "role-testimonial", "boutique", "commerce", "social-proof" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stone-comparer", "type": "registry:block", "title": "stone comparer", "description": "\"stones explain via 213\" — cut, clarity and glow compared visually, not in a spec table.", "categories": [ "role-product", "boutique", "commerce" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "care-ritual", "type": "registry:block", "title": "care ritual", "description": "\"aftercare = 214\" — a stepped care ritual that makes owning the piece feel like membership.", "categories": [ "role-content", "boutique", "commerce", "post-purchase" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "punch-list", "type": "registry:block", "title": "punch list", "description": "\"handover runs 215\" — the install punch list, items resolving live until sign-off unlocks.", "categories": [ "role-content", "procurement", "b2b" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "delivery-route", "type": "registry:block", "title": "delivery route", "description": "\"freight visible via 216\" — the shipment tracing its route with live position. Calm through visibility.", "categories": [ "role-content", "procurement", "b2b", "logistics" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "warranty-flow", "type": "registry:block", "title": "warranty flow", "description": "\"claims resolve via 217\" — photo, issue, resolution path in three taps. Service as a product feature.", "categories": [ "role-product", "procurement", "b2b", "service" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "budget-vs-actual", "type": "registry:block", "title": "budget vs actual", "description": "\"money honest via 218\" — paired bars per category, variance called out. Trust through numbers that move.", "categories": [ "role-stats", "procurement", "b2b" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "margin-what-if", "type": "registry:block", "title": "margin what-if", "description": "\"teach the 20% via 219\" — a slider showing what different margins would do to service quality. Radical transparency as a lesson.", "categories": [ "role-gallery", "daf", "education" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "supplier-scorecard", "type": "registry:block", "title": "supplier scorecard", "description": "\"suppliers ranked via 220\" — lead-time reliability, QC pass rate, freight damage — the vetting made visible.", "categories": [ "role-stats", "daf" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "refurb-roi", "type": "registry:block", "title": "refurb ROI", "description": "\"refurb sells via 221\" — desks you own vs replacement cost, savings counted live. The lifecycle pitch as an instrument.", "categories": [ "role-pricing", "daf", "calculator" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "compression-streams", "type": "registry:block", "title": "Compression Streams", "description": "\"exports shrink via 222\" — browser-native compression for CSV/JSON downloads. Boring, Baseline, free.", "categories": [ "role-dashboard", "heavy", "frontier", "platform-native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "web-share", "type": "registry:block", "title": "Web Share", "description": "\"sharing native via 223\" — the OS share sheet, not a row of social icons. One API call.", "categories": [ "role-chrome", "heavy", "frontier", "platform-native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "device-signals", "type": "registry:block", "title": "device signals", "description": "\"the page adapts via 224\" — battery, connection speed, memory, cores: real signals for serving lighter experiences when it matters.", "categories": [ "role-dashboard", "heavy", "frontier", "platform-native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "worker-rendering", "type": "registry:block", "title": "worker rendering", "description": "\"heavy charts via 225\" — rendering moved off the main thread entirely. Dashboards that never stutter.", "categories": [ "role-background", "heavy", "frontier", "offscreencanvas" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "file-save", "type": "registry:block", "title": "file save", "description": "\"deliverables export via 226\" — plans, quotes and spec sheets leaving the browser as real files.", "categories": [ "role-form", "heavy", "frontier", "platform-native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "rich-clipboard", "type": "registry:block", "title": "rich clipboard", "description": "\"copy beautifully via 227\" — rich HTML hits the clipboard, not mangled plain text.", "categories": [ "role-type", "heavy", "frontier", "platform-native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "card-stack-scroll", "type": "registry:block", "title": "card stack scroll", "description": "\"sections stack via 228\" — panels pile up and settle as you scroll; the one beneath dims and recedes. The Apple keynote scroll.", "categories": [ "role-content", "signature", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "liquid-glass", "type": "registry:block", "title": "liquid glass", "description": "\"nav wears glass — 229\" — the 2026 Apple material: near-clear center, heavy refraction at the rim, specular top edge. Pure CSS.", "categories": [ "role-nav", "signature", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "exploded-assembly", "type": "registry:block", "title": "exploded assembly", "description": "\"the product comes apart with 230\" — every component drifts to its exploded position on the slider. Flat-pack honesty as a hero moment.", "categories": [ "role-hero", "signature", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "3d-hotspots", "type": "registry:block", "title": "3D hotspots", "description": "\"specs live on the object — 231\" — annotations pinned to 3D anchor points, fading as they rotate out of view. Occlusion-aware.", "categories": [ "role-product", "signature", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "showroom-walkthrough", "type": "registry:block", "title": "showroom walkthrough", "description": "\"walk the room via 232\" — a camera on a spline path through a furnished interior, scrubbed by scroll. The Igloo Inc. archetype.", "categories": [ "role-product", "signature", "three", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "day-night-room", "type": "registry:block", "title": "day / night room", "description": "\"give it evenings — 233\" — one click and the sun hands off to the lamps: every light, color and shadow lerps. Nothing snaps.", "categories": [ "role-product", "signature", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "webgpu-compute-particles-tsl", "type": "registry:block", "title": "WebGPU compute particles (TSL)", "description": "\"a hundred-thousand-particle budget: 234\" — position and velocity never leave the GPU. TSL compute shaders, the 2026 differentiator.", "categories": [ "role-stats", "signature", "webgpu" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sdf-3d-type-troika", "type": "registry:block", "title": "SDF 3D type (troika)", "description": "\"type is geometry — 235\" — crisp signed-distance-field text in WebGL, sharp at any zoom. Type your own headline into the scene.", "categories": [ "role-type", "signature", "troika" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "dotlottie", "type": "registry:block", "title": "dotLottie", "description": "\"motion graphics drop in via 236\" — After Effects animation playing on a wasm renderer. The designer's tool, Rive's older sibling.", "categories": [ "role-media", "signature", "lottie" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "gallery-expand-flip", "type": "registry:block", "title": "gallery expand (FLIP)", "description": "\"gallery breathes with 237\" — a thumbnail FLIPs into the full frame and back, siblings hold their ground, backdrop blurs.", "categories": [ "role-background", "signature", "gsap" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "floorplan-dropper", "type": "registry:block", "title": "floorplan dropper", "description": "\"plan the floor with 238\" — clients drop furniture onto their floorplan and watch the budget build. A brief that draws itself.", "categories": [ "role-pricing", "signature", "working-tool" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "upholstery-touch", "type": "registry:block", "title": "upholstery touch", "description": "\"let them touch the fabric — 239\" — a velvet swatch that dents under the pointer and springs back. Sheen, nap, give: tactility on a screen.", "categories": [ "role-product", "signature", "three" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "velocity-adaptive-seam", "type": "registry:block", "title": "velocity-adaptive seam", "description": "\"seams breathe with 240\" — rush and the transition cuts short; linger and it plays full. Juries score this pacing explicitly.", "categories": [ "role-seam", "seam", "pacing" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "shared-element-handoff", "type": "registry:block", "title": "shared-element handoff", "description": "\"carry it across via 241\" — one element persists through the seam, scrubbed and reversible. The single-continuous-surface trick.", "categories": [ "role-seam", "seam", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "scene-blend-render-targets", "type": "registry:block", "title": "scene blend (render targets)", "description": "\"acts dissolve through 242\" — both scenes render to textures; a noisy edge blends them. How award pipelines hand one world to the next.", "categories": [ "role-seam", "seam", "three", "render-targets" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "no-false-floors", "type": "registry:block", "title": "no false floors", "description": "\"no dead ends — 243\" — NN/g's false-floor fix: if a section ever looks finished, people stop. Cut-off type + peek + idle nudge.", "categories": [ "role-seam", "seam", "ux-law" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "same-doc-view-transition", "type": "registry:block", "title": "same-doc View Transition", "description": "\"variants swap via 244\" — document.startViewTransition morphs any DOM change natively. The atelier's variant switcher runs on this.", "categories": [ "role-seam", "seam", "platform-native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "device-tier-gate", "type": "registry:block", "title": "device tier gate", "description": "\"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.", "categories": [ "role-pricing", "seam", "fallback" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "virtual-scroll-stage", "type": "registry:block", "title": "virtual scroll stage", "description": "\"own the scroll via 246\" — wheel and touch feed a virtual value; everything eases toward it. How ZERO-class narratives are driven.", "categories": [ "role-form", "seam", "input" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "iris-seam", "type": "registry:block", "title": "iris seam", "description": "\"close the act with 247\" — a clip-path iris scrubbed by scroll, centered on the pointer. A seam that feels aimed at you.", "categories": [ "role-seam", "seam", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "server-sent-stream", "type": "registry:block", "title": "server-sent stream", "description": "\"progress streams via 248\" — Server-Sent Events from a live function. The primitive under every AI typing effect and build log.", "categories": [ "role-stats", "backend", "sse" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "edge-vs-region-race", "type": "registry:block", "title": "edge vs region race", "description": "\"show the wire with 249\" — live round-trip times to both runtimes, with the regions they answered from.", "categories": [ "role-dashboard", "backend" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "intake-inbox", "type": "registry:block", "title": "intake validation", "description": "\"the form is alive — 250\" — a real transactional email pipeline. The difference between a brochure and a business.", "categories": [ "role-form", "form", "validation" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "live-guestbook", "type": "registry:block", "title": "live guestbook", "description": "\"visitors persist via 251\" — a real Postgres table behind RLS policies. State that survives the tab.", "categories": [ "role-nav", "backend", "supabase" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "live-presence-supabase-realtime", "type": "registry:block", "title": "live presence (Supabase Realtime)", "description": "\"the room breathes with 252\" — websocket presence: who's here right now, joining and leaving live.", "categories": [ "role-testimonial", "backend", "realtime" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "cold-start", "type": "registry:block", "title": "cold start", "description": "\"explain serverless via 253\" — first hit boots an instance (cold), second reuses it (warm), with real timings and the region.", "categories": [ "role-dashboard", "backend" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "passkeys", "type": "registry:block", "title": "passkeys", "description": "\"login is a fingerprint — 254\" — real WebAuthn create/assert against your platform authenticator. Shipping without this is security debt now.", "categories": [ "role-form", "backend", "webauthn" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "webhook-signatures", "type": "registry:block", "title": "webhook signatures", "description": "\"trust the hooks via 255\" — payload signed client-side, verified server-side; flip one byte and watch it get rejected.", "categories": [ "role-dashboard", "backend", "hmac" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "cache-probe", "type": "registry:block", "title": "cache probe", "description": "\"speed is a header — 256\" — the CDN caching dance shown with real responses. Why fast sites feel free to run.", "categories": [ "role-nav", "backend", "cdn" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "server-drawn-image", "type": "registry:block", "title": "server-drawn image", "description": "\"links unfurl via 257\" — a function draws the social card on demand: one endpoint, infinite personalized images.", "categories": [ "role-media", "backend", "og-image" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "menu-s-mcp-server", "type": "registry:block", "title": "the menu's MCP server", "description": "\"agents shop the menu — 258\" — 2026's rule: without an MCP surface your systems are invisible to AI. The catalog serves humans AND agents.", "categories": [ "role-dashboard", "backend", "agentic" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "durable-workflow-sim", "type": "registry:block", "title": "durable workflow (sim)", "description": "\"jobs survive via 259\" — durable execution, the 2026 default for AI pipelines. Simulated here; the real engines wire in from one SDK.", "categories": [ "role-dashboard", "backend", "simulation" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sync-engine-sim", "type": "registry:block", "title": "sync engine (sim)", "description": "\"it feels local via 260\" — optimistic writes, server reconciliation, offline queue that flushes. The Linear feel, the 2026 category.", "categories": [ "role-dashboard", "backend", "simulation" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "idempotency-sim", "type": "registry:block", "title": "idempotency (sim)", "description": "\"charge once via 261\" — the same spam of clicks, with and without an idempotency key. Why nobody gets billed twice.", "categories": [ "role-dashboard", "backend", "simulation" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "queue-backpressure-sim", "type": "registry:block", "title": "queue backpressure (sim)", "description": "\"absorb the spike via 262\" — push the producer past the consumer and watch the queue fill, then overflow. Every outage post-mortem, one slider.", "categories": [ "role-gallery", "backend", "simulation" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "jwt-anatomy-real-webcrypto", "type": "registry:block", "title": "JWT anatomy (real WebCrypto)", "description": "\"sessions decoded via 263\" — the token every API checks, taken apart live: tamper with any part and verification fails.", "categories": [ "role-auth", "backend", "real-crypto" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "row-level-security-sim", "type": "registry:block", "title": "row-level security (sim)", "description": "\"the DB is the bouncer — 264\" — row-level security visualized: switch users, rows vanish. Forget a WHERE clause and nothing leaks.", "categories": [ "role-dashboard", "backend", "simulation" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "verification-code-entry", "type": "registry:block", "title": "Verification code entry", "description": ""code entry is boxed" — six separated digits with a focus ring. The step everyone builds badly.", "categories": [ "role-auth", "auth", "form", "2fa" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "magic-link-sign", "type": "registry:block", "title": "Magic-link sign-in", "description": ""sign-in is a magic link" — one field, no password. The visual only; wire it to your own auth.", "categories": [ "role-auth", "auth", "form", "sign", "sign-in" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "horizontal-bar-comparison", "type": "registry:block", "title": "Horizontal bar comparison", "description": ""stats are <n>" — three horizontal bars with one emphasised; reach for it when the story is relative size, not absolute figures.", "categories": [ "role-stats", "stats", "comparison", "bars", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "before-after-credibility-pairing", "type": "registry:block", "title": "Before/after credibility pairing", "description": ""proof is <n>" — a plain panel next to a refined one; reach for it when the credibility argument is craft, not a number.", "categories": [ "role-testimonial", "testimonial", "comparison", "craft", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "bento-grid-one-metric-emphasised", "type": "registry:block", "title": "Bento grid, one metric emphasised", "description": ""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.", "categories": [ "role-stats", "stats", "bento", "grid", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "counter-row-unit-labels", "type": "registry:block", "title": "Counter row with unit labels", "description": ""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.", "categories": [ "role-stats", "stats", "counter", "js" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "credential-ledger", "type": "registry:block", "title": "Credential ledger", "description": ""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.", "categories": [ "role-testimonial", "testimonial", "credentials", "trust", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "inline-field-cta", "type": "registry:block", "title": "Inline-field CTA", "description": ""one field and go" — a single input with the submit sitting inside it. The lowest-friction ask there is.", "categories": [ "role-cta", "cta", "form", "capture" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "split-cta", "type": "registry:block", "title": "Split CTA", "description": ""split the ask" — copy on the left, the action on the right, hairline between. Reads as calm, converts like a banner.", "categories": [ "role-cta", "cta", "layout", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "statement-cta", "type": "registry:block", "title": "Statement CTA", "description": ""the ask is a statement" — one full-bleed line and an arrow link. No box, no button, no noise.", "categories": [ "role-cta", "cta", "type", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "as-featured-strip", "type": "registry:block", "title": "As-featured-in strip", "description": ""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.", "categories": [ "role-testimonial", "testimonial", "press", "marquee", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "figure-label-ledger", "type": "registry:block", "title": "Figure/label ledger", "description": ""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.", "categories": [ "role-stats", "stats", "ledger", "list", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "big-ask-closer", "type": "registry:block", "title": "Big-ask closer", "description": ""end on the big ask" — oversized closing line with the address as the only link. A visible ending shortens the perceived middle.", "categories": [ "role-footer", "footer", "type", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "marquee-edge-footer", "type": "registry:block", "title": "Marquee-edge footer", "description": ""footer rides a marquee" — a slow ticker strip seals the page, compact bar underneath.", "categories": [ "role-footer", "footer", "marquee", "motion" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sign-off-rule-footer", "type": "registry:block", "title": "Sign-off rule footer", "description": ""close it with the sign-off rule" — hairline, wordmark, links, a live status dot. The quietest possible ending.", "categories": [ "role-footer", "footer", "minimal", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sitemap-footer", "type": "registry:block", "title": "Sitemap footer", "description": ""full sitemap footer" — grouped column links over a legal bar. The one every real site eventually needs.", "categories": [ "role-footer", "footer", "sitemap", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "four-up-metric-row", "type": "registry:block", "title": "Four-up metric row", "description": ""stats are <n>" — four figures in a row, divided by hairlines; reach for it as the default metrics strip above a fold or footer.", "categories": [ "role-stats", "stats", "metrics", "row", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "generic-logo-wall", "type": "registry:block", "title": "Generic logo wall", "description": ""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.", "categories": [ "role-testimonial", "testimonial", "logos", "trust", "svg" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-number-caption", "type": "registry:block", "title": "Hero number with caption", "description": ""stats are <n>" — one number filling the space, a caption underneath; reach for it when a single figure is the entire argument.", "categories": [ "role-stats", "stats", "number", "hero", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "credential-list", "type": "registry:block", "title": "Credential list", "description": ""proof is a credential list" — plain rows of what is verifiable. Reads honest precisely because it is not styled like a boast.", "categories": [ "role-testimonial", "testimonial", "proof", "provenance" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "pull-quote-rule", "type": "registry:block", "title": "Pull-quote with rule", "description": ""proof is one pull quote" — oversized quote, hairline, attribution. One strong quote beats a wall of three.", "categories": [ "role-testimonial", "testimonial", "proof", "type" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "pull-quote-rule-2", "type": "registry:block", "title": "Pull quote with rule", "description": ""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.", "categories": [ "role-testimonial", "testimonial", "quote", "editorial", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "quote-gradient-portrait", "type": "registry:block", "title": "Quote with gradient portrait", "description": ""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.", "categories": [ "role-testimonial", "testimonial", "quote", "portrait", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "three-up-quote-grid", "type": "registry:block", "title": "Three-up quote grid", "description": ""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.", "categories": [ "role-testimonial", "testimonial", "quotes", "grid", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sparkline-row", "type": "registry:block", "title": "Sparkline row", "description": ""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.", "categories": [ "role-stats", "stats", "sparkline", "svg", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "four-up-metric-row-2", "type": "registry:block", "title": "Four-up metric row", "description": ""four numbers on a rule" — hairline-separated figures with unit labels. Replace the placeholders with real figures.", "categories": [ "role-stats", "stats", "metrics", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-figure", "type": "registry:block", "title": "Hero figure", "description": ""one number, enormous" — a single figure carrying the whole section, with a delta chip. Use it when one number IS the story.", "categories": [ "role-stats", "stats", "type", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "account-created-confirmation", "type": "registry:block", "title": "Account-created confirmation", "description": ""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.", "categories": [ "role-auth", "auth", "css", "confirmation" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "provider-button-stack", "type": "registry:block", "title": "Provider button stack", "description": ""provider stack" — a borderless stack of generic provider buttons above an email fallback; swap the generic marks for real providers once the integration exists.", "categories": [ "role-auth", "auth", "css", "oauth" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "passkey-prompt-card", "type": "registry:block", "title": "Passkey prompt card", "description": ""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.", "categories": [ "role-auth", "auth", "css", "passkey" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "magic-link-split", "type": "registry:block", "title": "Magic-link split", "description": ""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.", "categories": [ "role-auth", "auth", "css", "email" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "session-gate-card", "type": "registry:block", "title": "Session gate card", "description": ""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.", "categories": [ "role-auth", "auth", "css", "gate" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sign-card", "type": "registry:block", "title": "Sign-in card", "description": ""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.", "categories": [ "role-auth", "auth", "css", "form" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "two-factor-code-entry", "type": "registry:block", "title": "Two-factor code entry", "description": ""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.", "categories": [ "role-auth", "auth", "css", "2fa" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "card-cta-rule", "type": "registry:block", "title": "Card CTA with rule", "description": ""CTA in a card, with a rule" — heading, a hairline, then an arrow link that slides on hover.", "categories": [ "role-cta", "cta", "card", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "full-bleed-statement-cta", "type": "registry:block", "title": "Full-bleed statement CTA", "description": ""give me a statement CTA" — one big claim, full width, a single filled button underneath.", "categories": [ "role-cta", "cta", "statement", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "inline-form-cta", "type": "registry:block", "title": "Inline form CTA", "description": ""CTA with one field" — a heading over a pill-shaped email capture, button built into the field.", "categories": [ "role-cta", "cta", "forms", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "quiet-text-link-cta", "type": "registry:block", "title": "Quiet text-link CTA", "description": ""quiet CTA to close an article" — a hairline, a soft line of copy, one understated arrow link.", "categories": [ "role-cta", "cta", "editorial", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "split-cta-2", "type": "registry:block", "title": "Split CTA", "description": ""split the CTA" — copy on the left, a divider, the button stack on the right.", "categories": [ "role-cta", "cta", "split", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sticky-cta-bar", "type": "registry:block", "title": "Sticky CTA bar", "description": ""give me a sticky CTA bar" — a floating pill with copy and a button, shadowed like it's sitting above the page.", "categories": [ "role-cta", "cta", "sticky", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "horizon-curtain-footer", "type": "registry:block", "title": "Horizon curtain footer", "description": ""end on a horizon" — the sign-off line sinks into a glowing line at the base, like the page is setting.", "categories": [ "role-footer", "footer", "editorial", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "legal-status-bar", "type": "registry:block", "title": "Legal status bar", "description": ""just a legal bar" — one thin row: copyright and terms on one side, a status dot on the other.", "categories": [ "role-footer", "footer", "legal", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "let-s-talk-closer", "type": "registry:block", "title": "Let's-talk closer", "description": ""end the page on a big let's-talk" — the type does the selling; one line, one link, one accent word.", "categories": [ "role-footer", "footer", "editorial", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "ticker-strip-footer", "type": "registry:block", "title": "Ticker strip footer", "description": ""footer with a ticker strip" — a clipped, oversized headline band above a plain nav row; static, not scrolling — the type carries the motion cue.", "categories": [ "role-footer", "footer", "ticker", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "minimal-sign-off-footer", "type": "registry:block", "title": "Minimal sign-off footer", "description": ""close it out with a minimal sign-off" — a hairline rule, a wordmark, three links, nothing competing for attention.", "categories": [ "role-footer", "footer", "minimal", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "newsletter-inline-footer", "type": "registry:block", "title": "Newsletter inline footer", "description": ""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.", "categories": [ "role-footer", "footer", "newsletter", "forms" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "outline-wordmark-footer", "type": "registry:block", "title": "Outline wordmark footer", "description": ""put the wordmark in the footer, huge" — an outlined giant mark behind a plain three-link nav.", "categories": [ "role-footer", "footer", "wordmark", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "breadcrumb-cut-chevrons", "type": "registry:block", "title": "Breadcrumb with cut chevrons", "description": ""chevron breadcrumb" — a trail separated by a sliced arrow shape instead of a plain ">"; reach for it on deep catalogue or docs hierarchies.", "categories": [ "role-nav", "nav", "css", "breadcrumb" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "centered-wordmark-bar", "type": "registry:block", "title": "Centered wordmark bar", "description": ""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.", "categories": [ "role-nav", "nav", "css", "minimal" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "icon-rail", "type": "registry:block", "title": "Icon rail", "description": ""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.", "categories": [ "role-nav", "nav", "css", "icons" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "segmented-pill-switcher", "type": "registry:block", "title": "Segmented pill switcher", "description": ""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.", "categories": [ "role-nav", "nav", "css", "toggle" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sidebar-nav-sliding-marker", "type": "registry:block", "title": "Sidebar nav with sliding marker", "description": ""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.", "categories": [ "role-nav", "nav", "css", "sidebar" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "tab-bar-sliding-fill", "type": "registry:block", "title": "Tab bar with sliding fill", "description": ""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.", "categories": [ "role-nav", "nav", "css", "tabs" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "underline-slide-nav", "type": "registry:block", "title": "Underline-slide nav", "description": ""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.", "categories": [ "role-nav", "nav", "css", "hover" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "aurora-drift", "type": "registry:block", "title": "Aurora drift", "description": ""aurora behind the hero" — slow colour fields that never repeat visibly. Costs nothing; no canvas, no GL.", "categories": [ "role-background", "background", "gradient", "ambient" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "diagonal-scan-lines", "type": "registry:block", "title": "Diagonal scan lines", "description": ""diagonal scan behind it" — a fine rule texture that drifts. Reads technical without reading retro.", "categories": [ "role-background", "background", "texture", "ambient" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "dot-matrix-fade", "type": "registry:block", "title": "Dot matrix fade", "description": ""dot matrix behind the section" — a quiet texture that gives flat panels somewhere to sit.", "categories": [ "role-background", "background", "dots", "ambient" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hairline-grid-field", "type": "registry:block", "title": "Hairline grid field", "description": ""put the hairline grid behind it" — a drafting-table grid that reads as structure, not decoration.", "categories": [ "role-background", "background", "grid", "ambient" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "horizon-glow", "type": "registry:block", "title": "Horizon glow", "description": ""horizon glow under the fold" — a single light source at the base. The cheapest way to stop a black section reading as empty.", "categories": [ "role-background", "background", "gradient", "ambient" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "faq-disclosure", "type": "registry:block", "title": "FAQ disclosure", "description": ""FAQ as disclosures" — native <details>, no JS, keyboard-accessible for free. The rows animate open on modern browsers.", "categories": [ "role-content", "content", "faq", "platform-native", "native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "lede-rule", "type": "registry:block", "title": "Lede with rule", "description": ""open the section with the lede" — eyebrow, rule, oversized opening paragraph. The editorial entry point.", "categories": [ "role-content", "content", "editorial", "type" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "spec-ledger", "type": "registry:block", "title": "Spec ledger", "description": ""spec it as a ledger" — label/value rows on hairlines. What a datasheet looks like when someone cared.", "categories": [ "role-content", "content", "spec", "table" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "numbered-step-ladder", "type": "registry:block", "title": "Numbered step ladder", "description": ""explain it as a step ladder" — numbered rows on a rule. For process, onboarding, or how-it-works.", "categories": [ "role-content", "content", "process", "list" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "two-column-margin-note", "type": "registry:block", "title": "Two-column with margin note", "description": ""body copy with a margin note" — the printed-page move: a narrow annotation column beside the text.", "categories": [ "role-content", "content", "editorial", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "corner-meta", "type": "registry:block", "title": "Corner meta", "description": ""put the meta in the corners" — coordinates, status, index. The frame around the work that says a person set this.", "categories": [ "role-chrome", "chrome", "meta", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "scroll-cue", "type": "registry:block", "title": "Scroll cue", "description": ""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.", "categories": [ "role-chrome", "chrome", "affordance", "motion" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "booking-date-slot-picker", "type": "registry:block", "title": "Booking date and slot picker", "description": ""booking picker is <n>" — a week strip with one day selected above a grid of time slots; static and visual, wire real availability yourself.", "categories": [ "role-form", "form", "booking", "calendar", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "file-drop-zone", "type": "registry:block", "title": "File-drop zone", "description": ""file drop zone is <n>" — a dashed drop target with an upload glyph and a browse fallback; visual only, wire the real upload yourself.", "categories": [ "role-form", "form", "upload", "dropzone", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "multi-step-form-progress-rule", "type": "registry:block", "title": "Multi-step form, progress rule", "description": ""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.", "categories": [ "role-form", "form", "multistep", "progress", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "newsletter-form-consent-line", "type": "registry:block", "title": "Newsletter form with consent line", "description": ""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", "categories": [ "role-form", "form", "newsletter", "consent", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "search-field-filter-chips", "type": "registry:block", "title": "Search field with filter chips", "description": ""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.", "categories": [ "role-form", "form", "search", "filter", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "segmented-choice-picker", "type": "registry:block", "title": "Segmented choice picker", "description": ""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.", "categories": [ "role-form", "form", "segmented", "radio", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "split-contact-form-rule", "type": "registry:block", "title": "Split contact form with rule", "description": ""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.", "categories": [ "role-form", "form", "contact", "split", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stacked-brief-intake-form", "type": "registry:block", "title": "Stacked brief intake form", "description": ""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.", "categories": [ "role-form", "form", "intake", "brief", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "feature-thumbs", "type": "registry:block", "title": "Feature with thumbs", "description": ""one big, four small" — the product-page arrangement. The thumbs mark the current frame.", "categories": [ "role-gallery", "gallery", "layout", "product" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hairline-quad-grid", "type": "registry:block", "title": "Hairline quad grid", "description": ""four up on hairlines" — a 2×2 grid divided by rules, not gaps. Swap the gradient cells for real imagery.", "categories": [ "role-gallery", "gallery", "grid", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "offset-pair", "type": "registry:block", "title": "Offset pair", "description": ""offset the pair" — two panels at different heights with a caption between. Reads composed rather than tiled.", "categories": [ "role-gallery", "gallery", "editorial", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "snap-strip", "type": "registry:block", "title": "Snap strip", "description": ""browse it as a snap strip" — native CSS scroll-snap, no carousel library, works with a trackpad and a thumb.", "categories": [ "role-gallery", "gallery", "scroll", "platform-native", "native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-bordered-spec-panel", "type": "registry:block", "title": "Hero with bordered spec panel", "description": ""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.", "categories": [ "role-hero", "hero", "panel", "spec", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "centred-statement-hero", "type": "registry:block", "title": "Centred statement hero", "description": ""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.", "categories": [ "role-hero", "hero", "centered", "statement", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-clipped-line-reveal", "type": "registry:block", "title": "Hero with clipped line reveal", "description": ""give me a hero with a clipped reveal" — each line of the headline slides up out of its own clipped row on load, staggered, CSS only; reach for it when the entrance itself should feel consid", "categories": [ "role-hero", "hero", "reveal", "clip", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "minimal-hero-one-hairline", "type": "registry:block", "title": "Minimal hero, one hairline", "description": ""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.", "categories": [ "role-hero", "hero", "minimal", "type", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "asymmetric-hero-offset-caption", "type": "registry:block", "title": "Asymmetric hero, offset caption", "description": ""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.", "categories": [ "role-hero", "hero", "asymmetric", "editorial", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "outlined-wordmark-hero", "type": "registry:block", "title": "Outlined wordmark hero", "description": ""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.", "categories": [ "role-hero", "hero", "wordmark", "stroke", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-scrolling-kicker-strip", "type": "registry:block", "title": "Hero with scrolling kicker strip", "description": ""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.", "categories": [ "role-hero", "hero", "marquee", "kicker", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "split-editorial-hero", "type": "registry:block", "title": "Split editorial hero", "description": ""give me a split editorial hero" — oversized type on one side, a hairline rule and meta list on the other; reach for it when the headline should read like a magazine opener, not a landing pa", "categories": [ "role-hero", "hero", "editorial", "split", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "ambient-glow-media-frame", "type": "registry:block", "title": "Ambient glow media frame", "description": ""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.", "categories": [ "role-media", "media", "glow", "ambient", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "audio-player-row-waveform", "type": "registry:block", "title": "Audio player row with waveform", "description": ""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.", "categories": [ "role-media", "media", "audio", "waveform", "svg" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "media-card-duration-pill", "type": "registry:block", "title": "Media card with duration pill", "description": ""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.", "categories": [ "role-media", "media", "card", "duration", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "editorial-figure-caption", "type": "registry:block", "title": "Editorial figure with caption", "description": ""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.", "categories": [ "role-media", "media", "editorial", "figure", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "16-9-embed-frame-chrome", "type": "registry:block", "title": "16:9 embed frame with chrome bar", "description": ""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.", "categories": [ "role-media", "media", "embed", "frame", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "full-bleed-media-band-overlay", "type": "registry:block", "title": "Full-bleed media band with overlay title", "description": ""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.", "categories": [ "role-media", "media", "fullbleed", "overlay", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "media-grid-feature-cell", "type": "registry:block", "title": "Media grid with feature cell", "description": ""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.", "categories": [ "role-media", "media", "grid", "gallery", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "video-frame-play-affordance", "type": "registry:block", "title": "Video frame with play affordance", "description": ""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.", "categories": [ "role-media", "media", "video", "poster", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "compact-price-strip", "type": "registry:block", "title": "Compact price strip", "description": ""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.", "categories": [ "role-pricing", "pricing", "strip", "sticky-bar", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "comparison-table-hairline-grid", "type": "registry:block", "title": "Comparison table, hairline grid", "description": ""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.", "categories": [ "role-pricing", "pricing", "comparison", "table", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "what-s-included-checklist-panel", "type": "registry:block", "title": "What's included checklist panel", "description": ""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.", "categories": [ "role-pricing", "pricing", "checklist", "included", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "price-open-breakdown-disclosure", "type": "registry:block", "title": "Price with open breakdown disclosure", "description": ""give me a price with a breakdown disclosure" — a headline price with a native, JS-free details toggle underneath that opens a line-item breakdown; reach for it when the number needs to defe", "categories": [ "role-pricing", "pricing", "details", "disclosure", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "quote-panel-line-item-breakdown", "type": "registry:block", "title": "Quote panel with line-item breakdown", "description": ""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.", "categories": [ "role-pricing", "pricing", "quote", "estimate", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "single-price-statement-panel", "type": "registry:block", "title": "Single-price statement panel", "description": ""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.", "categories": [ "role-pricing", "pricing", "statement", "single-plan", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "three-tier-pricing-row", "type": "registry:block", "title": "Three-tier pricing row", "description": "\"use 365\".", "categories": [ "role-pricing", "pricing", "tiers", "cards", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "monthly-annual-toggle-pure-css", "type": "registry:block", "title": "Monthly/annual toggle, pure CSS", "description": ""give me a monthly/annual toggle" — a switch flips the displayed price between monthly and annual, built on a hidden checkbox with no JavaScript; reach for it when the plan itself doesn't ch", "categories": [ "role-pricing", "pricing", "toggle", "checkbox-hack", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "labelled-rule-seam", "type": "registry:block", "title": "Labelled rule seam", "description": ""divide the acts with a labelled rule" — names the next act, which is what stops a long page feeling lost.", "categories": [ "role-seam", "seam", "divider", "type" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sweeping-rule-seam", "type": "registry:block", "title": "Sweeping rule seam", "description": ""sweep a rule between acts" — a light travels the divider once. A seam you notice only if you look for it.", "categories": [ "role-seam", "seam", "divider", "motion" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "alternating-line-stack", "type": "registry:block", "title": "Alternating line stack", "description": ""stack the lines alternating" — left, right, left. Asymmetry does the work no centred block can.", "categories": [ "role-type", "type", "layout", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "drop-cap-lede", "type": "registry:block", "title": "Drop-cap lede", "description": ""give the opening a drop cap" — the oldest signal that a page was set, not generated.", "categories": [ "role-type", "type", "editorial", "print" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "rotating-word-headline", "type": "registry:block", "title": "Rotating word headline", "description": ""rotate the noun" — one headline, a word that cycles. Pure CSS keyframes, no JS, no layout shift.", "categories": [ "role-type", "type", "motion", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stroke-headline", "type": "registry:block", "title": "Stroke headline", "description": ""outline the headline, fill one word" — hollow display type with a single solid word carrying the emphasis.", "categories": [ "role-type", "type", "display", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "noise-wash", "type": "registry:block", "title": "Noise wash", "description": ""wash it with noise" — an SVG turbulence grain over a gradient. The thing that stops flat colour looking cheap.", "categories": [ "role-background", "background", "texture", "grain" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "topographic-rings", "type": "registry:block", "title": "Topographic rings", "description": ""topographic rings behind it" — concentric contours, like a survey map. Depth without a single image.", "categories": [ "role-background", "background", "pattern", "ambient" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "vignette-frame", "type": "registry:block", "title": "Vignette frame", "description": ""frame it with a vignette" — an inset hairline and a soft darkened edge. Makes any panel feel deliberate.", "categories": [ "role-background", "background", "frame", "ambient" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "callout-band", "type": "registry:block", "title": "Callout band", "description": ""pull it out as a callout band" — a bordered aside for the sentence that must not be skimmed past.", "categories": [ "role-content", "content", "callout", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "definition-pair", "type": "registry:block", "title": "Definition pair", "description": ""set the terms as definition pairs" — term and meaning, hung on a rule. For glossaries and explainers.", "categories": [ "role-content", "content", "glossary", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "timeline-rail", "type": "registry:block", "title": "Timeline rail", "description": ""run it down a timeline rail" — dated entries on a vertical line. History, roadmap, or process.", "categories": [ "role-content", "content", "timeline", "process" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "log-activity-feed", "type": "registry:block", "title": "Log and activity feed", "description": ""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.", "categories": [ "role-dashboard", "dashboard", "activity", "log", "feed", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "notification-alert-stack", "type": "registry:block", "title": "Notification and alert stack", "description": ""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.", "categories": [ "role-dashboard", "dashboard", "alert", "notification", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "empty-state-panel", "type": "registry:block", "title": "Empty-state panel", "description": ""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.", "categories": [ "role-dashboard", "dashboard", "empty-state", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "job-queue-list-state-pills", "type": "registry:block", "title": "Job queue list with state pills", "description": ""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.", "categories": [ "role-dashboard", "dashboard", "queue", "jobs", "pills", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "kpi-header-row-filter-bar", "type": "registry:block", "title": "KPI header row with filter bar", "description": ""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.", "categories": [ "role-dashboard", "dashboard", "kpi", "filter", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "settings-form-panel-grouped-rows", "type": "registry:block", "title": "Settings form panel, grouped rows", "description": ""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.", "categories": [ "role-dashboard", "dashboard", "settings", "form", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "compact-sidebar-content-shell", "type": "registry:block", "title": "Compact sidebar and content shell", "description": ""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.", "categories": [ "role-dashboard", "dashboard", "sidebar", "shell", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "data-table-status-column", "type": "registry:block", "title": "Data table with status column", "description": ""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.", "categories": [ "role-dashboard", "dashboard", "table", "status", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "usage-meter-row-bars", "type": "registry:block", "title": "Usage meter row with bars", "description": ""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.", "categories": [ "role-dashboard", "dashboard", "usage", "meter", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hover-reveal-caption", "type": "registry:block", "title": "Hover-reveal caption", "description": ""captions arrive on hover" — the frame stays clean until someone looks closer.", "categories": [ "role-gallery", "gallery", "hover", "micro" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "masonry-three-column", "type": "registry:block", "title": "Masonry three-column", "description": ""masonry it three across" — native CSS columns, uneven heights, no JS layout pass.", "categories": [ "role-gallery", "gallery", "masonry", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "quote-over-media-frame", "type": "registry:block", "title": "Quote over media frame", "description": ""set the quote over the frame" — type on imagery with a legibility scrim, done properly.", "categories": [ "role-media", "media", "editorial", "overlay" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "anchor-list-progress", "type": "registry:block", "title": "Anchor list with progress", "description": ""index the page down the side" — anchors with an active marker. Orientation is what stops long pages feeling long.", "categories": [ "role-nav", "nav", "index", "chrome" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "mega-menu-columns", "type": "registry:block", "title": "Mega-menu columns", "description": ""open a mega menu" — grouped columns with a featured cell. What a real catalogue navigation looks like.", "categories": [ "role-nav", "nav", "menu", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "lead-time-availability-strip", "type": "registry:block", "title": "Lead-time and availability strip", "description": ""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.", "categories": [ "role-product", "product", "availability", "lead-time", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "what-s-box-itemised-panel", "type": "registry:block", "title": "What's in the box, itemised panel", "description": ""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.", "categories": [ "role-product", "product", "unboxing", "itemised", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "two-option-comparison-panel", "type": "registry:block", "title": "Two-option comparison panel", "description": ""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.", "categories": [ "role-product", "product", "comparison", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "product-detail-accordion", "type": "registry:block", "title": "Product detail accordion", "description": ""product accordion is <n>" — native <details> panels for spec sections, no JS, keyboard and screen-reader correct by default; reach for it when there's more product copy than fit", "categories": [ "role-product", "product", "accordion", "details", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "feature-callout-row-hairline-numbering", "type": "registry:block", "title": "Feature callout row, hairline numbering", "description": ""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.", "categories": [ "role-product", "product", "features", "numbered", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "product-hero-spec-sidebar", "type": "registry:block", "title": "Product hero with spec sidebar", "description": ""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.", "categories": [ "role-product", "product", "hero", "spec", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "materials-finish-list-swatch-chips", "type": "registry:block", "title": "Materials and finish list with swatch chips", "description": ""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.", "categories": [ "role-product", "product", "materials", "finish", "swatch", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "size-dimension-selector", "type": "registry:block", "title": "Size and dimension selector", "description": ""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.", "categories": [ "role-product", "product", "size", "dimensions", "radio", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "variant-swatch-picker", "type": "registry:block", "title": "Variant swatch picker", "description": ""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.", "categories": [ "role-product", "product", "variant", "swatch", "radio", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "angled-slash-divider", "type": "registry:block", "title": "Angled slash divider", "description": ""cut the seam on an angle" — two acts split by a diagonal clip-path, with a thin accent stroke tracing the cut.", "categories": [ "role-seam", "seam", "divider", "css", "angled" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "arc-curve-divider", "type": "registry:block", "title": "Arc curve divider", "description": ""curve the seam" — the next section rises as a smooth dome over the one above it, a single border-radius ellipse, no SVG.", "categories": [ "role-seam", "seam", "divider", "css", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "plan-gate", "type": "registry:block", "title": "Plan gate", "description": ""gate it by plan" — a locked panel that says exactly what unlocks it. Honest gating, not a tease.", "categories": [ "role-auth", "auth", "gate", "upgrade" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "back-top-affordance", "type": "registry:block", "title": "Back-to-top affordance", "description": ""add back-to-top" — a floating round button with an up-chevron, the kind that only appears once you have scrolled.", "categories": [ "role-chrome", "chrome", "navigation", "css", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "corner-glow-pair", "type": "registry:block", "title": "Corner glow pair", "description": ""light the two corners" — opposing soft sources. Gives a flat panel a direction without a shape in it.", "categories": [ "role-background", "background", "gradient", "ambient" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "perspective-floor", "type": "registry:block", "title": "Perspective floor", "description": ""put a perspective floor under it" — a receding grid plane. Depth from two gradients and a transform.", "categories": [ "role-background", "background", "grid", "depth" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "checklist-panel", "type": "registry:block", "title": "Checklist panel", "description": ""list it as a checklist" — ticked rows in a bordered panel. For scope, inclusions, or requirements.", "categories": [ "role-content", "content", "list", "panel" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "quote-break", "type": "registry:block", "title": "Quote break", "description": ""break the copy with a quote" — a full-width interruption between paragraphs. Resets the reader's attention.", "categories": [ "role-content", "content", "quote", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "two-up-content-cards", "type": "registry:block", "title": "Two-up content cards", "description": "\"use 410\".", "categories": [ "role-content", "content", "cards", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "floating-status-pill", "type": "registry:block", "title": "Floating status pill", "description": ""float a status pill" — a small pinned badge with a pulsing dot for save state, connection state, or build state.", "categories": [ "role-chrome", "chrome", "status", "css", "badge" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "indexed-footer", "type": "registry:block", "title": "Indexed footer", "description": ""index the footer" — numbered link groups. Reads like the back of a book rather than a sitemap dump.", "categories": [ "role-footer", "footer", "index", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "gradient-fade-out-band", "type": "registry:block", "title": "Gradient fade-out band", "description": ""fade the section out" — content dissolves into the page background before the next act starts clean.", "categories": [ "role-seam", "seam", "fade", "css", "gradient" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hanging-punctuation-quote", "type": "registry:block", "title": "Hanging punctuation quote", "description": ""hang the quote mark" — the opening quotation mark sits outside the text block instead of eating into the first line.", "categories": [ "role-type", "type", "quote", "css", "typography" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "justified-two-column-text", "type": "registry:block", "title": "Justified two-column text", "description": ""set the body in two justified columns" — a magazine-style column split with a hairline rule between them.", "categories": [ "role-type", "type", "columns", "css", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "keyboard-hint-bar", "type": "registry:block", "title": "Keyboard hint bar", "description": ""add a keyboard hint bar" — a search trigger with a kbd-styled shortcut badge, ⌘K, sitting at the end.", "categories": [ "role-chrome", "chrome", "search", "css", "keyboard" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "theme-switcher-pill-row", "type": "registry:block", "title": "Theme switcher pill row", "description": ""add a theme switcher pill" — three icon options in a segmented pill with a sliding accent behind the active one.", "categories": [ "role-chrome", "chrome", "switcher", "css", "theme" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "marked-phrase-gradient-underline", "type": "registry:block", "title": "Marked phrase, gradient underline", "description": ""mark a phrase in the text" — one phrase gets a gradient underline instead of a full highlight box.", "categories": [ "role-type", "type", "highlight", "css", "typography" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "aspect-ratio-row", "type": "registry:block", "title": "Aspect ratio row", "description": ""mix the aspect ratios" — portrait, square, landscape in one row. Rhythm instead of a uniform grid.", "categories": [ "role-media", "media", "layout", "grid" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "split-media-caption", "type": "registry:block", "title": "Split media and caption", "description": ""media left, caption right" — the editorial pairing, with the caption doing real work.", "categories": [ "role-media", "media", "editorial", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "mono-label-display-pairing", "type": "registry:block", "title": "Mono label / display pairing", "description": ""pair a mono label with a display line" — a small uppercase eyebrow over a large display headline, the standard editorial stack.", "categories": [ "role-type", "type", "label", "css", "display" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "command-hint-bar", "type": "registry:block", "title": "Command hint bar", "description": ""hint the command palette" — a fake-input bar advertising ⌘K. The cheapest discoverability there is.", "categories": [ "role-nav", "nav", "search", "chrome" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "numbered-act-marker", "type": "registry:block", "title": "Numbered act marker", "description": ""mark the act on the rule" — a numbered pill (02 / 07) riding an otherwise plain hairline, placed off-centre.", "categories": [ "role-seam", "seam", "divider", "css", "numbered" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "numbered-pull-statement", "type": "registry:block", "title": "Numbered pull statement", "description": ""pull a numbered statement" — an oversized index numeral beside a short claim, the editorial way to call out one idea.", "categories": [ "role-type", "type", "statement", "css", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "overlapping-panel-seam", "type": "registry:block", "title": "Overlapping panel seam", "description": ""let the next section peek up" — a raised card for the next act overlaps the bottom of the one above it.", "categories": [ "role-seam", "seam", "overlap", "css", "panel" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "oversized-glyph-graphic", "type": "registry:block", "title": "Oversized glyph graphic", "description": ""put an oversized glyph behind the text" — a giant ampersand or numeral used as background texture, not as a letterform.", "categories": [ "role-type", "type", "graphic", "css", "display" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "numbered-quote-pair", "type": "registry:block", "title": "Numbered quote pair", "description": ""two numbered quotes" — indexed like footnotes. Reads as record rather than marketing.", "categories": [ "role-testimonial", "testimonial", "proof", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "reading-progress-bar", "type": "registry:block", "title": "Reading progress bar", "description": ""add a reading progress bar" — a hairline that fills as the page is read, with a percentage readout.", "categories": [ "role-chrome", "chrome", "progress", "css", "reading" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "side-page-index", "type": "registry:block", "title": "Side page index", "description": ""add a side page index" — a vertical rail of dots and labels down the edge, the active section shown larger and lit.", "categories": [ "role-chrome", "chrome", "navigation", "css", "index" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "delta-rows", "type": "registry:block", "title": "Delta rows", "description": ""show the movement, not just the number" — value plus its change, on hairlines.", "categories": [ "role-stats", "stats", "metrics", "table" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "ring-gauge", "type": "registry:block", "title": "Ring gauge", "description": ""show it as a ring gauge" — a conic-gradient dial with the figure inside. One number, one glance.", "categories": [ "role-stats", "stats", "gauge", "svg" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stepped-edge-seam", "type": "registry:block", "title": "Stepped edge seam", "description": ""step the seam" — a stacked, stepped edge between two backgrounds instead of a straight line, like a ticket stub.", "categories": [ "role-seam", "seam", "divider", "css", "stepped" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "organisation-switcher", "type": "registry:block", "title": "Organisation switcher", "description": ""switch organisations" — the account menu every multi-tenant product needs and most get wrong.", "categories": [ "role-auth", "auth", "account", "menu" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "announcement-strip-dismiss", "type": "registry:block", "title": "Announcement strip with dismiss", "description": ""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.", "categories": [ "role-chrome", "chrome", "announcement", "banner", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "breadcrumb-share-row", "type": "registry:block", "title": "Breadcrumb and share row", "description": ""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.", "categories": [ "role-chrome", "chrome", "breadcrumb", "share", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "cookie-consent-bar", "type": "registry:block", "title": "Cookie consent bar", "description": ""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.", "categories": [ "role-chrome", "chrome", "consent", "cookies", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "corner-social-link-cluster", "type": "registry:block", "title": "Corner social link cluster", "description": ""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.", "categories": [ "role-chrome", "chrome", "links", "corner", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "footer-anchored-contact-pill", "type": "registry:block", "title": "Footer-anchored contact pill", "description": ""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.", "categories": [ "role-chrome", "chrome", "contact", "anchored", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "skip-content-link", "type": "registry:block", "title": "Skip-to-content link", "description": ""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.", "categories": [ "role-chrome", "chrome", "accessibility", "focus", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sticky-section-header", "type": "registry:block", "title": "Sticky section header", "description": ""give me the sticky section header" — a slim pinned bar naming the current section with a thin progress rule beneath; reach for it on long single-page documents so a reader always knows wher", "categories": [ "role-chrome", "chrome", "sticky", "navigation", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "saved-syncing-status-chip", "type": "registry:block", "title": "Saved and syncing status chip", "description": ""add the sync status chip" — a small pill for syncing and saved states, a pulsing dot on one, a check on the other; reach for it anywhere a person edits something and needs to trust it was k", "categories": [ "role-chrome", "chrome", "status", "feedback", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "comparison-columns", "type": "registry:block", "title": "Comparison columns", "description": ""put them side by side" — two columns, one rule, no winner declared. Let the reader decide.", "categories": [ "role-content", "content", "compare", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "cta-availability-line", "type": "registry:block", "title": "CTA with availability line", "description": ""give me a CTA with an availability line" — a small pulsing status dot and a plain availability line sit above the ask; reach for it when the CTA should feel like a real person answering, no", "categories": [ "role-cta", "cta", "availability", "status", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "boxed-book-call-cta", "type": "registry:block", "title": "Boxed book-a-call CTA", "description": ""give me a boxed book-a-call CTA" — an icon, a heading and one button sit inside a bordered card; reach for it when booking a call is the single next step you want on the page.", "categories": [ "role-cta", "cta", "call", "box", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "bordered-panel-cta-two-actions", "type": "registry:block", "title": "Bordered panel CTA with two actions", "description": ""give me a CTA panel with two actions" — a bordered card holding one filled and one outlined button side by side; reach for it when visitors split roughly evenly between two next steps.", "categories": [ "role-cta", "cta", "panel", "actions", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "cta-what-happens-next-checklist", "type": "registry:block", "title": "CTA with what-happens-next checklist", "description": ""give me a CTA with a next-steps checklist" — a short numbered list of what happens after someone clicks, then the button; reach for it when the ask is unfamiliar and the visitor needs to se", "categories": [ "role-cta", "cta", "checklist", "process", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "full-width-slab-cta", "type": "registry:block", "title": "Full-width slab CTA", "description": ""give me a full-width slab CTA" — a bordered band runs edge to edge with the statement and button sitting inside it; reach for it when the CTA needs to read as a hard stop in the page, not a", "categories": [ "role-cta", "cta", "slab", "fullwidth", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "cta-over-gradient-band", "type": "registry:block", "title": "CTA over a gradient band", "description": ""give me a CTA on a gradient band" — the ask sits inside a full-width rounded band built from the accent colours; reach for it when the CTA should look like its own coloured module, not anot", "categories": [ "role-cta", "cta", "gradient", "band", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "cta-countdown-style-meta-line", "type": "registry:block", "title": "CTA with countdown-style meta line", "description": ""give me a CTA with a countdown line" — a monospace digit readout under the heading, styled like a timer without claiming real urgency; reach for it when the ask needs a ticking visual, not ", "categories": [ "role-cta", "cta", "meta", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "minimal-arrow-link-cta-row", "type": "registry:block", "title": "Minimal arrow-link CTA row", "description": ""give me a minimal arrow CTA row" — just two understated arrow links side by side, no button, no card; reach for it when the page has already made its case and the close should be quiet.", "categories": [ "role-cta", "cta", "minimal", "links", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "cta-phone-email-pair", "type": "registry:block", "title": "CTA with phone and email pair", "description": ""give me a CTA with phone and email" — two direct contact links sit side by side with a hairline between them; reach for it when the fastest path to a reply is just handing over the number.", "categories": [ "role-cta", "cta", "contact", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "cta-quiet-secondary-link", "type": "registry:block", "title": "CTA with quiet secondary link", "description": ""give me a CTA with a quiet second link" — a filled primary button with an understated text link underneath for the less committed visitor; reach for it when you want one clear default witho", "categories": [ "role-cta", "cta", "secondary", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "diff-summary", "type": "registry:block", "title": "Diff summary", "description": ""summarise the diff" — files changed with added/removed counts. The row every review starts from.", "categories": [ "role-dashboard", "dashboard", "diff", "ops" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "run-timeline", "type": "registry:block", "title": "Run timeline", "description": ""show the run as a timeline" — stage bars on a shared scale. Where the time actually went.", "categories": [ "role-dashboard", "dashboard", "timeline", "ops" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "two-tone-split-footer", "type": "registry:block", "title": "Two-tone split footer", "description": ""split the footer in two tones" — a contact half and a legal half, divided by a rule.", "categories": [ "role-footer", "footer", "layout", "contrast" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "address-form-grouped-fields", "type": "registry:block", "title": "Address form, grouped fields", "description": ""address form is <n>" — street on its own row, city and state paired, postal and country paired; reach for it for shipping or billing address capture.", "categories": [ "role-form", "form", "address", "shipping", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "compact-two-field-row-submit", "type": "registry:block", "title": "Compact two-field row with submit", "description": ""compact two-field row is <n>" — name and email inline with a trailing button; reach for it as the smallest contact ask that still gets a name.", "categories": [ "role-form", "form", "compact", "contact", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "form-inline-validation-states", "type": "registry:block", "title": "Form with inline validation states", "description": ""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.", "categories": [ "role-form", "form", "validation", "feedback", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "payment-card-form-visual-only", "type": "registry:block", "title": "Payment card form (visual only)", "description": ""payment card is <n>" — a card-face preview above number, expiry, and CVC fields, clearly marked as a visual only; reach for it to block out a checkout step before real payment wiring ", "categories": [ "role-form", "form", "payment", "checkout", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "rating-scale-input-row", "type": "registry:block", "title": "Rating scale input row", "description": ""rating scale is <n>" — a numbered 1-to-5 row between two end labels, built on real radio inputs; reach for it for an NPS-style question.", "categories": [ "role-form", "form", "rating", "survey", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "tag-keyword-chip-input", "type": "registry:block", "title": "Tag and keyword chip input", "description": ""tag input is <n>" — removable keyword chips with a trailing text field; reach for it wherever someone builds a list of their own terms.", "categories": [ "role-form", "form", "tags", "chips", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "centre-rule-diptych", "type": "registry:block", "title": "Centre-rule diptych", "description": ""split it into a diptych with a centre rule" — two frames divided by a hairline instead of a gap, reads as one composed pair.", "categories": [ "role-gallery", "gallery", "layout", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "corner-index-frame", "type": "registry:block", "title": "Corner index frame", "description": ""tag the corner with a figure index" — a single frame with a museum-label tab hanging off its top edge.", "categories": [ "role-gallery", "gallery", "layout", "detail" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "filmstrip-scrub-rail", "type": "registry:block", "title": "Filmstrip with scrub rail", "description": ""run it as a filmstrip with a scrub rail" — a row of frames over a rail whose marker drifts, visual only, no dragging.", "categories": [ "role-gallery", "gallery", "motion", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "full-bleed-quad-band", "type": "registry:block", "title": "Full-bleed quad band", "description": ""run four across, full bleed" — no side padding, no gaps, four equal frames butted edge to edge.", "categories": [ "role-gallery", "gallery", "layout", "grid" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "mixed-orientation-pair", "type": "registry:block", "title": "Mixed orientation pair", "description": ""pair a portrait with a landscape" — deliberately different aspect ratios sitting on the same baseline.", "categories": [ "role-gallery", "gallery", "layout", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "scattered-frame-stack", "type": "registry:block", "title": "Scattered frame stack", "description": ""scatter them like a photo pile" — three overlapping frames at small rotations, one lifts on hover.", "categories": [ "role-gallery", "gallery", "layout", "hover" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "span-cell-grid", "type": "registry:block", "title": "Span-cell grid", "description": ""let one cell span two columns" — a three-column grid where a single frame breaks the rhythm on purpose.", "categories": [ "role-gallery", "gallery", "grid", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "diagonal-split-hero", "type": "registry:block", "title": "Diagonal split hero", "description": ""give me a diagonal split hero" — two colour panels meet on a diagonal seam instead of a straight column; reach for it when a plain left/right split feels too safe.", "categories": [ "role-hero", "hero", "split", "diagonal", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-inline-email-capture", "type": "registry:block", "title": "Hero with inline email capture", "description": ""give me a hero with an email capture" — the headline sits directly above a pill-shaped signup field; reach for it when the hero's whole job is the first conversion, not just the pitch.", "categories": [ "role-hero", "hero", "capture", "email", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "full-bleed-gradient-hero", "type": "registry:block", "title": "Full-bleed gradient hero", "description": ""give me a full-bleed gradient hero" — a slow-drifting colour field fills the whole section behind centred type; reach for it when the brand has a strong palette and the background should ca", "categories": [ "role-hero", "hero", "gradient", "centered", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-oversized-numeral", "type": "registry:block", "title": "Hero with oversized numeral", "description": ""give me a hero with a big numeral" — a huge low-opacity number sits behind the headline like a section mark; reach for it when the page is part of a numbered series.", "categories": [ "role-hero", "hero", "numeral", "editorial", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-bottom-meta-row", "type": "registry:block", "title": "Hero with bottom meta row", "description": ""give me a hero with a bottom meta row" — the headline sits alone up top, a small divided row of location/date/status runs along the bottom; reach for it when the hero should read like a mas", "categories": [ "role-hero", "hero", "meta", "footer-row", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-offset-image-panel", "type": "registry:block", "title": "Hero with offset image panel", "description": ""give me a hero with an offset image panel" — a placeholder image frame sits offset from the copy, overlapping its grid line; reach for it when the layout needs a photo but should still feel", "categories": [ "role-hero", "hero", "image", "offset", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-rotating-word-line", "type": "registry:block", "title": "Hero with rotating word line", "description": ""give me a hero with a rotating word" — one word in the headline cycles through a short list on a CSS loop, no JS; reach for it when the product serves more than one audience and the headlin", "categories": [ "role-hero", "hero", "rotator", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stacked-type-pairing-hero", "type": "registry:block", "title": "Stacked type-pairing hero", "description": ""give me a hero with a serif/mono pairing" — an italic display line stacked between two small monospace labels; reach for it when the typography itself should carry the editorial tone.", "categories": [ "role-hero", "hero", "typography", "editorial", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-booking-status-strip", "type": "registry:block", "title": "Hero with booking status strip", "description": ""give me a hero with a booking status strip" — a small boxed pill with a live-looking status dot sits above the headline; reach for it when availability is part of the pitch.", "categories": [ "role-hero", "hero", "status", "booking", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hero-two-line-mask-reveal", "type": "registry:block", "title": "Hero with two-line mask reveal", "description": ""give me a hero with a mask reveal" — two lines wipe into view from behind a clip-path mask on load, CSS only; reach for it when the entrance should feel like a curtain, not a slide-up.", "categories": [ "role-hero", "hero", "reveal", "mask", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "media-chapter-list", "type": "registry:block", "title": "Media chapter list", "description": ""chapter the video" — timestamps beside titles. Turns a long recording into something navigable.", "categories": [ "role-media", "media", "video", "list" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "compact-nav-bar-divider", "type": "registry:block", "title": "Compact nav bar with divider", "description": ""one bar, divided" — mark on the left, links right, a hairline under. The default that never looks wrong.", "categories": [ "role-nav", "nav", "bar", "minimal" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "per-seat-calculator-layout", "type": "registry:block", "title": "Per-seat calculator layout", "description": ""per-seat calculator is <n>" — rate times seat count equals total, laid out as a formula with a seat slider beneath; reach for it for any per-user SaaS price.", "categories": [ "role-pricing", "pricing", "seats", "calculator", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "care-instructions", "type": "registry:block", "title": "Care instructions", "description": ""spell out the care" — symbols and plain rules. The page a buyer returns to after the sale.", "categories": [ "role-product", "product", "spec", "list" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "provenance-chain", "type": "registry:block", "title": "Provenance chain", "description": ""show the chain" — origin to delivery as linked stages. Where a claim about sourcing becomes checkable.", "categories": [ "role-product", "product", "provenance", "trust" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "rating-summary", "type": "registry:block", "title": "Rating summary", "description": ""summarise the rating" — a score, a scale, and a count. Generic placeholders; swap in your real figures.", "categories": [ "role-testimonial", "testimonial", "proof", "rating" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "chevron-notch-seam", "type": "registry:block", "title": "Chevron notch seam", "description": ""notch the seam with a chevron" — a downward chevron sitting on the rule, marking the break without a label.", "categories": [ "role-seam", "seam", "divider", "detail" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "continues-below-descend-cue", "type": "registry:block", "title": "Continues-below descend cue", "description": ""cue that it continues below" — a short line and a drifting chevron pointing down, the scroll invitation that isn't an animated bounce.", "categories": [ "role-seam", "seam", "motion", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "double-hairline-centred-dot", "type": "registry:block", "title": "Double hairline with centred dot", "description": ""run two hairlines with a dot between" — a quieter seam than one rule, for a break that shouldn't shout.", "categories": [ "role-seam", "seam", "divider", "minimal" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "rotated-stamp-tag-seam", "type": "registry:block", "title": "Rotated stamp-tag seam", "description": ""stamp a rotated tag on the seam" — a small angled label sitting on the rule like a marginal note.", "categories": [ "role-seam", "seam", "divider", "detail" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "tone-shift-band-seam", "type": "registry:block", "title": "Tone-shift band seam", "description": ""shift the tone at the seam" — the section background itself changes across the band, not just a rule.", "categories": [ "role-seam", "seam", "divider", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "progress-ladder", "type": "registry:block", "title": "Progress ladder", "description": ""ladder the progress" — labelled bars stacked on a shared scale, so the comparison is the point.", "categories": [ "role-stats", "stats", "progress", "list" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "headline-footnote-annotation", "type": "registry:block", "title": "Headline with footnote annotation", "description": ""put a footnote mark on the headline" — a superscript reference and its note, the kind of detail that reads as set, not generated.", "categories": [ "role-type", "type", "editorial", "detail" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "numbered-chapter-heading", "type": "registry:block", "title": "Numbered chapter heading", "description": ""give it a chapter number" — a big set numeral, a kicker, and the title, the way a printed section opener reads.", "categories": [ "role-type", "type", "editorial", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "gradient-filled-word", "type": "registry:block", "title": "Gradient-filled word", "description": ""fill one word with the gradient" — background-clip:text on a single word inside a plain sentence, built from the two accent tokens.", "categories": [ "role-type", "type", "gradient", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hanging-indent-paragraph-set", "type": "registry:block", "title": "Hanging-indent paragraph set", "description": ""set it with a hanging indent" — numbered lines whose wrapped text tucks under the mark, a citation-list rhythm.", "categories": [ "role-type", "type", "editorial", "print" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "two-size-stacked-lockup", "type": "registry:block", "title": "Two-size stacked lockup", "description": ""stack a huge word over a tiny one" — a display-size word with a mono caption underneath, the ratio doing the hierarchy.", "categories": [ "role-type", "type", "display", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "vertical-label-beside-headline", "type": "registry:block", "title": "Vertical label beside headline", "description": ""run a vertical tag beside the headline" — a rotated writing-mode label doing the job a kicker usually does, without eating a line.", "categories": [ "role-type", "type", "layout", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "weighted-clause-line", "type": "registry:block", "title": "Weighted clause line", "description": ""weight one clause, not the size" — a single sentence where the emphasis clause jumps in font-weight, not size, so the page stays quiet.", "categories": [ "role-type", "type", "editorial", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "wide-letter-spaced-label-row", "type": "registry:block", "title": "Wide letter-spaced label row", "description": ""spread the labels edge to edge" — a bordered row of words at maximum letter-spacing, justified to the full width.", "categories": [ "role-type", "type", "label", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "print-header", "type": "registry:block", "title": "Print header", "description": ""give it a print header" — document title, reference and date on a rule. For quotes, specs and anything a client saves as a PDF.", "categories": [ "role-chrome", "chrome", "print", "document" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "section-counter", "type": "registry:block", "title": "Section counter", "description": ""count the sections" — current over total, fixed in a corner. Orientation is what stops a page feeling endless.", "categories": [ "role-chrome", "chrome", "orientation", "meta" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "two-path-cta", "type": "registry:block", "title": "Two-path CTA", "description": ""give them two doors" — ready now versus not yet. Both are a yes; only one is a purchase.", "categories": [ "role-cta", "cta", "choice", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "inline-label-rows", "type": "registry:block", "title": "Inline-label rows", "description": ""labels on the same line" — a dense form that still reads. For settings and short intakes.", "categories": [ "role-form", "form", "layout", "compact" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "question-opener", "type": "registry:block", "title": "Question opener", "description": ""open with the question they came with" — their problem in their words, answered underneath.", "categories": [ "role-hero", "hero", "type", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "currency-region-switcher-row", "type": "registry:block", "title": "Currency and region switcher row", "description": ""currency switcher row is <n>" — a pill group for currency choice above the price it affects; reach for it for pricing pages that serve more than one region.", "categories": [ "role-pricing", "pricing", "currency", "region", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "enterprise-talk-us-panel-beside", "type": "registry:block", "title": "Enterprise talk-to-us panel beside two tiers", "description": "\"use 505\".", "categories": [ "role-pricing", "pricing", "enterprise", "tiers", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "fee-transparency", "type": "registry:block", "title": "Fee transparency", "description": ""show the fee openly" — cost, margin and total, stated rather than buried. Education-first pricing.", "categories": [ "role-pricing", "pricing", "trust", "breakdown" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "one-off-versus-subscription-pair", "type": "registry:block", "title": "One-off versus subscription pair", "description": ""one-off versus subscription is <n>" — two offers either side of a plain or; reach for it whenever a buyer can pay once or pay monthly for the same thing.", "categories": [ "role-pricing", "pricing", "subscription", "comparison", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "price-struck-through-comparison", "type": "registry:block", "title": "Price with struck-through comparison", "description": ""struck price comparison is <n>" — a struck-through figure beside the current one, labelled as an example to fill in; reach for it as the template for a real price change, not a fabric", "categories": [ "role-pricing", "pricing", "comparison", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "usage-tier-ladder", "type": "registry:block", "title": "Usage-tier ladder", "description": ""usage ladder is <n>" — a vertical rail of usage bands from free up to a custom top rung; reach for it for metered or consumption-based pricing.", "categories": [ "role-pricing", "pricing", "usage", "metered", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "inline-mention-line", "type": "registry:block", "title": "Inline mention line", "description": ""mention it inline" — proof folded into a sentence rather than boxed out. The least salesy form there is.", "categories": [ "role-testimonial", "testimonial", "proof", "type" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stepped-seam", "type": "registry:block", "title": "Stepped seam", "description": ""step down into the next act" — a staircase edge. Geometry instead of a straight line.", "categories": [ "role-seam", "seam", "divider", "geometric" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stitched-rule", "type": "registry:block", "title": "Stitched rule", "description": ""stitch the seam" — a dashed rule with a solid centre run. Reads bound rather than cut.", "categories": [ "role-seam", "seam", "divider", "texture" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "comparison-pair", "type": "registry:block", "title": "Comparison pair", "description": ""put the two numbers head to head" — before and after with the gap between them stated.", "categories": [ "role-stats", "stats", "compare", "metrics" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "marker-underline", "type": "registry:block", "title": "Marker underline", "description": ""mark the phrase" — a hand-drawn-feeling underline under the words that matter.", "categories": [ "role-type", "type", "highlight", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "focus-ring", "type": "registry:block", "title": "Focus ring", "description": ""make the focus ring visible" — the accessibility detail almost everyone deletes. Tab into it and see.", "categories": [ "role-chrome", "chrome", "a11y", "focus" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "progress-cta", "type": "registry:block", "title": "Progress CTA", "description": ""show them how far in they are" — a progress rule above the ask. Nearly-done is the strongest reason to finish.", "categories": [ "role-cta", "cta", "progress", "form" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "one-question-at-time", "type": "registry:block", "title": "One question at a time", "description": ""ask one question at a time" — the typeform shape. Less intimidating than a wall of fields.", "categories": [ "role-form", "form", "conversational", "intake" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "index-card-hero", "type": "registry:block", "title": "Index-card hero", "description": ""open like an index card" — title, ref, and three meta rows. Archival rather than promotional.", "categories": [ "role-hero", "hero", "editorial", "meta" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "marquee-band-hero", "type": "registry:block", "title": "Marquee band hero", "description": ""run the title as a band" — the headline itself travels. Loud, and it earns the noise by being the only motion.", "categories": [ "role-hero", "hero", "marquee", "motion" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "what-changes-by-tier", "type": "registry:block", "title": "What changes by tier", "description": ""show only what CHANGES between tiers" — the rows that are identical are noise. Cut them.", "categories": [ "role-pricing", "pricing", "compare", "clarity" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "case-strip", "type": "registry:block", "title": "Case strip", "description": ""strip the case study down" — what, what changed, over how long. Three facts beat three paragraphs.", "categories": [ "role-testimonial", "testimonial", "proof", "case" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "inset-corner-seam", "type": "registry:block", "title": "Inset corner seam", "description": ""notch the corner" — the next panel steps in from one edge. A seam with a direction.", "categories": [ "role-seam", "seam", "geometric", "divider" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "share-split-bar", "type": "registry:block", "title": "Share split bar", "description": ""split one bar by share" — proportions in a single rule, legend underneath. Clearer than a pie, always.", "categories": [ "role-stats", "stats", "proportion", "chart" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "lead-dek", "type": "registry:block", "title": "Lead and dek", "description": ""set a lead and a dek" — the newspaper pairing: a heavy line, then a lighter one that carries the detail.", "categories": [ "role-type", "type", "editorial", "hierarchy" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "new-device-sign-approval", "type": "registry:block", "title": "New device sign-in approval", "description": ""device approval is <n>" — a new-sign-in card with device rows and Approve/Deny; the visual only, wire it to your own session security.", "categories": [ "role-auth", "auth", "security", "device", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "organisation-invite-accept-card", "type": "registry:block", "title": "Organisation invite accept card", "description": ""invite accept card is <n>" — an avatar-led banner naming who invited you and to where, with Accept/Decline; the visual only, wire it to your own invite system.", "categories": [ "role-auth", "auth", "invite", "organisation", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "account-lockout-cooldown-notice", "type": "registry:block", "title": "Account lockout cooldown notice", "description": ""lockout notice is <n>" — a too-many-attempts card with a static cooldown readout and a depleting bar; the visual only, wire it to your own rate-limit state.", "categories": [ "role-auth", "auth", "lockout", "security", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "multistep-signup-step-indicator", "type": "registry:block", "title": "Multistep signup with step indicator", "description": ""multistep signup is <n>" — a three-step indicator over the current step's field; the visual only, wire it to your own signup flow.", "categories": [ "role-auth", "auth", "signup", "steps", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "password-field-strength-meter", "type": "registry:block", "title": "Password field with strength meter", "description": ""strength meter is <n>" — a segmented strength bar and a requirements checklist under a password field; a static visual demo, wire it to your own validation.", "categories": [ "role-auth", "auth", "password", "strength", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "recovery-codes-checkbox-reveal", "type": "registry:block", "title": "Recovery codes with checkbox reveal", "description": ""recovery codes are <n>" — a blurred code grid that sharpens when a checkbox is checked, pure CSS via :has(); reach for it wherever backup codes need a deliberate look-before-you-copy ", "categories": [ "role-auth", "auth", "recovery", "backup-codes", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "account-type-selection-cards", "type": "registry:block", "title": "Account type selection cards", "description": ""role select cards are <n>" — three radio-driven cards for choosing an account type, no JS; reach for it as the step right after signup, before the workspace exists.", "categories": [ "role-auth", "auth", "onboarding", "cards", "radio", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "scrollable-terms-consent-gate", "type": "registry:block", "title": "Scrollable terms consent gate", "description": ""terms consent gate is <n>" — a fixed-height scrollable terms box with a fade edge, gating a dimmed Continue button until the checkbox is checked, via :has(); reach for it wherever agr", "categories": [ "role-auth", "auth", "consent", "terms", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "blockout-collage", "type": "registry:block", "title": "Blockout collage", "description": ""block it out like a collage" — three solid rectangles overlapped at low opacity, one rule crossing through. Bauhaus, not gradient.", "categories": [ "role-background", "background", "geometric", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "conic-spoke-wheel", "type": "registry:block", "title": "Conic spoke wheel", "description": ""spin a spoke wheel behind it" — repeating-conic-gradient spokes turning once a minute. Reads as machined, not decorative.", "categories": [ "role-background", "background", "conic-gradient", "ambient" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "corner-register-marks", "type": "registry:block", "title": "Corner register marks", "description": ""put registration marks in the corners" — a print-shop crosshair and four bracket corners. Structure without a single gradient.", "categories": [ "role-background", "background", "technical", "frame" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "facet-shard-cluster", "type": "registry:block", "title": "Facet shard cluster", "description": ""scatter some facets behind it" — five clip-path shards at odd angles, low opacity, like broken glass caught in low light.", "categories": [ "role-background", "background", "css", "geometric", "clip-path" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "halftone-dither", "type": "registry:block", "title": "Halftone dither", "description": ""dither it like halftone" — two dot grids at different scales, each masked to its own corner, so density itself does the shading.", "categories": [ "role-background", "background", "dots", "texture" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "orbit-rings", "type": "registry:block", "title": "Orbit rings", "description": ""put an orbit behind it" — three bordered rings and a single point circling them, like a diagram of a very small solar system.", "categories": [ "role-background", "background", "rings", "motion" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "ridge-silhouette", "type": "registry:block", "title": "Ridge silhouette", "description": ""lay a ridge line behind it" — three clip-path horizons stacked for depth, the furthest drifting almost too slow to notice.", "categories": [ "role-background", "background", "css", "depth", "clip-path" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sheen-sweep", "type": "registry:block", "title": "Sheen sweep", "description": ""pass a sheen through it" — one hard-edged band of light crossing the panel on a loop, like brushed metal catching a window.", "categories": [ "role-background", "background", "gradient", "motion" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "diagonal-split-content-panel", "type": "registry:block", "title": "Diagonal split content panel", "description": ""cut the content on a diagonal" — a clip-path wedge sets one statement apart from the next, without a straight rule down the middle.", "categories": [ "role-content", "content", "compare", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "annotated-diagram-pins", "type": "registry:block", "title": "Annotated diagram pins", "description": ""pin the diagram and list it" — an inline SVG connects numbered points to a plain-text legend. For anything that needs a labelled part more than a caption.", "categories": [ "role-content", "content", "diagram", "svg" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "drop-cap-column-feature", "type": "registry:block", "title": "Drop-cap column feature", "description": ""run it in drop-cap columns" — real multi-column text with a magazine-style oversized first letter. For an opening feature, not a whole page of body copy.", "categories": [ "role-content", "content", "editorial", "columns" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "filmstrip-content-scroller", "type": "registry:block", "title": "Filmstrip content scroller", "description": "\"use 544\".", "categories": [ "role-content", "content", "scroll", "cards" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "margin-line-numbered-clauses", "type": "registry:block", "title": "Margin line-numbered clauses", "description": ""number the clauses down the margin" — a real ordered list with CSS-counter line numbers hung in the gutter, the way a contract or spec reads. Not a ledger — flowing sentences, not label/val", "categories": [ "role-content", "content", "legal", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "corkboard-note-wall", "type": "registry:block", "title": "Corkboard note wall", "description": ""pin it to a corkboard" — a dense grid of slightly rotated note cards, uneven on purpose. For loose observations that should not look like a tidy list.", "categories": [ "role-content", "content", "notes", "grid" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sticky-index-scroll-pane", "type": "registry:block", "title": "Sticky index scroll pane", "description": ""pin the group labels as it scrolls" — position:sticky category headers inside their own scroll pane, the iOS-contacts move. For scope lists long enough to need it.", "categories": [ "role-content", "content", "list", "sticky" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "tabbed-content-switch", "type": "registry:block", "title": "Tabbed content switch", "description": ""switch the content in tabs" — real radio inputs and :has(), no JS, so one panel of copy replaces another on click. For overview/specs/notes style content.", "categories": [ "role-content", "content", "tabs", "interactive" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "activity-heatmap-grid", "type": "registry:block", "title": "Activity heatmap grid", "description": ""heatmap grid is <n>" — a grid of cells shaded by intensity with a Less-to-More legend; reach for it as a contribution-style activity panel. Illustrative pattern only, not live data.", "categories": [ "role-dashboard", "dashboard", "heatmap", "activity", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "period-comparison-split", "type": "registry:block", "title": "Period comparison split", "description": ""comparison split is <n>" — two centred figures either side of an arrow, this period against last; reach for it wherever a dashboard needs one number set against another. Layout only —", "categories": [ "role-dashboard", "dashboard", "comparison", "metric", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "nested-file-tree-list", "type": "registry:block", "title": "Nested file tree list", "description": ""file tree is <n>" — native <details> folders holding indented file rows, keyboard-operable with no JS; reach for it as a compact file or resource browser inside a dashboard.", "categories": [ "role-dashboard", "dashboard", "tree", "files", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "onboarding-checklist-progress-ring", "type": "registry:block", "title": "Onboarding checklist with progress ring", "description": ""onboarding ring is <n>" — a conic-gradient progress ring beside a step checklist; reach for it as a setup-completion card. Layout only — wire real step state in.", "categories": [ "role-dashboard", "dashboard", "onboarding", "checklist", "progress", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "page-header-breadcrumb-actions", "type": "registry:block", "title": "Page header with breadcrumb and actions", "description": ""page header is <n>" — breadcrumb and title on the left, a secondary and primary action on the right, on a shared hairline; reach for it as the top bar of a dashboard working page.", "categories": [ "role-dashboard", "dashboard", "header", "breadcrumb", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "permission-matrix-table", "type": "registry:block", "title": "Permission matrix table", "description": ""permission matrix is <n>" — roles across the top, permissions down the side, dots at the intersections; reach for it as a roles-and-access settings screen. Layout only — no live grant", "categories": [ "role-dashboard", "dashboard", "permissions", "table", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "reorderable-list-drag-handles", "type": "registry:block", "title": "Reorderable list with drag handles", "description": ""reorder list is <n>" — rows carrying a six-dot drag handle and an order badge; a static illustration of the affordance, wire real drag-and-drop in yourself.", "categories": [ "role-dashboard", "dashboard", "reorder", "list", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "segmented-tab-panel-switcher", "type": "registry:block", "title": "Segmented tab panel switcher", "description": ""tab switcher is <n>" — a segmented-control tab row swapping the panel below via radio inputs, no JS; reach for it to switch between Overview/Details/Logs style views inside one dashbo", "categories": [ "role-dashboard", "dashboard", "tabs", "radio", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "accordion-sitemap-footer", "type": "registry:block", "title": "Accordion sitemap footer", "description": ""collapse the sitemap into an accordion" — real <details> groups, no JS, the mobile-footer move. First group shown open, the rest close to one row.", "categories": [ "role-footer", "footer", "sitemap", "platform-native", "native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "bento-contact-footer", "type": "registry:block", "title": "Bento contact footer", "description": ""lay the footer out as a bento" — asymmetric grid-template-areas cells for contact, social, location and legal instead of equal columns.", "categories": [ "role-footer", "footer", "grid", "contact" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "diagonal-band-footer", "type": "registry:block", "title": "Diagonal band footer", "description": ""cut the closer on a diagonal" — an accent-coloured clip-path wedge carries the closing line and CTA above a plain link row.", "categories": [ "role-footer", "footer", "cta", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "expanding-column-footer", "type": "registry:block", "title": "Expanding column footer", "description": ""let a footer column expand on hover" — flex-grow transition widens whichever column the cursor is on; shown here with Work pre-expanded.", "categories": [ "role-footer", "footer", "hover", "columns" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "orbit-badge-footer", "type": "registry:block", "title": "Orbit badge footer", "description": ""put the CTA in a spinning seal" — a conic-gradient dashed ring rotates slowly around a plain-language contact badge.", "categories": [ "role-footer", "footer", "cta", "motion" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "tabbed-footer-panels", "type": "registry:block", "title": "Tabbed footer panels", "description": ""give the footer its own tabs" — radio inputs and :has() switch between Contact, Sitemap and Legal without leaving the footer.", "categories": [ "role-footer", "footer", "tabs", "interactive" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "tag-cloud-wall-footer", "type": "registry:block", "title": "Tag-cloud wall footer", "description": ""wall the links instead of columning them" — a dense grid of chip-sized links with a couple pulled wide, for pages with too many links to make three neat columns.", "categories": [ "role-footer", "footer", "sitemap", "grid" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "torn-edge-footer", "type": "registry:block", "title": "Torn-edge footer", "description": ""tear the top edge of the footer" — a repeating mask cuts a ticket-stub scallop along the top of the footer surface, plain sign-off underneath.", "categories": [ "role-footer", "footer", "editorial", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "asymmetric-bento", "type": "registry:block", "title": "Asymmetric bento", "description": ""lay it out as an asymmetric bento" — named grid areas instead of a span, so one tall cell and one wide cell can both break the rhythm at once.", "categories": [ "role-gallery", "gallery", "grid", "bento" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "flip-card-pair", "type": "registry:block", "title": "Flip card pair", "description": ""flip them to reveal a caption" — a real 3D rotateY flip on hover or focus, caption on the back face, no overlay trick.", "categories": [ "role-gallery", "gallery", "3d", "hover" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "hex-cluster", "type": "registry:block", "title": "Hex cluster", "description": ""cluster them as hexagons" — three clip-path hexagons interlocked like a honeycomb, instead of another rectangle grid.", "categories": [ "role-gallery", "gallery", "css", "honeycomb", "clip-path" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "marquee-loop-row", "type": "registry:block", "title": "Marquee loop row", "description": ""run it as a marquee" — small frames scrolling in an unbroken loop, the set duplicated once so the seam never shows.", "categories": [ "role-gallery", "gallery", "motion", "loop" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "radial-orbit-thumbs", "type": "registry:block", "title": "Radial orbit thumbs", "description": ""orbit the thumbs around the main frame" — four small frames at compass points around a centre piece, instead of a row underneath it.", "categories": [ "role-gallery", "gallery", "radial", "thumbs" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "stair-step-row", "type": "registry:block", "title": "Stair-step row", "description": ""step them down like stairs" — four frames in a plain flex row, each one sitting a little lower than the last. No overlap, no rotation.", "categories": [ "role-gallery", "gallery", "layout", "rhythm" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "torn-edge-strip", "type": "registry:block", "title": "Torn-edge strip", "description": ""tear the edges where they overlap" — a zigzag clip-path on the trailing edge of each frame, like torn perforated sheets fanned out.", "categories": [ "role-gallery", "gallery", "css", "texture", "clip-path" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "vertical-rail-strip", "type": "registry:block", "title": "Vertical rail strip", "description": ""index them down a rail" — frames stacked vertically off a single connecting line, each one marked by a dot rather than a number.", "categories": [ "role-gallery", "gallery", "vertical", "index" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "diagonal-notch-caption", "type": "registry:block", "title": "Diagonal notch caption", "description": ""cut a notch for the caption" — the media panel loses a diagonal corner and the caption sits in exactly the space it gave up.", "categories": [ "role-media", "media", "css", "editorial", "clip-path" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "folded-index-card", "type": "registry:block", "title": "Folded index card", "description": ""file it as an index card" — a media frame with a small filed tab above it, like a contact sheet pulled from a drawer.", "categories": [ "role-media", "media", "card", "editorial" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "peel-corner-reveal", "type": "registry:block", "title": "Peel corner reveal", "description": ""peel the corner" — a lifted paper-corner fold over a media frame that curls further on hover, revealing the layer underneath.", "categories": [ "role-media", "media", "css", "hover", "clip-path" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "picture-picture-overlay", "type": "registry:block", "title": "Picture-in-picture overlay", "description": ""drop a picture-in-picture on it" — a small inset frame overlapping the main media's corner, the way a webcam sits on a screen share.", "categories": [ "role-media", "media", "overlay", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "radial-progress-ring", "type": "registry:block", "title": "Radial progress ring", "description": ""ring the play button with progress" — a conic-gradient arc showing how much has been watched, wrapped around the resume control.", "categories": [ "role-media", "media", "conic-gradient", "video" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "scrub-bar-chapter-marks", "type": "registry:block", "title": "Scrub bar with chapter marks", "description": ""show the scrub marks" — a play frame over a progress rail with tick marks at the chapter breaks and a thumb sitting mid-scrub.", "categories": [ "role-media", "media", "video", "controls" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "subtitle-track-bar", "type": "registry:block", "title": "Subtitle track bar", "description": ""give it a caption track" — a solid subtitle plate fixed under the frame with a CC chip and a timecode, not a scrim over the image.", "categories": [ "role-media", "media", "captions", "video" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "vertical-frame-action-rail", "type": "registry:block", "title": "Vertical frame with action rail", "description": ""give it a vertical frame and a rail" — a tall 9:16 media panel with stacked counters beside it, the short-form clip layout.", "categories": [ "role-media", "media", "vertical", "layout" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "scroll-snap-chip-rail", "type": "registry:block", "title": "Scroll-snap chip rail", "description": ""let the categories scroll and snap" — a horizontal row of filter chips with native scroll-snap, edges faded to show there is more. For catalogues with too many categories for one row.", "categories": [ "role-nav", "nav", "filter", "scroll" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "corner-anchored-nav", "type": "registry:block", "title": "Corner-anchored nav", "description": ""anchor the nav in the corner" — mark top-left, links stacked top-right, a status line bottom-left; no bar, no rule, the page corner does the organising.", "categories": [ "role-nav", "nav", "layout", "asymmetric" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "disclosure-drawer-nav", "type": "registry:block", "title": "Disclosure drawer nav", "description": ""make it a native drawer" — a real <details> element as the menu toggle, no JS, keyboard-operable for free. Shown open here; it collapses to one row on click.", "categories": [ "role-nav", "nav", "mobile", "platform-native", "native" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "index-dot-scrollspy-nav", "type": "registry:block", "title": "Index dot scrollspy nav", "description": ""index the sections as dots" — numbered dot pagination on a connecting line, current section enlarged; a horizontal alternative to a side anchor list.", "categories": [ "role-nav", "nav", "index", "pagination" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "marquee-alert-bar-nav", "type": "registry:block", "title": "Marquee alert bar nav", "description": ""put a scrolling alert above the nav" — a thin ticker strip carries one line of status, the plain link row sits underneath it.", "categories": [ "role-nav", "nav", "marquee", "motion" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "preview-flyout-nav", "type": "registry:block", "title": "Preview flyout nav", "description": ""flyout a preview under the link" — a small panel with a pointer sits under the current item and swaps to whichever link is hovered. Shown open under the current page.", "categories": [ "role-nav", "nav", "hover", "preview" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "skewed-tab-deck-nav", "type": "registry:block", "title": "Skewed tab deck nav", "description": ""cut the tabs on a skew" — interlocking parallelogram tabs built from a skewed pseudo-element, not a clip-path chevron; reach for it on a secondary section nav that wants an edge.", "categories": [ "role-nav", "nav", "tabs", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "two-tier-utility-nav", "type": "registry:block", "title": "Two-tier utility nav", "description": ""give it a utility row above the nav" — a thin status/support strip stacked over the main bar, split by a hairline. For a nav that needs to say one more thing before the links.", "categories": [ "role-nav", "nav", "layout", "utility" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "sticky-buy-bar", "type": "registry:block", "title": "Sticky buy bar", "description": ""buy bar is <n>" — a horizontal bar with the item, a quantity stepper, and add-to-cart, meant to pin to the viewport; reach for it once the price is scrolled out of view but the decisi", "categories": [ "role-product", "product", "buy-bar", "sticky", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "certification-badge-grid", "type": "registry:block", "title": "Certification badge grid", "description": ""certification grid is <n>" — abstract seal marks over a caption, laid out two-up; reach for it to state compliance or standards a product meets without borrowing a real mark you don't", "categories": [ "role-product", "product", "certification", "badges", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "downloadable-resources-list", "type": "registry:block", "title": "Downloadable resources list", "description": ""downloads list is <n>" — a hairline-divided list of documents with a filetype tag and a download arrow; reach for it for spec sheets, assembly guides, or warranty cards attached to a ", "categories": [ "role-product", "product", "downloads", "documents", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "live-configurator-options-drive-shared", "type": "registry:block", "title": "Live configurator, options drive a shared preview", "description": ""live configurator is <n>" — one row of radio options updates a preview swatch AND a caption elsewhere on the page, pure CSS, no JS; reach for it wherever a choice should visibly chang", "categories": [ "role-product", "product", "configurator", "radio", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "spec-list-hover-defined-terms", "type": "registry:block", "title": "Spec list with hover-defined terms", "description": ""glossary spec list is <n>" — spec rows with a small marker that reveals a plain-words definition on hover or focus; reach for it when a spec sheet uses jargon a buyer shouldn't have t", "categories": [ "role-product", "product", "spec", "glossary", "tooltip", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "360-spin-viewer-static-illustration", "type": "registry:block", "title": "360 spin viewer, static illustration", "description": ""spin viewer is <n>" — a slow-turning ring and a drag hint standing in for a 360 product viewer; a static illustration of the affordance, wire the actual frame-swap in yourself.", "categories": [ "role-product", "product", "spin", "360", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "tabbed-spec-groups", "type": "registry:block", "title": "Tabbed spec groups", "description": ""tabbed specs are <n>" — radio-driven CSS-only tabs switching between spec categories, no JS; reach for it as an alternative to an accordion when the sections are peers, not a stack.", "categories": [ "role-product", "product", "tabs", "spec", "radio", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } }, { "name": "trust-badge-row", "type": "registry:block", "title": "Trust badge row", "description": ""trust row is <n>" — three hairline-divided policy items with a mark and a line each; reach for it right under the buy button to answer shipping, returns, and warranty before the buyer", "categories": [ "role-product", "product", "trust", "shipping", "returns", "css" ], "meta": { "frameworks": [ "react", "vue", "svelte", "vanilla" ] } } ] }