claude-directory — AI-generated UI experiments built with Claude

An open-source gallery of web UI experiments generated with Claude (Fable 5) — landing pages, hero sections, GLSL shaders, design systems, animations, portfolios, and 3D/WebGL scenes. Every project is self-contained, ships its prompt, and includes a recorded demo. Browse the live directory at pulkitxm.com/claude-directory.

Built mostly with React, TypeScript, Vite, Tailwind CSS, Three.js, Framer Motion, and GSAP (plus plenty of framework-free HTML/CSS/JS) — a reference collection of copy-pasteable, AI-generated front-end components and templates for anyone exploring what Claude can build on the web.

Categories: Hero sections · Landing pages · Shaders · UI design systems · Components & UI · Portfolios · Animations & loaders · 3D & games · Templates

Each project folder includes the originating prompt as prompt.md, preserved alongside the generated code. Some prompts were inspired by or adapted from public prompt/design references, including cnemri's gist, motionsites.ai, lafys.com, designprompts.dev, 21st.dev, superdesign.dev, and landinghero.ai.

Heads up: every project here was generated with Claude Fable 5 — this whole repo is vibe coded. Use it with care: review the code, check dependencies, verify accessibility/responsiveness, and run the local project checks before shipping anything to production.

Contributing

Got a cool experiment? Toss it in. No issues, no templates, no ceremony — just shoot a PR.

Only two things are non-negotiable:

• prompt.md — the prompt you used to generate the project, dropped in the project folder.
• demo.mp4 — a short screen recording of the thing actually working.

Beyond that, do whatever: any stack, any vibe, as long as your project lives in its own self-contained folder. Bonus points if you add a row to the table below, but no stress if you forget.

Once your demo.mp4 is in, generate its poster so the directory can show a sharp placeholder while the video loads (node scripts/generate-posters/generate-posters.mjs). This writes a poster.jpg next to the video and updates the root posters.json manifest — see scripts/generate-posters.

All PRs get reviewed and merged by Claude Opus, so don't be shy — if the prompt and demo are there, you're golden. 🤙

Projects are grouped by what they are. Each lives in its category folder (e.g. ./hero-sections/<project>/).

Hero sections (41)

Project	Description	Stack
aethera-cinematic-hero	Cinematic hero for Aethera with video-driven visual treatment and headless verification	React, TypeScript, Vite, Tailwind CSS
ai-builder-dark-hero	Dark-mode hero section for an AI website builder with animated reveals and HLS video streaming	React, TypeScript, Vite, Tailwind CSS, Motion, hls.js, Lucide
altitude-index-h38	Editorial expedition-outfitter bento hero ("Warm Cartography") on warm paper with an ember accent, parallax photo tiles, fullscreen menu, and a scrolling coordinate ticker	HTML, CSS, JavaScript, Space Grotesk
animated-text-rotate-hero	shadcn/ui animated hero integration with spring word-rotation, hosted in a midnight-teal "Spektr" trade-desk shell with a live ticker	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Framer Motion, Lucide
bloom-liquid-glass-hero	Bloom hero experiment with floral imagery, liquid-glass styling, and generated visual assets	React, TypeScript, Vite, Tailwind CSS
cinematic-stream-hero	LUMIERE full-viewport streaming hero with looping cinematic background video	React, TypeScript, Vite, Tailwind CSS
codenest-hero	Dark coding-education hero for "CodeNest" with an HLS (Mux) video background, grid lines, central glow, and a liquid-glass floating card	React, TypeScript, Vite, Tailwind CSS, hls.js, Lucide, Vitest
convix-pr-agency-hero	Full-viewport hero for PR-agency SaaS "Convix Software" with a rounded-card layout, background video, and floating pill navbar	React, TypeScript, Vite, Tailwind CSS, Lucide
datacore-video-hero	Responsive full-screen hero with a purple palette and an opaque fullscreen video background	React, TypeScript, Vite, Tailwind CSS, Lucide
designpro-video-hero	Full-screen hero for product-design education platform "DesignPro" with a looping video background and animated shiny gradient heading	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide
digital-epoch-hero	Rounded-card hero with looping video background, floating glass bottom navbar, and seamless CSS marquee logo scroller	React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide
equilibrium-liquid-glass-hero	Full-screen "Equilibrium" wellness hero with a liquid-glass UI over a looping background video	React, TypeScript, Vite, Tailwind CSS, Lucide
fearless-vision-hero	Full-screen hero with a background video, deep-purple accent, and Inter typography	React, JavaScript, Vite, Tailwind CSS, Framer Motion, Lucide
helix-vault-h55	"Institutional Crypto Terminal" hero for Helix Vault — emerald blade of light, glass portfolio dashboard mockup with count-up balance, growing bar chart, live ticker and scan-line, all framework-free	HTML, CSS, JavaScript, DM Sans
ironclad-password-hero	Password-manager hero section for Ironclad with animated product-style presentation	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide
kubric-hero-landing	Desktop-only dark hero for fictional studio "Kubric™" with a looping background video, an 8-layer progressive bottom blur, a self-drawing animated SVG logo, a character-by-character headline, and a video-ready reveal sequence	TanStack Start, React 19, Vite 7, Tailwind CSS v4
mainframe-hero-landing	Full-screen hero landing page for a creative agency called "Mainframe" with custom Helvetica Now display fonts	React, TypeScript, Vite, Tailwind CSS
monocrit-studio-h27	Interactive near-monochrome Swiss-brutalist studio hero with a cursor-following image card, magnetic headline letters, and movement-driven image cycling	HTML, CSS, JavaScript, Bricolage Grotesque
nexora-automation-hero	Single-viewport SaaS automation hero ("Nexora") with Instrument Serif / Inter type and Framer Motion	React, TypeScript, Vite, Tailwind CSS, Framer Motion, shadcn/ui, Lucide
noctis-cinematic-hero	NOCTIS full-screen dark cinematic hero with video background, nav, and timecode details	React, TypeScript, Vite, CSS
particle-hero	Night-sky particle-canvas hero with a clickable gold-mode invert toggle, rotating spotlights, and a radial-reveal headline	React, TypeScript, Vite, Tailwind CSS, Canvas 2D, shadcn/ui, Lucide
power-ai-hero	Full-screen dark AI hero with a JS-controlled fade-loop background video, headline, CTA, and logo marquee	React, TypeScript, Vite, Tailwind CSS, Geist Sans, Lucide
prisma-noir-h52	"Spectral darkroom" creative-director hero with drifting screen-blended color blobs, a clipped rotating-word headline, cursor parallax, and a fullscreen discover menu with hover image tickers	HTML, CSS, JavaScript, Manrope, Titillium Web
rivr-defi-hero	DeFi dashboard hero for RIVR with glassmorphism, badge/cards, and verification script	React, TypeScript, Vite, Tailwind CSS
securify-data-hero	Full-screen hero section for a fictional data-security SaaS called securify	React, TypeScript, Vite, Tailwind CSS
sentinel-ai-hero	Full-screen dark hero for security company "Sentinel AI" with an embedded Spline 3D scene background	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Spline
shape-landing-hero	shadcn integration of Kokonut UI's HeroGeometric — animated geometric shapes, gradient headline and a live props playground on a near-black canvas	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide, shadcn/ui
skyelite-jet-hero	Premium private jet hero section with full-viewport video background and luxury UI treatment	React, TypeScript, Vite, Tailwind CSS
smart-prosthetics-hero	Single-page hero with a fullscreen video background and pill-style navbar for a smart-prosthetics concept	React, TypeScript, Vite, Tailwind CSS, Lucide
stellar-ai-landing-hero	"Stellar.ai" landing hero on a white background with staggered fade-in animations and Inter type	React, TypeScript, Vite, Tailwind CSS, Lucide
synex-wealth-hero	Editorial-minimal full-viewport hero for fictional wealth platform "Synex" on a warm paper background, with two photorealistic stones that reveal a cursor-following moss patch via a spring-driven radial mask, and a staggered blur-up load cascade	React 18, Vite, TypeScript, Tailwind CSS, Framer Motion, Lucide
taskly-liquid-glass-hero	High-fidelity "liquid glass" hero for Taskly with a sticky glass navbar and dual-column layout on a white gradient-glow background	React, Vite
toonhub-figurine-carousel	TOONHUB full-viewport character figurine carousel hero	React, TypeScript, Vite, Tailwind CSS, Lucide
transform-data-hero	Modern hero with a looping video background and a custom requestAnimationFrame fade system	React, TypeScript, Vite, Tailwind CSS
vanguard-hero-landing	Fullscreen hero landing page for the creative agency VANGUARD with looping background video	React, TypeScript, Vite, Tailwind CSS
vaultshield-hero	VaultShield hero experiment with security-product positioning and CLI/headless verification	React, TypeScript, Vite, Tailwind CSS
velorah-hero-landing	Velorah hero landing page built with a modern Tailwind/shadcn-style component approach	React, TypeScript, Vite, Tailwind CSS, shadcn/ui
verdant-advisory-h10	Quiet-luxury advisory hero — oversized forest-green card, Hedvig serif headline, floating glass stat chip, infinite trust marquee, count-up stats and approach cards on a white canvas	HTML, CSS, Vanilla JS
wanderful-cinematic-hero	Full-viewport cinematic hero for travel brand "Wanderful" with GSAP animation and a custom display font	React, TypeScript, Vite, Tailwind CSS, GSAP, Lucide
woven-light-hero	Interactive hero with 50k cursor-reactive Three.js particles woven into a torus-knot tapestry, integrated as a shadcn-style component	React, TypeScript, Vite, Tailwind CSS, Three.js, Framer Motion
xero-encryption-hero	Single-page encryption-product hero for "Xero" with an animated icon pipeline and a pink-magenta gradient arc on a black page, written in plain CSS	React, TypeScript, Vite, CSS

Landing pages (98)

Project	Description	Stack
aegis-console-h39	"Precision Grid" cybersecurity SaaS landing for "Aegis" — white/bone canvas with one electric-lime accent, a fading hairline grid hero, a live security-console product mockup (animated lime SVG chart that draws itself, counting threat stats, pulsing status nodes), feature grid, ink count-up metrics band, 01–03 how-it-works with alert-feed/risk-bar/playbook mockups, three-tier pricing, and a gridded final CTA	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
almond-hours-h65	"Warm Clinical Editorial" dignified-care senior-living landing for "Almond Hours" — near-white paper with almond-ink neutrals and a butter-cream tint, a floating rounded mega-menu nav with flip hovers, an infinite photo marquee, a dual-headline hero with text-wipe reveal, a horizontal width-morphing programs accordion with layered image stacks, a healthcare bento grid, a single-open FAQ, a wipe-fill CTA banner, and a cursor-reveal giant wordmark	HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts
amber-foundry-h9	Warm editorial-intelligence landing page for fictional enterprise-AI consultancy "Amber Foundry" — cream/amber/roasted-brown palette, animated canvas neural-network hero, auto-advancing interactive solutions panel, bento method grid, and a dark pricing flip	HTML, CSS, Vanilla JS, Canvas, vendored fonts
amberhaus-pet-atelier-h31	"Amberhaus" warm-amber luxury pet-boutique landing — crisp white paper with a single amber-gold accent and butter-cream tints, Bricolage Grotesque display + Playfair italic flourishes, a crossfading triptych hero with parallax center panel, services+boutique bento, a horizontal-scroll founder story, vertical marquee testimonials, a jumping-type footer canvas, paw cursor, and a slide-up booking overlay	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
archway-summit-h21	"Gallery Arch" tech-conference landing for "Archway Summit" — near-black editorial gallery framing headline speakers inside tall pastel museum arches (pink/blue/beige/yellow), grayscale-to-color portraits, mono schedule with Day 1/Day 2 toggle, FAQ accordion, and an inverted white final-CTA panel	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
asme-hero-landing	Full-screen dark Asme landing page with Mux/HLS-style video, liquid-glass navbar, and email-capture CTA	React, JavaScript, Vite, CSS
asme-liquid-glass-landing	Dark cinematic Asme single-page landing site with liquid-glass UI details	React, TypeScript, Vite, Tailwind CSS
astral-veil-h6	Cosmic-nocturne SaaS landing for "Novela" — near-black canvas, violet/cobalt nebula glows, frosted glass, Playfair Display headlines, CSS starfield, drifting UI fragments, trust marquee, and a floating constellation of integration capsules	HTML, CSS, Vanilla JS
atelier-noir-h7	"Maison Éclisse" — a quiet, editorial haute-couture fashion-house lookbook (Atelier Noir aesthetic) on an ink-on-bone palette with Cormorant Garamond serif display, full-bleed hero, rotating seal badge, alternating diptychs, a staggered product grid, an editorial banner, journal, and slide-in menu/search overlays	HTML, CSS, JavaScript, IntersectionObserver, self-hosted fonts
atelier-press-h51	"Atelier Press" editorial paper-grid creative-workspace membership landing — warm cream (#FFFDF0) paper on near-black ink with a single vermilion (#E64E2A) accent, vendored Familjen Grotesk display + Arial body, a hairline modular grid with a 62/38 split hero (giant -0.06em headline + tall portrait photo over a full-bleed landscape band), a paused-on-hover keyword marquee, an indexed 2×2 spaces grid with nudging ↗ arrows, an underline-marked manifesto, a four-up stats band, three hairline membership plans, and an email-capture closer; IntersectionObserver reveal-ups, image hover scales, prefers-reduced-motion aware, fully offline	HTML, CSS, vanilla JS, Familjen Grotesk
aura-email-landing	Dark, cinematic landing page for "Aura", an AI-native email client, with fullscreen video, a shiny gradient headline, a macOS-style menu bar, and a liquid-glass inbox mockup	React, TypeScript, Vite, Tailwind CSS, Motion, Lucide, Supabase
auric-clinic-glow-h37	"Auric" precision dermaceutical-clinic landing (Clinical Warmth aesthetic) — clay-terracotta on ivory-cream with Archivo, a floating pill nav, full-bleed glowing-skin hero with staggered word reveal, an overlapping three-column action grid, a clay marquee, signature-treatment cards, a count-up science split, a quiet testimonial, and a deep-clay CTA band	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
auroracast-hls-landing	Modern landing page with a full-screen HLS video background, glassmorphic navigation header, and bottom-left hero content	React, Vite, hls.js
azimuth-realty-engine-h36	"High-Altitude Precision" real-estate marketing-engine landing for "Azimuth" — deep-navy mission-control palette with a single electric-cobalt accent, Bricolage Grotesque display + JetBrains Mono labels, split grayscale-to-color hero, floating pill navbar with hover mega-menu, bento ecosystem grid, horizontal-scroll property portfolio, cobalt method bento, and a scroll-triggered fanning stacked-card CTA	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
axion-studio-landing	Design agency landing page for Axion Studio with shader-based hero background and multi-section layout	React, TypeScript, Vite, Tailwind CSS, shaders, Lucide
axis-quotient-h30	"Quant Brutalist Editorial" landing page for fictional quant-strategy firm Axis Quotient — ink-on-ivory with electric cobalt, animated point-grid hero canvas, colossal QUOTIENT wordmark, ticker marquee, capabilities accordion, count-up metrics, and toggleable engagement pricing	HTML, CSS, Vanilla JS, Canvas, SVG, vendored fonts
carbon-bloom-h95	"Molten Paper" creative-agency landing for "Carbon Bloom" — bone-beige paper, pure ink-black, and a single molten-orange (#F43C00) accent, with vendored Space Grotesk display + Inter Tight body; a frosted pill navbar, a sticky-stacking two-panel hero (giant uppercase MARKET/SCALE headline + a layered hero image with a floating showreel card), giant 22s/34s infinite marquees, a two-tone philosophy statement, sticky-stacking dark service cards, a single-open FAQ accordion, an offset masonry work grid, hover-darkening article rows, and an orange footer block — paper-stacking beige/black/white sections with rounded top edges, directional IntersectionObserver reveals, prefers-reduced-motion aware, fully offline	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
cerulean-precision-collective-h67	"Clinical Serenity" precision-medicine landing for "Cerulean Collective" — cool medical-blue (#0F4490) + soft-teal (#4AA9C5) on near-white with vendored Instrument Sans + Inter Tight, an ellipse-clipped full-bleed hero with floating glass trust chips, a three-column methodology grid with slide-in columns and a rotated-plate portrait, a 12-col specialties bento with hover image-zoom, a float-looping metrics band, and a black-bordered marquee-headed "Request Invitation" intake form over animated pulsing grid lines; per-character heading reveals, IntersectionObserver scroll reveals, prefers-reduced-motion aware, fully offline	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
cartwright-relocation-h47	"Warm Artisan Logistics" white-glove relocation landing for "Cartwright & Co" — terracotta-on-cream editorial palette with a Fraunces italic serif accent, dual opposite-scrolling hero image tickers, a mega-menu glass navbar, partner marquee, soft service cards, a dark count-up stats band, a staggered three-step process timeline, an auto-cycling stacked testimonial deck, and a split contact panel with a working quote form	HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts
citron-atlas-h79	"Phosphor Olive" enterprise growth-advisory landing for "Meridian & Voss" — a near-black boardroom aesthetic lit by one pale citron-lime accent (#F3FFC9) on warm charcoal-olive, with a pill nav + mega-menu, a 700px photo hero over a seamless capability marquee, an infinite client-logo strip with edge fades, snap-scrolling industry + case-study sliders, a cross-fading services accordion, count-up statistics, and a staggered methodology stage with a decorative curve; IntersectionObserver scroll reveals, prefers-reduced-motion aware, vendored Inter + imagery, fully offline	HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts
claywell-solene-h5	Warm-clay editorial landing page for "Solène", a terracotta-and-cream longevity & precision-movement clinic, with an asymmetric split hero, word-by-word heading reveals, zig-zag scroll sections, an infinite marquee, and a dark science band	HTML, CSS, JavaScript, Archivo
cobalt-repairworks-h78	"Workbench Editorial" electronics-repair landing for "RepairWorks" — warm paper-cream canvas with one confident cobalt accent, tight Host Grotesk display + IBM Plex Mono labels, square-glyph logo marks, a left-aligned hero with a "what we fix" device-card grid, a hover-pausing brand marquee, a 2-up services grid with mono spec ticks and prices, a 3×2 benefits grid, a tinted identity split, a 4-up image/quote testimonial grid, a 2-up FAQ, and a panelled final CTA; IntersectionObserver staggered scroll reveals, scroll-aware header, prefers-reduced-motion aware, fully offline	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
concrete-bazaar-h87	"Brutalist Retail Editorial" e-commerce landing for "Concrete Bazaar", a D2C Indian fashion label — warm concrete-beige canvas, near-black ink and one loud vermilion-orange accent, vendored Poppins, a sticky blur nav with category dropdown/search/icon-badges, a two-column hero with a floating orange offer block, seamless category + stats marquees, an 8-card bestsellers grid with hover-zoom imagery and working add-to-cart (live cart badge), a dark bank/UPI/first-order offers band, a dot-textured orange festive campaign, a 4-up trust row, a live 6-digit pincode delivery checker, a WhatsApp support CTA + floating FAB, review cards, and a newsletter footer with payment pills; IntersectionObserver scroll reveals, slide-up mobile menu, prefers-reduced-motion aware, fully offline	HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts
crimson-cut-studio-h72	"Warm-Paper Viral Studio" landing for "Crimson Cut", a short-form video-editing agency — warm off-white paper canvas, pine-ink panels and one loud crimson accent, a floating pill nav, a centered hero with an inline rotated editor-palette sticker, staggered grayscale-to-color 9:16 video cards, a 2×2 services grid with rotating decorative shape clusters, a dark bento stats band, two-up case studies, an exclusive FAQ accordion, three pricing tiers, a seamless CSS testimonial marquee, and a split final-CTA panel; IntersectionObserver scroll reveals, vendored Manrope + imagery, fully offline	HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts
design-rocket-email	Email-style marketing landing page for a "Design Rocket Certificates" AI leadership course	React, TypeScript, Vite, Tailwind CSS, Lucide
dhara-heritage-edit-h88	"Soft Heritage Edit" modern-Indian fashion storefront for "Dhara" — a warm off-white canvas of soft dusty-pastel color blocks (dusty rose, bone cream, mauve) anchored by deep pine green and a single antique-gold accent, with a sticky blurred header, a color-block masonry hero pairing an auto-fading 3-image slideshow with a giant light-weight Manrope headline / philosophy CTA / impact-stat blocks, a 3-up category showcase, a client-rendered 8-product "Weekly Edit" grid with slide-up quick-add bars, a payments band, a large-radius "Dhara Circle" membership panel, a pine-green artisan spotlight with an overlapping quote card, value-prop blocks, and a four-column footer; IntersectionObserver scroll reveals, slide-in mobile menu, prefers-reduced-motion aware, vendored Manrope + imagery, fully offline	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
dot-daily-calm-landing	"Dot." calm-living landing page with a glassmorphic pill navbar, typing messages, and a Nokia-style accent font	React 19, Vite, Tailwind CSS v4, Motion
ember-quietude-h26	Warm paper-calm editorial landing page for focus-first productivity app "Lumo" (Ember Quietude aesthetic) — stone + single ember-orange accent, Instrument Serif display, floating pill nav with hover mega-menu, a fully hand-built HTML/CSS dashboard mockup (sidebar, dark focus timer, tasks, floating AI card), bento planning grid, organize cards, and a monthly/annual pricing toggle	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
evergreen-ledger-h94	"Evergreen Ledger" forward-thinking venture-capital landing for "Meridian Grove" — deep pine/teal ink and a luminous citron-lime accent on warm bone paper, Inter display + Space Mono labels, a full-viewport hero over a darkened cityscape with overlapping white/black/lime stat cards, a sticky-stacking 01–03 capital-services deck, tilted "ethos" cards flanking a lifted center photo, a grayscale "why partner" image band, a strategic-intelligence article grid, and a pine final-CTA + newsletter footer	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
fernhollow-pet-wellness-h68	"Forest Apothecary" pet-wellness landing for "Fernhollow" — bone-cream canvas, fern-green ink, and a warm clay accent with Fraunces display type; centered hero with an auto-scrolling photo marquee, count-up stat band, ken-burns showreel panel, split service cards, dark process ritual with grayscale-to-color photos, botanical product grid, single-open FAQ accordion, and an ink-green newsletter CTA with a success state	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
forma-video-landing	Full-screen video-background landing page with rounded card layout and contact form	React, TypeScript, Vite, Tailwind CSS, Lucide
freightleaf-clean-haul-h80	"Clean Haul" sustainable-freight landing for "FreightLeaf" — warm paper-gray canvas with charcoal night-highway panels and an electric lime accent; floating pill nav, cinematic ken-burns hero with a floating dashed-divider stat card, staggered mission tiles, sector card grid, dark AI-tech section with count-up metrics, infinite testimonial marquee, and a full-bleed final CTA	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
graft-modular-h93	"Matcha Industrial" landing for fictional off-site fabrication firm "Graft Modular" — paper-white Swiss-industrial canvas with sharp zero-radius corners, 1px slate hairlines, and a single matcha-latte green accent; Syne + Inter Tight, a ken-burns hero with a slide-up info card and clip-path highlighter headline plus a capability marquee, a 9-tile numbered sub-systems grid, alternating zig-zag spec rows on rotating backing blocks, a count-up stats band, an 01–04 process row with ghost numbers, and a matcha CTA with a working inquiry form	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
groundai-landing	Single-page landing for interior-design AI product "GroundAI" with a video hero, expanding glass nav pill, brand marquee, and three animated feature cards (style carousel, morphing chat, adaptable list)	TanStack Start, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide
gridwright-h48	"Gridwright" neo-structuralist coding-SaaS landing page on a ruled blueprint grid — paper canvas with diagonal hatch and full-height vertical column rules, structural green accent, Space Grotesk + Space Mono, hard offset shadows, a live-typing terminal hero, count-up stats, asymmetric feature/pricing grids, and a CSS envelope that opens to reveal a postcard	HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted fonts
gridframe-precision-h74	"Precision Grid Studio" enterprise growth-systems landing for "Meridyne" — a Swiss engineering dossier on warm paper, deep forest-green + butter-cream accents, hairline-ruled cells with registration "plus" crosshair markers straddling every frame corner, Inter Tight throughout, a celled nav with flip-up hover links and a hover mega-menu, a cream testimonial-card hero with overlapping portraits, an infinite logo marquee, numbered strategy steps, a four-cell capabilities band, count-up impact stats, a single-open FAQ accordion, and a solid-green CTA panel; scroll reveals and fully offline	HTML, CSS, Vanilla JS, SVG, IntersectionObserver, self-hosted fonts
grove-kitchen-fresh-h70	"Forest Deli" fresh dog-food D2C landing for "Grove Kitchen" — warm cream paper with forest-green + terracotta accents and a faint kraft-paper grain, Fraunces display serif (italic emphasis) over DM Sans, a crossfading scrim hero with a popup menu card, a dashed-badge trust strip, a six-recipe catalog with add-to-box buttons, a serif marquee ticker, a 2×2 why-fresh bento with a 200°F stat chip, numbered how-it-works steps, monogram testimonials, an accordion FAQ, and a bouncing "FRESH." footer canvas with an overlapping contact card	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
halcyon-mesh-h56	"Obsidian Control Plane" autonomous-ops SaaS landing for "Halcyon Mesh" — near-black engineering canvas under a persistent dashed grid, an aurora teal→violet hero glow, Space Grotesk + Inter + JetBrains Mono, a hand-built "Control Mesh" dashboard mockup (sidebar, live appending execution log, count-up metrics, audit list), hover mega-menu, text-roll buttons, edge-masked logo marquee, animated SVG node-graph feature card, numbered workflow, stats band, three-tier pricing, and a gridded aurora CTA; cursor-reactive glow, scroll reveals, fully offline	HTML, CSS, Vanilla JS, SVG, IntersectionObserver, self-hosted fonts
harbour-hearth-h64	"Warm Sanctuary" compassionate senior-living landing page for fictional boutique care community "Harbour & Hearth" — sun-warmed oat-cream canvas with a single burnt-terracotta accent and cocoa-ink dark sections, Inter Tight, a floating glass pill navbar, a full-viewport scrim hero with a glass feature card, an overlapping about card with fanned polaroid thumbnails, alternating care/service rows, a count-up stats band, an infinite values marquee, a snap testimonial slider, a team grid, and a right-sliding mobile overlay	HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted fonts
hearthwell-homeware-h71	"Marmalade Editorial" homeware essentials store landing for fictional D2C brand "Hearthwell" — warm grey paper canvas with a single saturated marmalade-orange accent, Fraunces display serif (italic emphasis) over Inter, a floating glass pill navbar, a centered hero with a 3-slide cross-fade image frame plus an overlaid "featured item" card and clickable slide dots, a pausable value-prop marquee, tall category cards with zoom-on-hover, an 8-item bestseller grid with badges, a 3-slide auto-rotating editorial split, a starred testimonial band, an ink newsletter card with inline validation + success state, and a multi-column footer; IntersectionObserver scroll reveals, reduced-motion aware, fully offline	HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted fonts
helix-strata-h76	"Deep-Teal Architectural" landing page for fictional business-infrastructure consultancy "Helix Strata" — nocturnal teal canvas alternating with bone-cream monograph sections, a single periwinkle-lavender accent, vendored Inter, a top-aligned hero with a rounded photo and two floating data widgets, a 4-up stat row, a hover-driven service switcher that cross-fades image + copy, a prev/next testimonial carousel, a 3-up insights grid, and a giant fade-in wordmark CTA; IntersectionObserver scroll reveals, fully offline	HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted Inter
ink-vermilion-personal-brand-h23	"Ink & Vermilion" editorial personal-brand landing page for fictional marketing consultant "Marlowe Vane" — warm paper canvas, single vermillion accent, Playfair italic emphasis with hand-drawn SVG scribbles/stars/arrows, a rotated red marquee strip, scroll-reveal sections, a dark gallery band, grayscale-to-color imagery, and fake-submit contact + newsletter forms	HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted fonts
kairos-academy-h0	Warm editorial-ember landing page for "Kairos Academy", a competitive-exam coaching institute, with a split-tone hero, floating exam pill tags, count-up stats, program rows, subject cards, a four-phase method grid, auto-rotating testimonials, and an accordion FAQ	HTML, CSS, Vanilla JS
lantern-broth-midnight-ramen-h8	Warm modular-bento landing page for a late-night Japanese ramen bar "Lantern Broth", with terracotta/mustard/teal tiles, Oswald + DM Sans, scroll-reveal animations, drifting steam, and a vanilla-JS testimonial carousel	HTML, CSS, vanilla JavaScript
lantern-loft-tutoring-h1	Warm "paper studio" home-tutoring landing page for Lantern & Loft with a Fraunces/Jakarta editorial hero, offset cards, marquee, animated stat counters, tilted cards, and stacked program rows	HTML, CSS, JavaScript
lumen-grove-h63	"Verdant Apothecary" botanical-bathhouse & forest-spa landing page for "Lumen Grove" — warm bone canvas with deep pine ink and a single living-chartreuse accent, Fraunces serif + Inter, a rounded split hero card ("Steep. Soften. Return."), avatar social-proof, a seamless staggered photo marquee, an accordion-driven cross-fading rituals panel, a scrim testimonial, three-tier membership pricing, a forest newsletter panel, scroll-reveal, and a trailing chartreuse cursor	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
lumina-maternite-h2	"Lumina Maternité" — a calm, editorial maternity & women's-health sanctuary landing page on a bone/moss/blush palette with Fraunces + Geist, drifting hero blobs, an auto-scrolling image marquee, sticky-stacking journey cards, an interactive packages selector, FAQ accordion, and a booking form	HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted fonts
lumen-launch-h44	"Periwinkle Aurora" landing page for fictional AI product-launch SaaS "Lumen Launch" — lavender/periwinkle aurora-blur motif on crisp white with Outfit + DM Sans, a div-built browser/dashboard hero mockup, infinite logo & testimonial marquees, animated step illustrations, dark testimonial theatre, working monthly/yearly pricing toggle, and a FAQ accordion	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
lumen-vector-h92	"Electric Brutalism" creative-agency landing for "Lumen Vector" — a midnight-indigo hero that explodes into candy-pastel panels, Anton poster type + Geist, floating glossy tag-pills with soft glows, a giant multi-color headline with a glass-ringed CTA, seamless logo marquee, six pastel service cards, a fan-out methodology card deck on scroll, scroll-linked testimonial parallax, two-tier pricing on a blue panel, and a FAQ accordion	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
mentality-landing	MENTALITY landing page with video hero, glassmorphic navbar, and animated mobile drawer	React, TypeScript, Vite, Tailwind CSS, Motion
meridian-grid-systems-h81	"Warm Brutalist Grid" intelligent-automation consultancy landing for "Meridian®" — paper-cream canvas organised by hairline rules and flat color blocks (electric green + cobalt blue + ink), Space Grotesk + Inter, a split photo/headline hero with a frosted live-status panel, a ghosted logo marquee, a hairline about grid, count-up stats, a springy staggered 01–04 process row with blend-tinted photos, a working monthly/annual pricing toggle, and a hard-shadow contact form	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
meridian-precision-clinic-h35	"Architectural Clinical Editorial" landing page for bespoke precision-medicine clinic "Meridian" — meridian-navy and warm-bone with whisper-quiet brass, Fraunces serif display + Inter, split full-viewport hero with a sliding navy panel, infinite credential marquee, hairline-divided discipline grid that inverts on hover, numbered method, and an underline-only contact form	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
mindloop-mono-landing	Pure-black monochrome newsletter/content landing page for Mindloop	React, TypeScript, Vite, Tailwind CSS, shadcn-style UI
monolith-grid-atelier-h59	"Grid Monument" Swiss-modernist landing page for bespoke spatial-design studio "Monolith" — bone-white paper, near-black ink, warm sandstone accent, Space Grotesk + Playfair italic, a mix-blend-difference header, full-viewport grayscale hero ruled by a visible structural grid, modular ethos/stats grid with a rotating SVG seal, 3D flip-card portfolio, and floating-label contact form	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
neuralyn-dark-landing	Dark landing page for analytics-dashboard SaaS "Neuralyn" with Framer Motion and shadcn/ui components	React, TypeScript, Vite, Tailwind CSS, Framer Motion, shadcn/ui, Lucide
nhm-paleontology-landing	Paleontology-themed museum landing page with Inter / JetBrains Mono typography	React 19, Vite 6, Tailwind CSS v4, Motion, Lucide
noctis-aurum-h69	"Obsidian & Champagne" fine-jewelry maison landing page (Noctis Aurum, est. 1989) — near-black obsidian and muted champagne gold over warm pearl, Cormorant Garamond serif display + Inter, a 50/50 hero with a slow cross-fade slideshow and floating glass "current focus" card, gold-ringed circular category medallions, an infinite serif marquee, a quick-add product grid, a dark Héritage feature, a men's strip, a bespoke-atelier split, and IntersectionObserver scroll reveals	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
obsidian-lacquer-h57	"Obsidian Lacquer" cinematic automotive detailing-studio landing — pure-black canvas with a scalpel of vermilion red, Bricolage Grotesque display + Playfair italic accents + Inter Tight, a full-viewport ken-burns/pointer-parallax hero with stats strip, an asymmetric 12-col services grid, hover-reveal 01–03 process cards, testimonials, a snap-scroll before/after gallery with arrow nav, a monthly/yearly pricing toggle, and IntersectionObserver scroll reveals	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
obsidian-meridian-h85	"Cinematic Brutalist Noir" monolithic luxury real-estate & architecture landing for "Obsidian Meridian" — a true-black canvas with one whisper of warm brass, condensed Oswald display, a per-letter wordmark reveal, a glass pill nav, an asymmetric manifesto, a full-bleed ken-burns cinematic hero, a vertically-staggered selected-works grid with brass-inverting year badges, a numbered Protocol band with an offset-framed portrait, a hairline stats strip that counts up on view, a minimal underline inquiry form, and IntersectionObserver scroll reveals	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
ochre-stone-studio-h11	Warm editorial landing page for a bespoke interior-architecture studio, with a diagonal cutout hero, auto-rotating curation card, bento work grid, and scattered freefall process cards	HTML, CSS, JavaScript
orbital-frequency-summit-h22	"Deep Signal" landing page for a fictional deep-space signals & aerospace-software summit "Orbital Frequency" — observatory-dark void with amber-gold/signal-green accents, Oswald condensed display type, canvas starfield, rotating orbital rings + radar-sweep hero, telemetry strip, mission timeline, floating-beacon pricing passes, and a scroll-tracking signal bar	HTML, CSS, Vanilla JS, Canvas, self-hosted fonts
orbis-nft-landing	Dark, space-themed NFT landing page "Orbis.nft" with CloudFront video backgrounds and liquid-glass UI	React, TypeScript, Vite, Tailwind CSS, Lucide
paper-circuit-agentic-saas-h16	"Paper Circuit" — a bright, blueprint-precise light-mode SaaS landing for autonomous-outbound product "Drift": cool off-white dot-grid canvas, Bricolage Grotesque display + Inter Tight + JetBrains Mono, indigo/magenta color-as-wiring, an auto-looping hero icon belt, a floating product mockup (sidebar, metrics, interactive node canvas with animated dashed wires + live email-draft panel) that does mouse-driven 3D parallax, bento features (enrichment flow, hover bar chart, dark agent library, hover-revealed code terminal), portrait testimonial cards, an enterprise governance/YAML block, an indigo CTA strip with a live flipping counter, and a footer with a cursor-spotlight wordmark; all fonts and images vendored, fully offline	HTML, CSS, vanilla JS, SVG, Bricolage Grotesque, Inter Tight, JetBrains Mono
pelmatech-health-companion	Pixel-faithful "Pelmatech" health-companion landing with a full-bleed hero, a hover-driven team carousel, a custom-gridline benefits grid, uniform CSS-zoom responsive scaling, and blur-up / fade-up / clip-path animation primitives	React, TanStack Start, TypeScript, Tailwind CSS v4, shadcn/ui, Motion, Lucide
prisma-landing	Cinematic landing page for the creative studio PRISMA with dark, moody, warm cream palette	React, TypeScript, Vite, Tailwind CSS, Framer Motion
riso-rebel-fest-h20	Floating-pill neo-brutalist landing page for fictional design conference "Riso Rebel Fest" — warm off-white canvas, oversized riso-color bento cards with animated motifs, chunky Shrikhand display serif, grayscale-to-color speaker grid, tiered tickets, and scroll-reveal	HTML, CSS, Vanilla JS, vendored fonts
saaj-heritage-bazaar-h90	"Heritage Bazaar Editorial" D2C landing for the Indian solid-wood furniture house Saaj Heritage — a warm cream/paper canvas with a burnt-sienna terracotta accent, Inter Tight display + Playfair Display italic, an oversized "Heritage Living" hero with an angled clip-path image cutout and an auto-rotating floating product card, a 5-up category row, an 8-product bestseller grid with slide-up View Product bars and INR pricing, a values strip, testimonials, a stroke-to-fill numbered craft journey, a sienna consultation CTA with a validated callback form, scroll-reveal, header shrink, and a slide-in mobile menu	HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts
sencha-atelier-h12	Wabi-editorial landing page for "Sencha Atelier", a ceremonial-matcha tea house — oversized Fraunces serif hero on warm paper, flush rounded showcase cards, editorial menu rows, count-up stats ribbon with marquee, and an asymmetric gallery	HTML, CSS, Vanilla JS, IntersectionObserver, Fraunces, Inter Tight
sentinel-meridian-h77	"Cold War Dossier" sovereign-intelligence advisory landing for Sentinel Meridian — near-black ink with a steel-cyan accent and a single warning-amber signal color, a blueprint grid and grain overlay, a Forum serif display, a live classified dossier strip (ticking UTC clock + blinking LIVE dot), a Ken-Burns grayscale hero with mask-reveal headline and a scrolling mono intelligence-feed ticker, a numbered mandate column with a frosted pull-quote, hairline-split capability cards, a connected three-step method, count-up stats, and an encrypted final CTA	HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts
slate-stone-architectural-h73	"Gallery Minimalism" architectural real-estate advisory landing for Slate & Stone (principal Elias Morand) — warm linen paper, near-black ink panels, a single oxide-rust accent, condensed uppercase Familjen Grotesk display on Inter, an asymmetric 62.7/37.3 hairline-ruled grid reused across hero, principal bio, residences and a dark advisory panel, with a clip-reveal hero intro, count-up stats, IntersectionObserver scroll reveals, image hover-scales, a full-screen mobile menu, and a reduced-motion fallback; fonts and architectural photography vendored locally, fully offline	HTML, CSS, Vanilla JS, IntersectionObserver, Familjen Grotesk, Inter
slow-roast-atelier-h84	"Quiet Pastel Block-Grid" artisan coffee roastery & micro-bakery landing for Slow Roast Atelier — a calm gallery-like editorial built entirely from edge-to-edge flat dusty-pastel panels (rose/cream/lilac) divided by paper gutters, oversized low-contrast Manrope display type on Inter Tight, one grounding deep-pine-green accent, an asymmetric 740/380/324 hero block-row with a desaturate→color café photo strip and a green "View Menu" CTA bar, a three-cell menu preview with hairline price rows, a philosophy split with a circular "Direct Trade" badge, a three-card locations row, and a "Stay Grounded" subscribe footer; IntersectionObserver scroll reveals, slide-in mobile menu, vendored fonts + imagery, fully offline	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
snip-and-snout-grooming-h18	"Brutalist Kennel Club" pet-grooming studio landing for Snip & Snout — warm neo-brutalism with thick ink outlines, hard offset shadows, Archivo black display type, a signature oversized rounded hero-photo corner, a fanned service-card deck, dual infinite testimonial rows, and brutal-press buttons	HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts
solace-wellness-grid-h13	"Quiet luxury wellness" editorial landing page for the holistic studio Solace — an asymmetric bento color-block grid (oat/dusty-rose/lilac/sage panels) with oversized light Manrope display type, a desaturated→color image strip, looping keyword marquee, practices bento, sage stats band, guide portraits, and a reserve form; self-hosted fonts, scroll-reveal, slide-in mobile menu	HTML, CSS, JavaScript, IntersectionObserver, self-hosted fonts
space-voyage-landing	Cinematic space-travel landing page with two video-backed full-height sections and liquid-glass UI	React via CDN, Tailwind CDN, Framer Motion, single-page HTML
spectral-orbit-novascale-h17	"Spectral Orbit" near-black cosmic paid-ads growth agency (NovaScale) landing page built around slowly rotating chromatic conic-gradient nebula orbs blooming behind crisp content, a single electric coral-red (#ff4838) accent over a monochrome void, and Instrument Serif italic emphasis on Inter; sections cover a full-viewport orb hero, opposite-direction trust marquees, an infinite pause-on-hover testimonials carousel with metric footers, a glowing about panel, a services grid with corner orbs plus a coral TikTok feature card, an Other-Agencies-vs-NovaScale comparison with a counter-rotating warm orb, a 3-step process with hover-glow cards, a results stat panel with hover-lift tiles and a performance-guarantee callout, a single-open FAQ accordion, an orb final CTA, and a newsletter footer; IntersectionObserver fade-up reveals, animated hamburger mobile nav, and a prefers-reduced-motion fallback; fonts and inline-SVG avatars vendored locally, fully offline	HTML, CSS, vanilla JS, SVG, Inter, Instrument Serif
synergeus-landing	Pixel-faithful dark AI-fintech "Synergeus" landing with three scroll-revealed sections — an HLS video hero with a 3D-tilt story card, an analytics card with count-ups, and an AI-intelligence trio (NL queries, wipe-reveal chart, animated SVG node tree)	React 18, Vite, TypeScript, Tailwind CSS, Framer Motion, hls.js, Lucide, React Router
terra-craft-editorial-h58	"Quiet Craft Editorial" landing page for the artisan furniture house Terra Studio — a warm cream paper canvas with IBM Plex Serif display type, a two-column hero whose charcoal panel holds three overlapping mat-board image cards with mouse-parallax + hover-lift, an infinite materials marquee, a framed product collection grid, an atelier philosophy split, a count-up stats band, and a swap-to-success newsletter CTA; self-hosted fonts, scroll-reveal, mobile menu	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
terra-siena-atelier-h14	"Terra Siena" handcrafted-ceramics atelier landing ("Sun-Fired Earth" aesthetic) on a terracotta/ochre/bone palette with Fraunces serif + Inter Tight, a marquee hero, a scroll-triggered fanned card deck that spreads into collections, 3D flip cards, a testimonial grid, an accordion FAQ, and a marquee footer	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
tide-table-h82	"Tide to Table" coastal seafood & oyster bar landing page (Tide & Table) — a salt-washed cream canvas with deep-navy ink and a seafoam accent, Playfair Display serif + Inter Tight, five rhythmic multiply-blended hero image strips that rise on load, a slow Ken-Burns philosophy split, a dark "Seasonal Harvest" menu list with rotated image cards that pop and straighten on hover, an overlapping editorial atmosphere card, a glassy split reservation form with inline confirmation, a full-screen menu overlay, and a paper-grain overlay	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
usd-halo-landing	Premium fintech-style landing page for the stablecoin product "Halo / USD Halo" with a custom logo mark and TT Norms Pro type	React, TypeScript, Vite, Tailwind CSS, Lucide
valmax-photography-landing	Single-page dark recreation of the "Valmax" photography studio landing with an orchestrated intro sequence, a lime accent, oklch design tokens, and photo-driven sections	TanStack Start, React 19, TypeScript, Tailwind CSS v4, shadcn/ui, Framer Motion, Lucide
vantix-precision-medicine-h34	"Clinical Obsidian" precision-medicine institute landing page (Vantix) — deep obsidian-navy canvas with electric cyan-blue accents, Bricolage Grotesque display type and JetBrains Mono telemetry labels, an asymmetric split hero with count-up metrics, grayscale-to-color clinical photography, a pulsing rapid-response strip, capabilities/platform/specialists sections, and a consultation form	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
vellum-apothecary-archive-h32	"Archival Apothecary" wellness-sanctuary landing page (Vellum & Verdigris) on a vintage sepia vellum/paper palette with Playfair Display + Instrument Serif + Courier Prime, a paper-grain overlay, a load-time cream curtain reveal over a sepia hero photo, scroll fade-rise reveals, hairline catalogue rules, a numbered philosophy grid, a coded rituals gallery, an ink "Memoirs" testimonials band, and a custom hollow-ring cursor	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
vellum-atelier-h33	"Vellum" luxury hair atelier landing ("Sculptural Serif Atelier" aesthetic) on a warm paper/ink/gold palette with Unbounded + Figtree + Sacramento, a character-by-character animated hero wordmark, extreme top-rounded image panels, a dark service menu with cursor-tracked hover previews, an offset 3-up portfolio grid, and scroll-reveal motion	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
velvet-vellum-agency-h4	"Velvet precision" marketing-agency landing page (Velvet Vellum) with an oxblood-maroon hero panel, giant Josefin Sans display type, a bento case-study grid, auto-rotating testimonials, and a faux-3D perspective floor-grid footer	HTML, CSS, Vanilla JS, IntersectionObserver
verdant-atelier-h40	"Forest & Gold" product-photography studio landing page (Verdant Atelier / Maya Kapoor) on deep forest-green with museum-gold + deep-orange accents, Playfair Display + Inter, signature arch-masked still-life imagery, a slow-spinning "View Projects" badge, a 12-column asymmetric editorial hero, dual infinite marquees, staggered work/services galleries, and a hamburger mobile overlay	HTML, CSS, Vanilla JS, IntersectionObserver, SVG, self-hosted fonts
verdant-pledge-bento-h49	"Soft Editorial Bento" conservation-collective landing page (Verdant Pledge) on a white canvas of 40px rounded bento cards with a single electric-lime accent and Inter Tight, featuring a 5/7 lime+photo hero with floating glass map markers, an editorial missions table with rotated hover previews, image problem cards, a dark impact band with count-up stats, and scroll-reveal motion	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
verdant-salon-h91	"Heritage Verdant" elite social-strategy agency landing page (Verdant Salon) on a warm paper-beige canvas with midnight-green panels and cocoa-brown ink, Playfair Display + Inter Tight, a centered oversized serif hero with staggered portrait cards that reveal via tiled grid-demask animation, count-up impact stats, hairline service rows with floating rotated hover previews, an alternating heritage gallery, a green inquiry panel with a faked submit, and scroll-reveal motion	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
verdant-spine-clinic-h66	"Clinical Calm" precision-chiropractic & movement-science clinic landing page (Verdant Spine) on a warm grey-green paper canvas with a single sage + deep-forest palette, Schibsted Grotesk + Inter, a split editorial hero with a frosted-glass appointment card floating over the clinic image, gradient stat cards, a deep-forest services panel with an infinite giant-type marquee and zoom-on-hover service cards, a sticky numbered "how it works" track, a glass-quote testimonial carousel, a 3-up journal grid, and scroll-reveal motion	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
verdigris-trail-h50	"Architectural Trail" landing page for fictional architecture studio "Verdigris Archi." — fennel-pastel canvas with a single luminous mint accent, Playfair Display serif + Inter Tight, a fixed vertical hairline "trail" with a travelling mint comet, a circular Begin-Trail hero CTA, a pillar marquee, grayscale-to-color brutalist concrete photography, numbered principle columns, a staggered project gallery, an ink count-up stats band, and a pill CTA	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
vermillion-cram-h3	Loud neo-brutalist board-prep academy landing page in vermillion orange + ink navy, with hard 2px borders, offset brutal shadows, a scrolling ticker, an overlapping dashboard stat panel, count-up stats, dual testimonial marquees, and a trial-booking form	HTML, CSS, Vanilla JS
vermillion-table-h83	"Culinary Architecture" premium food-delivery landing page (Vermillion Table) on a pale-vanilla canvas with a sinopia red-orange + Caribbean-teal duotone, vendored Questrial type, oversized ultra-tight display headlines, rounded modular "island" cards, a full-bleed gourmet hero with a frosted Dish-of-the-Week card, zoom-on-hover category cards with a teal→red-orange tint shift, a four-phase "Logistics of Luxury" process grid, a floating phone app-download split, and IntersectionObserver scroll-reveal	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
viktor-oddy-landing	Single-page landing for creative design studio "Viktor Oddy" with custom PP Neue Montreal / PP Mondwest fonts and staggered animations	React, TypeScript, Vite, Tailwind CSS, Lucide
voltaic-grid-advisory-h75	"Putty & Voltage" strategic-advisory landing on a warm putty-grey canvas built from large rounded tiles, Host Grotesk + Inter, one electric-lime accent over soft pastel cards, a golden-hour photo hero with social-proof avatars, a 3-up stat grid, a sticky stacking services deck in lavender/yellow/pink/mint, a lavender testimonial panel, an expanding case-study list, an infinite masked insights ticker, a lime CTA, scroll-reveal motion and a mobile dropdown nav	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
voltic-showroom-h89	"Electric Stone" premium offline-electronics experience-center landing (Voltic) — a warm stone canvas with near-black ink and a single electric-lime accent, self-hosted Inter, a framed split hero with the stacked touch./feel./choose. headline and lime terminal dots, a floating pill nav, an infinite pausable demo-product marquee, a 4-up zoom-on-hover Curated Zones grid, an interactive accordion that cross-fades a paired image, an ink "Bestseller" pricing-deal trio, a lime WhatsApp/Call CTA band, an inertial lime cursor and a slide-in mobile menu	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
voltframe-dev-h29	"Bracketed Voltage" developer-portfolio landing on a near-black stage with one electric-yellow accent, a hairline framed hero box with glowing corner nodes, hover-yellow title words, floating particles, pulsing orbs, scroll-revealed skills/work/testimonials, and a mobile slide-in menu	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts
voltline-automation-h60	"Bone & Volt" industrial AI-automation landing on a warm off-white canvas with graphite ink and a single electric-lime accent, Space Grotesk + JetBrains Mono, a pure-CSS orbiting 3D cube rig with a glowing lime core, a randomized pixel-fill nav button, starfield-reveal CTAs, a count-up stats strip, a 3-card solutions grid, and a dark starfield mission band	HTML, CSS, Vanilla JS, IntersectionObserver, CSS 3D transforms, self-hosted fonts
wayfare-expedition-journal-h86	"Expedition Journal" boutique-travel landing page (Wayfare) — a warm aged-paper canvas with espresso ink and clay/moss/ochre field-notebook accents, Fraunces serif + Inter Tight, a dark photographic hero with parallax, a polaroid coordinate tag, a "Now Boarding" stamp and a floating trip-finder card, a partner marquee, a manifesto split with count-up stats, a chip-filterable expedition card grid, a numbered how-it-works, a horizontally-scrolling guides rail, a rotating dark testimonial, and a photo-backed final CTA with a ghosted wordmark footer	HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts

Animations & loaders (12)

Project	Description	Stack
apex-scroll-hero	Apple-product-page-style "Apex" hero whose 5-second F1 sunset film is scroll-scrubbed full-screen (scroll drives video.currentTime) with a synced speed/gear telemetry HUD	Next.js 16, React 19, TypeScript, Tailwind CSS v4
bags-editorial-collage	Three-section animated bags landing — a warm cream editorial sticker-collage hero, a scroll-driven unfolding-envelope collection stage, and an orbiting "perfect match" field, tied together by glowing serif accent words	React, TypeScript, Vite, Tailwind CSS, Framer Motion
bloom-nested-squares	The shadcn "Bloom" NestedSquares component (25 violet-gradient squares scaling and rotating forever via Framer Motion) staged in a dark motion-specimen studio — a graticule plate, ambient glow, and a calibration rail of dials that retune the live component's ring count, period, stagger, growth, spin and culture	React, TypeScript, Vite, Tailwind CSS, Framer Motion
container-scroll-animation	Integration of the Aceternity "Container Scroll Animation" into a shadcn-style codebase — the same useScroll/useTransform device card used as three stacked stages that tilt from 20° to flat and stand upright on scroll, with a live rotateX/scale telemetry HUD	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide
dot-nokia-typing-hero	Single-screen "dot." calm-messaging hero with a full-bleed Nokia-phone background video, a live typing/deleting animation in a Nokia cellphone font overlaid on the phone screen, and a floating glass pill navbar	React 19, Vite, TypeScript, Tailwind CSS v4, Motion
linkflow-boomerang-hero	Linkflow hero concept with boomerang-style visual direction and CSS-only animations	React, TypeScript, Vite, Tailwind CSS, Lucide
mainframe-scrub-hero	Mainframe contact hero whose background film is scrubbed by cursor movement, with typewriter headline and multi-select service pills	React, TypeScript, Vite, Tailwind CSS, Motion, Lucide
microvisuals-boomerang-hero	Fullscreen hero with GSAP boomerang-style animation and a custom display font	React, TypeScript, Vite, Tailwind CSS, GSAP, Lucide
moneta-key-preloader	Full-viewport cinematic "Moneta Key" preloader — color-dodge glowing sphere, masked dashed orbit line, wave-cut logo, and a curved canvas-based 0–100 number arc that idles forever	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Canvas 2D
pallet-ross-landing	Scroll-driven landing for fictional artist marketplace "Pallet Ross" where seven artwork cards perform a choreographed intro, then gather into a stack, descend, and fan into a diagonal cascade ladder locked across three full-height sections	React, TypeScript, Vite, Tailwind CSS v4, Framer Motion, Lucide
qclay-hexagon-loader	Full-screen recreation of the QClay loader — an animated honeycomb of real SVG hexagon tiles with a glowing blue active center, breathing rAF motion, crossfading icons, a shimmering label, and an organic looping progress bar	React, TypeScript, Vite, SVG
scroll-expansion-hero	Integration of the ScrollExpandMedia hero into a shadcn-style codebase — a compact media card that hijacks the wheel/touch to unfurl into a full-bleed video or image as you scroll, with a splitting title, dissolving backdrop, and an editorial about-section that reveals on full expansion	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide

3D & games (2)

Project	Description	Stack
lovable-webgl-hero	1:1 recreation of the Lovable landing page — a full-viewport WebGL hero driven by the real CoreRenderer runtime, a glass navbar with full-width dropdowns, an animated typewriter prompt input, and a 3D trusted-by logo carousel	TanStack Start, React 19, Tailwind CSS v4, Framer Motion, Lucide, WebGL
sidi-bou-said-3d-walk	Navigable, fully procedural 3D walk through Sidi Bou Said, Tunisia in a single HTML file	Three.js, single-file HTML/JS

Portfolios (14)

Project	Description	Stack
circuit-ledger-h15	Dark "quiet circuitry" developer portfolio with a live circuit-board canvas, champagne accents, bento stack and typewriter terminal	HTML, CSS, Vanilla JS, Canvas
cobalt-bento-folio-h43	"Daylight Workbench" light-glass bento developer portfolio — cool pale-gray canvas with a colossal royal-cobalt PORTFOLIO hero tile, frosted-glass panels, pointer-parallax + specular hero, typewriter rotator, animated skill ring, count-up stats, and a validated contact form	HTML, CSS, Vanilla JS, IntersectionObserver, Plus Jakarta Sans, JetBrains Mono
crimson-press-kit-h25	Editorial spiral-bound magazine portfolio staged as a crimson brand press kit with print grain, collage cover, and scroll reveals	HTML, CSS, Vanilla JS
electric-volt-folio-h45	"Kinetic Brutalism" motion-designer portfolio — acid-green/hot-pink neo-brutalist poster grid, oversized Inter Black type, blocky shadows, marquee, scroll-in counters, and a full-screen overlay nav	HTML, CSS, Vanilla JS, Inter, Space Mono
inkpress-atelier-h46	"Inkpress Atelier" risograph-print graphic-designer portfolio staged as a folded zine — cream paper frame, 4-color registration bar, Anton display type, diamond logo plate, services menu, colored works grid, and scroll reveals	HTML, CSS, Vanilla JS, Anton, Roboto Condensed
jack-3d-portfolio	Dark-themed 3D creator portfolio landing page for Jack with gradient hero text	React, TypeScript, Vite, Tailwind CSS, Framer Motion
lumen-folio-h19	Soft editorial-minimalism personal portfolio with floating glass nav, drag carousel, typewriter hero, and scroll reveals	HTML, CSS, JavaScript
michael-smith-portfolio	Dark single-page creator portfolio with GSAP / Framer Motion animations and HLS video	React, TypeScript, Vite, Tailwind CSS, GSAP, Framer Motion, hls.js, React Router
meridian-drafthouse-h54	"Drafting-Table Brutalism" architect & spatial-designer portfolio — warm ecru paper, blueprint grid, hairline frames, highlighter-yellow accent, masked type-rise hero with an outlined italic word, sliding image reveals, count-up stats, and a numbered approach table	HTML, CSS, Vanilla JS, Instrument Serif, Space Grotesk
monogram-terminal-h42	"Monochrome Terminal Editorial" developer portfolio — strict greyscale void, JetBrains Mono headlines, Merriweather italic accents, terminal-card hero, cross-fading featured slider, work timeline, and paginated articles	HTML, CSS, Vanilla JS, JetBrains Mono, Inter, Merriweather
nocturne-bento-h28	"Midnight Atelier" dark designer portfolio — animated perspective-grid floor, acid-lime accent, Fraunces serif + Inter Tight, bento-grid glass hero, pointer parallax, scroll reveals, and a validated contact form	HTML, CSS, vanilla JS, Fraunces, Inter Tight, JetBrains Mono
solstice-craft-studio-h41	"Warm Editorial Craft" light-mode UX designer portfolio — paper canvas, tangerine accent, Space Grotesk + Caveat handwriting, floating design-tool micro-cards, 3D-perspective project ticker, animated process line, and a fullscreen menu	HTML, CSS, Vanilla JS, Space Grotesk, Caveat
voltline-resume-h53	"Voltline" neo-brutalist engineer résumé portfolio — warm cream paper with an orange dot-grid, dual-offset ink/orange borders, hard offset shadows, skewed experience & education bands, count-up hero stats, parallax wedge, and a printable PDF mode	HTML, CSS, Vanilla JS, Bebas Neue, Space Grotesk, Inter
voltmark-engineer-terminal-h24	Electric-yellow dark engineer portfolio with terminal typewriter, code-chip hero, marquee, and filterable project grid	HTML, CSS, Vanilla JS

Components & UI (15)

Project	Description	Stack
animated-dots-rain	shadcn/ui integration of the verbatim AnimatedDots component — a raw-<canvas> dot rain where columns of dots fall and each dot bleeds a single R/G/B channel from black to full as it accelerates down, then recycles with a new colour and speed — dropped into @/components/ui and framed as a component lab: a full-bleed live hero (the verbatim demo) with a render-FPS/uptime telemetry strip, a control deck of faders wired to every real prop (dotsNum/dotRadius/dotSpacing/speedRange/opacity + blend-mode and background-colour controls) with named presets and a live-usage snippet, a shadcn-CLI integration story explaining the default paths and why /components/ui matters, and a props API with the prompt's data/state/assets/responsive/placement Q&A; zero runtime deps, zero component assets, fonts vendored locally, fully offline	React, TypeScript, Vite, Tailwind CSS v4, Canvas, shadcn/ui, Lucide
animated-hud-targeting-ui	shadcn/ui integration of the verbatim TargetingUI + HudFrame primitives — an animated SVG targeting reticle inside a chamfered, notched clip-path frame — driven as a live avionics fire-control display: a SCANNING → ACQUIRING → TRACKING → LOCKED acquisition state machine re-tints and re-draws the reticle per phase over vendored recon stills, with a scrolling bearing tape, a pitch/roll horizon ladder, four bracketed corner readouts of easing tabular-num telemetry, a sensor sweep, and L-brackets that snap shut on lock with an amber flash; cold cyan/white instrument palette with one reserved amber lock accent, fonts + images vendored locally, fully offline	React, TypeScript, Vite, Tailwind CSS v4, Framer Motion, next-themes, Lucide
aurora-sign-up	Two-column "Aurora" registration interface with a background-video hero, staggered Motion reveals, and a multi-step sign-up form	React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide
background-paths-hero	Integration of the "Background Paths" shadcn/ui hero — 72 flowing animated SVG paths behind a per-letter spring headline and a glassy CTA, wrapped in a dark/light theme toggle and a preset-headline switcher	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Framer Motion, Lucide
core-features-gradient-cards	Static "Core Features" marketing section with three gradient feature cards	Single-file HTML/CSS
crimson-mill-supply-card-h61	"Millstone Craft" digital visiting card for a fictional heritage stone-mill flour/grain/spice supplier — a vertical, mobile-first tap-to-contact page stacking a marquee-ticker brand hero, a sage WhatsApp + terracotta Call contact grid, a four-up product showcase, a split flagship-store location card, and an hours/footer strip, each as a soft-shadowed cream card revealed on scroll; warm paper canvas, crimson + wheat-gold accents, condensed Oswald display over Inter Tight, real tel/wa.me/mailto/maps links, fonts and product imagery vendored locally, fully offline	HTML, CSS, Vanilla JS, IntersectionObserver
gradient-bars-background	shadcn/ui integration of the verbatim GradientBars component — an equalizer-shaped wall of pulsing vertical CSS linear-gradient bars (U-shaped height curve, staggered scaleY @keyframes) — dropped into @/components/ui and framed as a component lab: a full-bleed live hero with a render-FPS/bars/assets/uptime telemetry strip and stack ticker, a control deck of faders wired to the real props (numBars/animationDuration + gradientFrom colour picker with named presets + backgroundColor) with a live-usage snippet, a shadcn-CLI integration story explaining the default paths and why /components/ui matters, and a props API with the prompt's data/state/assets/responsive/placement Q&A; zero image assets (pure CSS keyframes), fonts vendored locally, fully offline	React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Lucide
gradient-dots-background	shadcn/ui integration of the verbatim GradientDots component — a hue-cycling hexagonal CSS radial-gradient dot field looped with framer-motion — dropped into @/components/ui and framed as a component lab: a full-bleed live hero (the verbatim demo) with a render-FPS/uptime telemetry strip, a control deck of faders wired straight to the real props (dotSize/spacing/duration/colorCycleDuration + a background colour control) with named presets and a live-usage snippet, a four-step shadcn-CLI integration story explaining the default paths and why /components/ui matters, and a props API with the prompt's data/state/assets/responsive/placement Q&A; zero component assets (pure CSS), fonts vendored locally, fully offline	React, TypeScript, Vite, Tailwind CSS v4, framer-motion, shadcn/ui, Lucide
interactive-3d-spline-scene	shadcn/ui integration of a Spline 3D scene — the exact SplineScene + Card + Spotlight demo, a graceful animated WebGL fallback for when the remote scene is unreachable, a live props playground, and an on-page guide to the shadcn structure, default paths and why components/ui matters	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Spline, Framer Motion, Lucide, Canvas
lumen-aurora-vcard-h62	"Lumen Aurora" personal digital visiting card for a fictional creative technologist — one frosted-glass card floating over a slow living aurora of drifting violet/teal/rose blobs with film-grain and vignette, stacking a meta bar with a live local clock, an avatar-ring hero with a pulsing emerald "available" status, a short first-person bio with mono tag chips, a three-up email/call/WhatsApp action grid, a five-up social row, and an amber "Save contact" button that generates a vCard 3.0 .vcf blob client-side plus a "Copy link" toast; cinematic near-black palette, Fraunces display serif over Geist + Geist Mono, pointer parallax with specular sheen, staggered reveal, real mailto/tel/wa.me links, all fonts and portrait vendored locally, fully offline	HTML, CSS, Vanilla JS, vCard, backdrop-filter
nexto-404-hero	Full-viewport 404 "Page Not Found" hero for fictional brand "nexto." with a layered alien-spaceship background, floating gradient Material Symbols, a dashed-gradient navbar, and a morphing mobile menu overlay	React, Vite, Tailwind CSS, Material Symbols
scanner-card-stream	Draggable Three.js card stream that decodes each photo into glitching, scrambling ASCII as it crosses a glowing violet scan line, with an ambient WebGL particle field and a 2D spark burst — packaged as a shadcn-style @/components/ui drop	React, TypeScript, Vite, Tailwind CSS v4, Three.js, Lucide
sixsense-reference-finder	Pixel-faithful "Sixsense" AI reference-finder page with canvas pixel-grid glass backgrounds, an organic cursor hover blob, a layered folder/lights stack, three floating reference cards, and a glass typewriter prompt box with a spinning gradient send button	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Framer Motion, Lucide, Canvas
spatial-product-showcase	shadcn/ui integration of the verbatim EarbudShowcase component — a spatial-audio "Sonar Spatial" product stage that mirrors its whole layout when you flip between the Left and Right earbud, with a per-side blue/emerald glow, a rotating dashed ring and floating product shot, animated feature meters, live connection/battery telemetry, and a Dynamic-Island-style segmented switcher; earbud PNGs vendored locally, fully offline	React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide
terminal-cli-control-deck	"ACME Control Deck" infrastructure panel built in a phosphor-green Terminal CLI design system — centralized tokens, composable windows/panes, ASCII art logo, typewriter headline, raw-data ASCII progress meters, a live syslog feed, an interactive zsh console, a box-less access form, and a subtle CRT scanline overlay	React, TypeScript, Vite, Tailwind CSS v4, Lucide

UI design (34)

Project	Description	Stack
academia-classical-showcase	"The Athenæum" Academia / Classical design-system showcase — a library-at-night members' society across ten Roman-numeral Volumes, with arch-topped sepia-to-colour engravings, a rotating brass sunburst hero, 40px corner flourishes, Cinzel drop caps, ornate glyph dividers, crimson wax-seal badges, engraved brass buttons, a manifesto Proclamation, certificate pricing tiers, an alternating timeline, an accordion FAQ, a validated enquiry form, and fixed paper-grain + vignette overlays; vendored fonts/illustrations, fully offline	HTML, CSS, vanilla JS
ai-budget-tracking-landing-page-velara-al	"Velara AI" AI budget-tracking landing page — a dark, purple-accented (#A855F7) fintech site assembled from 10 numbered sections: a video-background hero with a glass dashboard mockup (animated wave chart, sidebar, asset list), a feature-grid "Why Choose Us", a 3-step "How It Works" with animated goal/insight mockups, a bento Features grid (stacked encryption cards, smart-alert feed, animated budget bars, sparkline mini-cards), a global-transfers map card with floating glass widgets, an infinite dual-column testimonials ticker, a security band + app-download banner with browser-chrome dashboard, a cosmic-horizon pricing trio with a "Popular" tier, an animated FAQ accordion, and an SVG globe-arc footer with cycling country badges and a glowing VELARAAI wordmark	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide
aperture-minimalist-dark	Full "Minimalist Dark" design-system landing page for fictional dev tool "Aperture" — layered-slate palette with a warm amber accent, vendored Space Grotesk / Inter / JetBrains Mono, drifting ambient glow orbs + noise/grid ambience, a self-driving glass ⌘K command palette that types and streams a deploy log, glass-effect bento features, count-up stats, a numbered workflow + tinted config code panel, a glowing featured pricing tier, accent-line testimonials, an accessible max-height FAQ accordion, and an amber-ring email CTA	React, TypeScript, Vite, Tailwind CSS, Lucide
art-deco-gatsby-showcase	Self-contained Art Deco ("Gatsby") design-system showcase — gold-on-obsidian, vendored Marcellus/Josefin Sans, a rotating sunburst hero, stepped-corner cards with rotated-diamond icons, a Roman-numeral timeline, pricing tiers, testimonials, an accordion FAQ, underlined-input enquiry form, and a 5-column footer	HTML, CSS, vanilla JS
aurora-flow-landing	"Tide" deep-work-ritual landing page on the exact prompt scaffold (Vite + React + TS, Tailwind + tailwind-merge + clsx, Framer Motion, Lucide, @/ alias, cn()) — a deep oceanic-twilight design whose signature is a full-width canvas "tide of light" (drifting, pointer-leaning sine bands, reduced-motion-safe), a hero that is a working focus session (breathing dial + live 50:00 countdown), a soundscape marquee, a 3-step Ritual timeline, a Soundscapes bento, count-up stats, scaled-tier pricing, an ARIA FAQ accordion, and a validating email CTA; vendored Fraunces/Inter/JetBrains Mono, fully offline	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide
bauhaus-form-follows-function	"WERKBUND" Bauhaus design-system landing page — a constructivist poster brought to life with three primary colours, thick black borders, hard offset shadows, binary radii, geometric circle/square/triangle primitives, color-blocked sections, a stats band, feature grid, pricing tiers, testimonials, journal, and a red/cream FAQ accordion	React, TypeScript, Vite, Tailwind CSS v4, Lucide
bitcoin-defi-aurum	"AURUM" Bitcoin DeFi design-system landing — a True-Void/Bitcoin-Fire aesthetic with a spinning orbital orb hero ringed by floating glass stat cards, a seamless stats ticker, count-up metrics, a feature grid with hover-reveal icon watermarks, a "How It Works" blockchain timeline (gradient ledger line, pinging nodes, corner-accent cards), asymmetric scaled pricing, glass testimonials, and colored (never black) glows; centralized cva tokens, self-hosted Space Grotesk/Inter/JetBrains Mono, fully offline	React, TypeScript, Vite, Tailwind CSS, CVA, tailwind-merge, Lucide
bold-typography-design-system	"OBELISK" Bold Typography design-system showcase — poster design translated to web with near-black/vermillion tokens, a 13-step type ramp, vendored Inter Tight/Playfair Display/JetBrains Mono, a parallax decorative-numeral hero, an adjective marquee, three button variants (underline/inversion/ghost), layered-text depth, zero radius, a token-flip inverted CTA, and a 200ms ARIA FAQ accordion	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide
botanical-organic-serif	"Verdant" Botanical / Organic Serif design-system showcase — a slow-living wellness landing on centralized tokens, with hand-built fully-offline botanical SVG art masked into Roman arches, the mandatory paper-grain overlay, Playfair Display headlines using italic emphasis words, a sage/clay/terracotta palette, staggered feature & collection grids, count-up stats, soft-shadow pill buttons, a vine-growing divider, an ARIA FAQ accordion, an underlined newsletter input, and a full-screen mobile menu	React, TypeScript, Vite, Tailwind CSS v4, Lucide
clay-design-system	"Claymakers" High-Fidelity Claymorphism design-system showcase — premium digital clay with reusable 4-layer shadow stacks (deep/card/button/pressed), a candy-shop palette and vendored Nunito/DM Sans, super-rounded radii, gradient hero text, an abstract nested-clay hero, breathing count-up stat orbs, a bento feature grid with a peeking panel, a live squish/recessed-input playground, a fanned-tablet split, pricing with a scaled "popular" tier, testimonials, a recess-on-open FAQ, a working CTA, and a reduced-motion-safe blob world	React, TypeScript, Vite, Tailwind CSS v4, Lucide
copy-machine-pixel-perfect	"Foundry" browser-native PCB board-studio landing built on the exact "copy machine" prompt scaffold (Vite + React + TS, Tailwind + tailwind-merge + clsx, Framer Motion, Lucide, @/ alias, cn()) — a dark copper-on-substrate design whose signature is a live-autorouter TraceField behind the hero (45°-constrained copper traces growing to pads and pulsing vias, pointer-leaning, reduced-motion-safe) and a layer-toggle BoardCanvas that composites Gerber-style solder-mask/copper/silkscreen films; plus a sticky nav, a continuous-DRC bento feature grid, count-up fab stats, a 4-step schematic→route→verify→ship workflow, quote testimonials, scaled-tier pricing, and a validating email CTA; vendored Space Grotesk/Inter/JetBrains Mono, fully offline	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide
copy-machine-setup	"Copy Machine" landing-page scaffold built byte-for-byte to a fixed setup spec (Vite + React, TypeScript, Tailwind + tailwind-merge + clsx, Framer Motion, Lucide, @/→/src/ alias) with the spec-pinned files reproduced character-for-character and an empty App.tsx awaiting the first component; ships a self-contained dark blueprint/IDE "PROJECT SETUP COMPLETE" status screen (radial-masked grid, drifting glow orbs, scanline, count-up readout, created-file tree, verbatim App.tsx code panel, tech-stack chips, copy-machine rules) rendered as a sibling of #root, with vendored Inter/JetBrains Mono, fully offline	React, TypeScript, Vite, Tailwind CSS, tailwind-merge, clsx, Framer Motion, Lucide
corporate-trust-design-system	"Northwind" Corporate Trust design-system showcase — a modern enterprise-SaaS landing fully expressing the style: indigo→violet gradients, colored (blue/violet-tinted) shadows, an isometric 3D hero dashboard, soft blurred blobs, a split gradient headline, zig-zag deep-dives on tilted gradient slabs, a count-up stats band, glowing numbered steps, a scaled "popular" pricing tier, a details/summary FAQ, and a dramatic dark final CTA — all on centralized tokens	React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide
cyberpunk-glitch-design-system	"NEUROCITRINE // Netrunner OS" — a self-contained Cyberpunk / Glitch design-system showcase that renders like a malfunctioning CRT: chromatic-aberration glitch headline, full-page scanline + signal-noise + sweeping-beam overlays, clip-path chamfered HUD panels, real stacked-box-shadow neon glow, circuit/PCB + grid backgrounds, a live self-typing breach terminal, holographic telemetry cards, all five button variants, count-up stats, an accordion FAQ, and a prefers-reduced-motion static fallback; vendored Orbitron/JetBrains Mono/Share Tech Mono, fully offline	HTML, CSS, vanilla JS
flatline-design-system	Complete flat-design-system showcase landing page — centralized tokens, sharp full-section color blocks (Blue/Emerald/Amber/dark), tinted color-block cards, thick outline buttons, a scaled "popular" pricing tier, multi-color stat count-ups, and high-contrast solid focus rings with zero box-shadows anywhere	React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide
finsyc-finance-landing	"Finsyc" AI finance-management landing page applied verbatim from a 10-component template — an animated soft-gradient video hero with an expanding "Get Started" pill and brand logo marquee, color-blocked metric cards with count-ups, four product-UI feature cards (donut spend chart, balance-forecast graph, security shield, instant-transfer), a tabbed 4-step "How it works", a scroll-pinned benefits list with a progress rail, a count-up metrics band plus a center-snapping testimonial carousel, hover-activated pricing tiers with a monthly/yearly toggle, an animated integrations seal wired to 8 vendored brand icons, a blog grid, and a CTA footer with a giant rising "Finsyc" wordmark; all fonts/logos/UI art/avatars and the background video vendored locally, fully offline	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide
handcraft-paper-ui	"Scribbly" Hand-Drawn design-system landing page — a messy-on-purpose whiteboard product rendered entirely in wobbly irregular border-radii (never rounded-*), hard zero-blur offset shadows, warm paper-grain dot texture, and self-hosted Kalam / Patrick Hand type; centralized tokens drive composable taped/tacked/post-it cards, a hand-drawn SVG hero whiteboard, squiggly step connectors, a dashed-circled scaled pricing tier, speech-bubble testimonials, and a press-flat button system	React, TypeScript, Vite, Tailwind CSS v4, Lucide
industrial-skeuomorphism	"SCHEMATIC" Industrial Skeuomorphism design-system showcase — a tactile hardware-control landing built on centralized neumorphic tokens, with an all-CSS hero device mockup (scanline screen + live dashboard), glowing LED status indicators, corner screws & vent slots on every panel, a cylindrical How-It-Works pipe connector, push-pinned testimonials with masking tape, punched-hole pricing tags, a conic-gradient radar sweep, recessed "data slot" inputs, and a matte-plastic noise overlay; vendored Inter/JetBrains Mono and all assets, fully offline & responsive	React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide
kinetic-typography-poster	Kinetic Typography design-system showcase — a festival poster page with viewport-width clamp() headlines, two infinite marquees, towering background numbers, hard acid-yellow color-inversion hover states, sticky-stacking cards, scroll-driven hero zoom, and a prefers-reduced-motion static fallback	React, TypeScript, Vite, Tailwind CSS v4, Framer Motion, react-fast-marquee, Space Grotesk
lumen-design-system	Showcase landing page that fully expresses the Linear/Modern design language — four-layer ambient background with floating gradient blobs, mouse-tracking spotlight cards, gradient typography, scroll-linked hero parallax, multi-layer shadows, an asymmetric bento grid, a live token gallery and component playground, and a responsive hamburger menu, all on centralized design tokens	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide
lumina-minimalist-modern	Full "Minimalist Modern" design-system landing page for analytics platform Lumina — Electric Blue signature gradient, inverted slate sections, Calistoga/Inter dual-font type, an animated abstract hero graphic, and centralized design tokens	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide
luxury-editorial-design-system	"MAISON" Luxury / Editorial design-system showcase — a full editorial landing (hero, drop-cap features, dark stats, multi-layer testimonials, ARIA FAQ accordion, blog grid, footer CTA) with vendored Playfair/Inter fonts, vertical writing-mode labels, fixed gridlines, a gold-sliding button, and a paper-grain noise overlay	React, TypeScript, Vite, Tailwind CSS, Lucide
material-you-showcase	"Lumi" Material You (Material Design 3) design-system showcase — a full landing page on centralized MD3 tonal tokens (purple seed #6750A4): a 48px-radius hero, layered organic blur shapes, pill buttons with state layers, glass-morphism benefits on a primary block, glow-on-hover How-It-Works badges, a recessed tonal-ramp visualizer, a lifted featured pricing tier, image-zoom blog cards, an accordion FAQ, a filled-text-field CTA, and a tertiary FAB — all on the cubic-bezier(0.2,0,0,1) easing, with vendored Roboto and fully local SVG art	React, TypeScript, Vite, Tailwind CSS v4
maximalism-dopamine-system	"DOPAMINE" Maximalism / Dopamine design-system showcase — a deliberately overwhelming nine-section page on five clashing accents (rotated by index % 5) with layered dot/stripe/checker/mesh patterns, multi-layer glow+hard shadows, stacked text-shadows, 21 floating shapes, bleeding background words, animated gradient text, broken offset grids, two rotated marquees, a live token gallery, scaled-tier pricing, a 4-variant component playground, ARIA FAQ, and a full reduced-motion fallback; vendored Outfit/Unbounded/DM Sans/Bangers/Bungee, fully offline	HTML, CSS, vanilla JS
neo-brutalism-loud-system	"LOUDHOUSE" Neo-brutalism design-system showcase — centralized @theme tokens (cream/black + red/yellow/violet highlighters), hard offset shadows (zero blur) as shadow-neo* utilities, hollow text-stroke display type, sticker rotations, a chaos-zone hero, live token gallery, count-up stats, an interactive component playground, scaled pricing, two marquees, a keyboard FAQ, mechanical click-down buttons / lift cards / yellow-flood inputs, and a full prefers-reduced-motion fallback	React, TypeScript, Vite, Tailwind CSS v4, react-fast-marquee, Lucide, Space Grotesk
neumorphism-soft-ui	"SOFTFORM" Neumorphism (Soft UI) design-system showcase — one cool-grey surface (#E0E5EC) where dual opposing RGBA shadows carve every edge: extruded / inset / inset-deep / nested depth states, hyper-rounded 32px corners, floating concentric-circle hero art, a working component playground (buttons in all states, inset inputs with accent focus rings, a switch, segmented control, draggable+keyboard slider), an inset token gallery, a soft-dark theme toggle, and zero borders anywhere; fully offline	HTML, CSS, vanilla JS
newsprint-editorial-press	Full editorial landing page expressing the "Newsprint" design system — massive Playfair headlines, zero radius, collapsed grid borders, drop caps, a breaking-news ticker, an inverted black "How It's Filed" section, grayscale halftone engravings, hard offset hover shadows, and sparing editorial red	React, TypeScript, Vite, Tailwind CSS, CVA, tailwind-merge, Lucide
playful-geometric-design-system	"Blobby" Playful Geometric design-system showcase — a Memphis-inspired "stable grid, wild decoration" landing with centralized tokens (warm paper + slate + four rotational pop colors), chunky 2px borders, hard no-blur "pop" shadows, varied/blob radii, a blob-masked geometric mascot illustration, confetti shapes, keyword + logo marquees, a dashed-line feature grid, a star-badged scaled pricing tier, a live token gallery, an ARIA FAQ, and a focus-shadowed CTA form — all honoring prefers-reduced-motion	React, TypeScript, Vite, Tailwind CSS v4, Lucide
retro-90s-nostalgia-design-system	"WEBMASTER 95" Retro / 90s Nostalgia design-system showcase — a faux Windows 95 desktop that documents its own DNA with centralized bevel tokens, a scrolling marquee, animated rainbow text, title-bar windowed cards, a tiled crosshatch background, blue/underlined hyperlinks, alternating rows, groove HR dividers, a glowing green hit counter, pulsing NEW!/HOT! badges, a construction-stripe CTA, dotted focus rings, and zero border-radius; fully offline	HTML, CSS, vanilla JS
scaffold-ready-splash	Exact-spec single-page landing scaffold (Vite + React + TypeScript + Tailwind v3, @/ alias, cn() helper, Framer Motion + Lucide) whose App shell — instead of an empty page — renders a polished, self-contained "Scaffold ready" splash: ambient drifting orbs + a panning technical grid, a gradient headline, a self-typing macOS terminal, stack chips, a scroll-sequenced setup checklist, a src/ file tree, and a dashed "drop your first component" target; fully offline (system fonts) and prefers-reduced-motion–aware	React, TypeScript, Vite, Tailwind CSS, Framer Motion, clsx, tailwind-merge, Lucide
serif-editorial-design-system	"Roman & Quill" Serif design-system showcase — a private-publishing-house editorial landing (hero, stats, drop-cap features, asymmetric 1.3fr/0.7fr benefits, decorative-quote testimonials, gold-tinted featured pricing, journal grid, ARIA FAQ, inverted correspond form, footer) with vendored Playfair/Source Sans 3/IBM Plex Mono, a rule-line + small-caps label system, bespoke SVG engraving plates, burnished-gold accent, paper-grain overlay, and ambient glow — all on channel-format design tokens, fully offline	React, TypeScript, Vite, Tailwind CSS, Lucide
swiss-design-system	Self-contained Swiss International (International Typographic Style) design-system showcase — strict B/W/Swiss-Red tokens, four CSS texture patterns (grid, dots, diagonal, noise), a Bauhaus hero composition, a mathematical type specimen, a 2×2 component gallery, and bold mechanical interactions (color inversions, rotating plus icons, count-up); fully offline	HTML, CSS, vanilla JS, Inter
vaporwave-outrun-design-system	"NEONWAVE OS" Vaporwave / Outrun design-system showcase — centralized neon tokens (magenta/cyan/sunset) and skew/glow/window component classes, a fixed receding perspective grid floor, a 600px blurred sun, and a global CRT scanline + RGB chromatic-aberration overlay, with a typing-terminal hero, gradient-clipped headlines, skewed un-skewing buttons, rotating diamond icons, an interactive file-explorer, IRC <username> testimonials, a scaled pricing tier, and an accordion FAQ; vendored Orbitron / Share Tech Mono	React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide
verdant-organic-design-system	Full "Organic / Natural" design-system landing for botanical apothecary "Verdant" — earth-drawn palette, Fraunces + Nunito, a global paper-grain overlay, drifting+morphing blob backgrounds, bespoke palette-drawn botanical SVG illustrations, asymmetric feature-card radii, a hand-drawn curved-dashed ritual connector, a rotated-tin product spotlight, an organic image mask, hover-tilt testimonials, and varied moss/terracotta sections; fonts + noise vendored, fully offline	React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide

Shaders (84)

Project	Description	Stack
abstract-glassy-shader	GLASSWORKS — a drop-in WebGL2 metaball field (two SDF circles fused with a smooth union, an exponential glow and a cosine spectrum) integrated into shadcn components/ui and framed as a glass component lab: a live telemetry HUD reading the shader's own blob centres/FPS/clock, a control deck of faders that promote the baked-in constants to live uniforms, copyable source tabs, and a props/uniforms API; fully procedural with a CSS metaball fallback	React, TypeScript, Vite, Tailwind CSS v4, WebGL2, shadcn/ui, Lucide
aether-flow-shader	Faithful shadcn integration of the Aether Flow component — a procedural fractal-noise (fBm) gas rendered on a single full-screen Three.js quad — framed as an atmosphere synthesizer console: a left instrument rail of five faders (Hue/Speed/Intensity/Complexity/Warp) wired straight to the shader's u_* uniforms, a named patch bank (Nebula/Ember/Abyss/Drift/Solar/Bloom), pointer-driven warp, and a live telemetry strip reading the field's per-frame state back out; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide
ai-input-wave-hero	"Wavelength" integration of the prompt's HeroWave AI-input hero (a Three.js + GSAP wavefield of up to 256 instanced, 23.4°-skewed bars driven by two keyframed sine waves, lit with an UnrealBloom pass and a custom film-grain ShaderPass, glowing under the cursor) dropped into @/components/ui with its mini-navbar dependency — the verbatim component's self-typing "Make me a…" prompt box sits over the canvas, framed by a live FPS/uptime HUD, an onPromptSubmit toast, and a shadcn/Tailwind/TypeScript install + props story; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, GSAP, Lucide
animated-shader-background	"AnoAI" product hero set over a full-viewport three.js aurora fragment shader, integrated as a shadcn components/ui piece, with a graceful CSS-aurora fallback when WebGL is unavailable, vendored Geist font + generated avatar art, and a headless screenshot-based shader verification	React, TypeScript, Vite, Tailwind CSS v4, three.js, shadcn/ui, Lucide
animated-shader-hero	"Emberfield" showcase for a reusable WebGL2 animated shader hero (drifting fractal ember field by @atzedent) — a single drop-in @/components/ui component with a live uniforms HUD, pointer-reactive canvas, and a shadcn/Tailwind/TypeScript integration story; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, WebGL2, Lucide
anomalous-matter-hero	shadcn/Tailwind/TypeScript integration of the AnomalousMatterHero — a simplex-noise-displaced Three.js icosahedron wireframe with a fresnel rim glow and a cursor-tracked point light, framed as a "containment lab" specimen: faders wired straight into the displacement/glow/speed uniforms, a live "anomaly energy" telemetry panel that reads center-pixel luminance off the GPU, plus a reticle scope and corner brackets; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide
atc-tunnel-shader	shadcn-style integration of the prompt's ShaderDemo_ATC "ATC one-liner" — a single WebGL2 fullscreen fragment shader ray-marching a cosine-folded chromatic warp tunnel — dropped into @/components/ui and framed as an "Aperture Transit Corridor" instrument: a vertical depth gauge whose reticle rides the shader's own marching clock, a chromatic-split wordmark, a hold/resume control wired to the shader's paused prop, and a telemetry rail reading real per-frame depth + FPS off the GPU loop; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, WebGL2, shadcn/ui, Lucide
aura-core-shader	shadcn-style integration of the brief's verbatim AuraCore WebGL2 energy-core shader (inlined-OGL renderer, HSV core with ten rotating rays, fbm-distorted surface, cursor-reactive particle field) dropped into @/components/ui, framed as a plasma-containment console — the component's four sliders become reactor field controls, four named profiles snap the shader to regimes, and a telemetry deck reads containment integrity / excitation straight off the GPU clock with a freeze control; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, WebGL2, Lucide
aurora-borealis-shader	"Aurora Watch" field-station console wrapping the brief's verbatim Three.js aurora-borealis shader (an FBM-noise green→violet curtain with a cursor-tracking flare) as a shadcn @/components/ui drop-in — a probe reticle tracks the flare as geomagnetic lat/long, and the signature Kp-index gauge (0–9) is driven by the aurora's brightness sampled straight off the GPU, with a CSS-aurora WebGL fallback and fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide
blue-meshy-shader-lab	Faithful shadcn integration of the verbatim WebGL2 "blue meshy" background — a procedural domain-warped fractal-noise (fBm) sea on a single full-screen quad, transparent-compositing through a 20-step blue palette — dropped into @/components/ui and framed as a component lab: the live shader as a full-bleed min-h-screen hero carrying the shipped "Turning Ideas Into Impact" lockup, then a setup guide, anatomy, a props + shader-constant reference, and a usage gallery; the only deltas to the verbatim file are a valid join(", ") and a cancelAnimationFrame cleanup for StrictMode safety, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide
blueprint-ascii-grid-shader	"GRIDLINE" shadcn-style integration of the brief's verbatim WebGL2 asd.tsx — a deep-navy four-point mesh-gradient blueprint grid with ASCII glyphs stamped on the major intersections, drift, vignette, value-noise grain and Bayer dithering — dropped into @/components/ui and framed as a live instrument: a telemetry HUD (iTime/FPS/iResolution/iMouse), a control deck promoting the shader's baked constants to live uniforms, a per-pixel anatomy walkthrough, and a full shadcn/Tailwind/TS integration story; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide
cathedral-raymarch-shader	"VAULTWORK · Cathedral of Light" — the prompt's verbatim WebGL2 volumetric ray-march (a 50-step fragment shader that folds a vaulted nave of leaded, sine-rainbow light) dropped unchanged into shadcn @/components/ui and framed by a thin CathedralStage wrapper that keeps the exact mainImage body while promoting its hidden knobs (pixelRatio / timeScale / paused / exposure) to props and reading center-pixel luminance off the GPU; the chrome is a cathedral-light analysis bench with gothic tracery, named light regimes, a brass control deck, a pointer-tracking rose-window reticle, and a GPU-sampled telemetry strip (nave clock, FPS, dominant stained-glass channel); fonts vendored locally, zero image assets	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide
celestial-bloom-shader	Procedural GLSL "Celestial Bloom" fragment shader — a five-petalled nebula with a glowing star core and twinkling field, rendered full-viewport with Three.js and framed as an observatory specimen plate with reticle corners, a Fraunces hero lockup, and a live telemetry HUD (mission clock, render FPS, petals) driven by the shader's own per-frame state; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, Three.js, Lucide
celestial-ink-shader	Verbatim Three.js "Celestial Ink" fragment shader (a rotating six-octave fBm ink field, plum→magenta→gold, that ripples around the cursor) dropped into shadcn @/components/ui and framed as an inkstone scrying instrument — a cursor-following astrolabe reticle sights the ripple, a telemetry column reads the shader's own per-frame state (ink time, rotation, ripple coords, fps), and freeze / drift / ripple controls drive the pass; Cormorant Garamond / Inter / JetBrains Mono vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide
celestial-matrix-shader	shadcn-style integration of the verbatim Three.js "Celestial Matrix" shader (blue-to-green digital rain bent around a cursor-driven gravitational warp) dropped into @/components/ui, framed as a deep-space signal console — a cursor reticle tracks the warp center while live readouts report render rate, feed time, and warp coordinates; freeze/recalibrate controls drive the shader clock, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide
celestial-matrix-terminal	shadcn-style integration of the verbatim Three.js "Celestial Matrix" shader (blue-to-green digital rain bent around a cursor-driven gravitational warp) dropped into @/components/ui, reframed as "Meridian Station · Orbital Relay 9" — a retro-CRT relay terminal that types a boot/login handshake over the live feed and lands on ACCESS GRANTED; a cursor reticle marks the warp lock and a bottom telemetry strip (feed clock, warp x·y, render rate, carrier state) is sampled straight off the GPU loop; freeze/recalibrate controls drive the shader clock, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide
celestial-sphere-shader	shadcn-style integration of the verbatim Three.js "Celestial Sphere" shader (a cursor-warped fractal-noise nebula over a twinkling star field on one full-screen quad) dropped into @/components/ui, framed as the VANTA-IX deep-field navigation console — a cursor-tracking gimbal reticle and a warp vector visualise the exact u_mouse shift the shader applies, live telemetry reads feed time / FPS / warp x·y / hue, and four faders promote the brief's props (hue, speed, zoom, particleSize) to live GPU uniforms; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, shadcn structure, Three.js, Lucide
cosmic-plasma-web	shadcn integration of the brief's verbatim OGL PlasmaWeb shader (a layered plasma lattice of pulsing nodes, curl-flowed connective streams and excited particles that bends toward the cursor) dropped into @/components/ui and framed as a cursor-driven "field resonance console" — a 60fps cursor-tracking reticle stands in for the pointer (so the interaction reads in the silent recording), faders re-drive the shader's hue/density/glow/attraction/energy props live, named presets snap the lattice between regimes, and a telemetry panel reads render FPS / cursor x·y / an engagement signal off the loop; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, OGL, Lucide
crystal-voronoi-shader	shadcn-style integration of the prompt's crystal-shader (InteractiveShader) — a raw-WebGL two-pass warped Voronoi lattice with a cursor repel field, ported to TypeScript and framed as the "Cryolite Lab" crystallography specimen station: a caliper-framed full-viewport shader with a counter-rotating goniometer reticle, live GPU telemetry (FPS, centre-pixel luminance + spectral cast read via gl.readPixels), and four calibration faders wiring the brief's cellDensity/animationSpeed/warpFactor/mouseInfluence props to live uniforms; zero runtime libs (raw WebGL, no three.js), fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, WebGL, Lucide
crystalline-cube-shader	shadcn-style integration of the verbatim WebGL "Crystalline Cube" component — a sine-carved, ray-marched SDF box lit by a mouse-driven key light and an Inigo-Quilez palette — framed as a lapidary analysis bench: a reticle-bracketed specimen window, a facet console of four faders that promote the component's props (complexity, dispersion, loupe gain, light parallax) to live uniforms, a four-specimen preset catalog, and a telemetry strip reading FPS, derived facet count, refractive index and carat; fonts vendored locally, with a graceful WebGL-offline fallback	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL, Lucide
cybernetic-grid-shader	shadcn-style integration of the verbatim Three.js "Cybernetic Grid" shader (a pulsing cobalt lattice with magenta energy crawling the intersections and a white glow that warps the grid around the cursor) dropped into @/components/ui, framed as a lattice-integrity diagnostic console — a probe caliper snaps to the warp center and reports its coordinates, an integrity gauge fills with render rate, and hold/re-seed controls drive the field clock; Chakra Petch type and fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide
digital-glitch-shader	shadcn-style integration of the prompt's digital-glitch Three.js/GLSL component — a retro CRT shader of scanlines, RGB-shift chromatic aberration, and film grain rendered full-viewport — framed as the "Static Bureau" signal-calibration bench: the brief's five uniforms become engineering trim faders, its presets become patch channels, and a live SMPTE timecode, measured FPS, and a signal-loss meter read straight off the shader's own animation loop; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Three.js, Lucide
digital-petals-shader	shadcn-style integration of the brief's DigitalPetalsShader — a polar-coordinate GLSL flower on a single full-screen quad with Three.js dropped into @/components/ui, framed as a herbarium specimen plate: the corolla breathes between three and seven petals, the cursor seeds a soft light bloom, and a signature Petal Dial gauge plus a cultivation-log HUD read the shader's exact per-frame petal count and state straight off the GPU; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide
dithering-shader-lab	"DITHER LAB" darkroom instrument integrating the drop-in DitheringShader (WebGL2 / GLSL ES 3.00, 7 shapes × 4 ordered-Bayer/noise dithering matrices) at @/components/ui — a full-bleed live stage with reticle chrome, shape/matrix/ink/pixel-grid/speed controls plus presets driving the shader through live uniforms, and a telemetry HUD reading FPS/clock/buffer/cell-grid straight off the GPU; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, WebGL2, shadcn/ui, Lucide
dithering-sphere-shader	"DITHER LAB" showcase for the designali-in/dithering-shader component — a WebGL2 fragment shader that resolves seven procedural fields (sphere, ripple, swirl, warp, dots, wave, simplex) to 1-bit through ordered Bayer or stochastic dithering — dropped into @/components/ui and framed as a 1-bit print instrument: a full-bleed live hero with an FPS/frame telemetry HUD, a control deck promoting every prop (shape, dither type, pxSize, speed, colours) to a live knob, a signature panel that renders the shader's actual Bayer threshold matrix and live-dithers a tonal ramp, plus a lazy-mounted shape index; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide
dithering-swirl-shader	"HALFTONE ENGINE" — a halftone-press take on the prompt's DitheringShader (WebGL2, 7 shapes × 4 ordered-Bayer/noise matrices) at @/components/ui: a full-bleed swirl press with press controls (shape/matrix/phosphor/pixel-size/speed), a panel rendering the active Bayer threshold matrix cell-by-cell, and an ink-coverage telemetry HUD reading lit-pixel fraction straight off the framebuffer; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide
dotted-surface-waves	shadcn/Tailwind v4/TS integration of the verbatim DottedSurface component — a full-viewport three.js Points lattice (40 × 60 = 2,400 dots) displaced by two crossing sine waves — framed as a quiet "field generator" with a centred Geist Mono lockup + radial glow and a live next-themes toggle that flips the dot palette (light dots on dark ↔ dark dots on light) in real time; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Three.js, next-themes, Lucide
dynamic-waveform-shader	shadcn-style integration of the ShaderCanvas "Dynamic Waveform" — a Three.js fragment shader that stacks up to eight mouse-warpable sine harmonics into a glowing signal trace — dropped into @/components/ui and framed as a CRT "Signal Analysis Bench" with an oscilloscope graticule, corner reticles, two-trace colour trims, five faders wired straight to the shader uniforms, four channel presets (Baseline / Signal Scan / Deep Sea / Vaporwave), and a live telemetry strip (sweep time, refresh, trace level, harmonics) read off the shader's own per-frame state; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, three.js, Lucide
electric-waves-shader	shadcn/Tailwind v4/TS integration of the prompt's ElectricWavesShader (a Three.js fragment shader piling additive R/G/B sine-interference lines onto one full-screen quad), framed as the "ARCWAVE" signal instrument — viewfinder brackets, CRT scanlines, the component's own five-slider uniform deck (wave count / amplitude / frequency / brightness / colour separation), and a live FPS / uptime / resolution telemetry HUD; system fonts, runs offline	React, TypeScript, Vite, Tailwind CSS v4, Three.js, shadcn/ui, Lucide
endless-pursuit-shader-hero	shadcn/Tailwind v4/TS integration of UIMIX's monochrome "ENDLESS PURSUIT" hero — the pasted component's remote UnicornStudio shader scene is preserved but layered over a dependency-free WebGL fallback field (drifting nebula, an "endless orbit" arc, parallax twinkling stars) with a pure-CSS starfield beneath, so the Sisyphus-themed hero runs fully offline; Next.js 'use client'/styled-jsx adapted to Vite, JetBrains Mono vendored, Lucide icons	React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, WebGL, Lucide
exoplanet-survey-shader	shadcn-style integration of the brief's verbatim Three.js "Celestial Sphere" ShaderCanvas (six-octave FBM cloud deck + Fresnel atmosphere rim on a rotating SphereGeometry) dropped into @/components/ui, framed as a "Stellar Cartography" exoplanet survey — the sphere sits inside a brass eyepiece with an engraved reticle and radar sweep, two nebula colour chips plus rotation / cloud-density / glow dials and the brief's three world presets, a catalog card deriving spectral class / rotation period / albedo from the live props, and a telemetry strip reading the shader's own per-frame clock, FPS and longitude; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide
flowing-waves-shader	shadcn/Tailwind/TypeScript integration of the prompt's InteractiveWaveShader (a nine-iteration cosine-displacement Three.js fragment-shader wave field on one full-screen quad), framed as a "tidal field observatory" — a live buoy-telemetry panel reads significant wave height/period/turbulence straight off the GPU via gl.readPixels, with a sea-state mode selector, center-clarity toggle, and amplitude dial steering the shader's mode/dimmingDisabled/intensity uniforms; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide
fluid-swirl-shader	shadcn/Tailwind/TypeScript integration of the prompt's verbatim FluidSwirl raw-WebGL component (three pigments folded into an endless paint vortex on a single full-screen quad) dropped into @/components/ui, framed as the "FLUX" pigment-mixing console — the shader's hard-coded uniforms become an additive, backward-compatible props API driving three live colour pickers, contrast/spin/flow/pixel-filter faders, a polar-warp toggle, six paint presets and a randomiser, with pointer/touch steering the spin and a signature pigment-trace oscilloscope reading the field's average luma straight off the framebuffer; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL, Lucide
galactic-spiral-shader	shadcn-style integration of the verbatim Three.js ShaderAnimation (a 7-colour neon-rainbow spiral GLSL fragment shader) dropped into @/components/ui, framed as a deep-field "survey transmission" — a registration-corner plate, a Galactic Spiral hero lockup over a legibility scrim, and a live telemetry ledger reporting mission clock, measured render FPS, and drifting R.A./Dec. coordinates; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Three.js, Lucide
gaming-vibe-shader	shadcn-style integration of the brief's "Gaming vibe Shader" (neno-shader.tsx) — a Three.js neon ring field (electric blue → magenta) that warps, breathes and rotates — dropped into @/components/ui and framed as the "NENO RIG" arcade-rig boot diagnostic, with an Orbitron cabinet marquee lockup, an overclock control deck of four faders (clock/rings/warp/sync) plus RGB profiles wired straight into the shader uniforms, pointer parallax with a targeting reticle, and a live telemetry HUD; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Three.js, Lucide
generative-mountain-scene	shadcn/Tailwind/TypeScript integration of the brief's GenerativeMountainScene — a solid 128² Three.js plane raised into a mountain massif by two octaves of 3D simplex noise in a custom GLSL vertex shader and lit by a fresnel+diffuse fragment shader off a cursor-driven point light — framed as the "ORONOMY" terrain-survey station with a viewfinder stage (corner brackets, scanlines, sweep), freeze-drift + ridge-tint controls, and a live telemetry HUD reading real FPS / survey clock / time drift / point-light X·Y·Z straight off the render loop; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide
glsl-hills-shader	shadcn/Tailwind/TypeScript integration of the brief's verbatim GLSLHills — a monochrome 3-octave Perlin hill range on one 256² RawShaderMaterial plane, folded to face the camera and pushed forever forward so its far ridges dissolve into haze — dropped into @/components/ui and framed as the "FOGBANK" low-visibility terrain monitor: the canonical demo lockup floats over a viewfinder stage (reticle, scanlines, sweep), a drift console of four faders promotes the props + baked fog/haze constants to live uniforms with four field presets, and the signature visibility gauge plus a telemetry strip read drift clock / FPS / cam depth / visibility (km) and ridge-crest straight off the GPU framebuffer; hold/resume drives the shader clock, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide
grain-gradient-corners-lab	"GRAINFIELD" — the prompt's verbatim GradientBackground (a @paper-design/shaders-react GrainGradient painting the corners shape: two rounded rectangles in warm orange→amber→pink grain on black) dropped into components/ui, then wrapped in a parametric GrainGradientStage twin so an instrument console can drive the whole uniform surface live — a shape selector across all seven u_shape modes (wave·dots·truchet·corners·ripple·blob·sphere), five named palettes, a uniforms deck of faders (softness·intensity·grain·scale·rotation·speed), a Freeze control, a four-tab copyable integration story (component/usage/parametric/setup) and a telemetry strip reading real FPS/clock/frames off a rAF loop; the preserved "Backgrounds are awesome :)" hero floats over it. Fonts vendored locally, CLI-verified headless with a WebGL render check	React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, shadcn/ui, Lucide
grainy-gradient-ripple-card	shadcn integration of the brief's verbatim gradient-shader-card — a grainy 7-stop gradient (domain-warped value noise + 3D simplex grain + overlay film grain) rendered on a single React-Three-Fiber quad that ripples where you tap it — dropped into @/components/ui and framed as the "Chroma Foundry" pigment-lab console: a rail with the exact 7 hex stops the shader mixes, five faders promoting the baked noise*/waveNoise* constants to live uniforms, named patches (Foundry/Silk/Marble/Static/Tide), click-to-ripple with tactile DOM markers, and a telemetry strip reading the shader's own clock + live ripple count off the GPU loop; fonts vendored locally, headless WebGL + interaction verification (9/9)	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, @react-three/fiber, framer-motion, Lucide
hero-button-expandable	shadcn/Tailwind v4/TS integration of the prompt's hero-button-expendable — a GodRays-lit "Nexus" hero whose pill CTA performs a framer-motion shared-layout morph (layoutId) into a full-screen MeshGradient demo-request modal with an animated idle→submitting→success form; both shaders from @paper-design/shaders-react, fonts vendored locally	React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, framer-motion, shadcn/ui, Lucide
hero-dithering-card	"DITHER · PRESS" — the brief's CTASection dropped verbatim into components/ui: a transparent-backed @paper-design/shaders-react Dithering shader laying Pantone-orange ink under an editorial headline, mounted on a print-house "press bed" with crop marks, a rotating registration loupe, a half-tone dot field, and a telemetry strip that samples ink coverage live off the plate; plus an "ink console" whose faders (speed / shape / type / ink) drive a second live Dithering instance, a copyable-source integration story, a Dithering props table, and a paper ↔ lights-out theme toggle — fonts vendored locally, CLI-verified with a screenshot-diff render check	React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, Lucide
hero-futuristic-webgpu	Faithful shadcn integration of the Hero Futuristic component — a depth-mapped portrait dissolved into a scanning dot-matrix field, rendered through a Three.js WebGPU pipeline written entirely in TSL: a colour texture + companion depth map drive a node material that parallax-shifts the image by the cursor, masks it into cellular-noise dots, and sweeps a depth-driven reveal, then a TSL post pass adds bloom + a travelling red scan line; headline reveals word-by-word over the top. Async-renderer gl callback (WebGPU → WebGL2 fallback) needs @react-three/fiber v9; texture, depth map and fonts vendored locally	React 19, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js (WebGPU + TSL), @react-three/fiber, @react-three/drei, Lucide
hex-shield-shader	shadcn-style integration of the brief's verbatim shield-shader.tsx — a 100-step three + @react-three/fiber fragment shader that folds a mirrored hex lattice onto a sphere distortion and tanh-tonemaps a cyan→violet arc field — dropped into @/components/ui and framed as the "AEGIS" deflector-array console: a typed sibling promotes every baked GLSL constant (dome bias, curvature, hex scale, drift, edge/arc gain, falloff, tint) to a live uniform driven by a calibration deck, five named deflector profiles snap the field to regimes, a cursor-tracked impact reticle lights the dome, and a circular shield-integrity gauge plus a telemetry strip read render rate / impact charge / shield clock straight off the GPU loop with a freeze control; fonts vendored locally	React 19, TypeScript, Vite, Tailwind CSS, Three.js, @react-three/fiber, shadcn/ui, Lucide
hive-noise-shader	"HIVE" — a faithful shadcn integration of the prompt's verbatim hive.tsx component, a single full-screen WebGL2 fragment shader that raymarches a 20-step noise field and tints it with a flowing amber → magenta cosine spectrum; dropped unedited into @/components/ui (zero props, zero deps, zero assets) and mounted as a fixed full-viewport backdrop under a frosted shader lab: a hero, a spec HUD reading the shader's real shape (its u_res/u_time uniforms, raymarch steps, DPR clamp) instead of faked telemetry, an integration ticker, and a below-the-fold integration story (default paths, why components/ui, from-scratch setup, copyable source, a render-pipeline walkthrough, and a props/state/assets Q&A); CLI-verified with a headless screenshot light-check	React, TypeScript, Vite, Tailwind CSS v4, WebGL2, shadcn/ui, Lucide
horizon-strata-shader	"STRATA" shadcn integration of the brief's verbatim WebGL2 lab.tsx — a single fullscreen fragment pass that folds space into repeating 4-unit horizon strata (p.y = abs(mod(d - 2.0, 4.0) - 2.0)) over a cosine-tube ground plane and flies it toward the vanishing point (p.z -= t), tanh-mapped — dropped into @/components/ui and framed as a deep-field stratigraphy scanner: a right-edge layer gauge whose reticle rides the shader's own march clock (one sweep per band), a chromatic-split STRATA wordmark, a hold/resume control wired to the component's real paused prop, and a telemetry rail reading live depth/frame/FPS off the GPU loop via onSample; CSS-strata fallback when WebGL2 is unavailable, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide
interactive-flux-shader	shadcn-style integration of the prompt's interactive-shader component — a full-screen WebGL2 FBM noise field (hue/speed/intensity/complexity uniforms + a cursor-warp) ported to TypeScript and re-framed as "FLUX·01", a Eurorack-style field synthesizer: the four params become engraved aluminium faders, the field sits in a recessed scope window with a tracking crosshair reticle, and a live telemetry stack reads the field's sampled luminance, dominant hue, and draw rate straight off the GPU via gl.readPixels; zero runtime libs (raw WebGL, no three.js), fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide
launch-shader	shadcn-style integration of the brief's verbatim WebGL2 Component (launch.tsx) — a single fullscreen fragment shader ray-marching a churning molten engine plume (camera at vec3(0,-2,7), an animated turbulence loop folded into a cos-rippled SDF floor, accumulated into a hot red/amber channel and tanh tone-mapped) — dropped into @/components/ui and framed as a rocket ignition control console: a vertical thrust gauge whose reticle rides the shader's own clock, a heat-glow LAUNCH wordmark, an Ignite/Hold control wired to the shader's paused prop, an arming launch-sequence rail, and a telemetry rail reading real altitude/throttle/iFrame/FPS off the GPU loop; auto-detects software WebGL to keep captures fluid while real GPUs render full-res; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide
liquid-crystal-shader	shadcn-style integration of the verbatim raw-WebGL liquid-crystal component (simplex-noise interference bands on a single mouse-warped full-screen quad) dropped into @/components/ui, framed as a polarized-light optics bench — the prompt's top-left ControlsPanel drives the hue/speed/noise/warp/zoom/brightness uniforms, a crossed-polarizer reticle tracks the mouse-warp centre, an instrument rail reads live FPS/render clock/birefringence off the shader's own per-frame state, and an integration docket documents the drop-in; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, WebGL, Lucide
liquid-metal-foundry	shadcn-style integration of the prompt's verbatim background-shades — a full-bleed, framer-motion–animated @paper-design/shaders-react LiquidMetal field dropped into @/components/ui and framed as a molten-metal foundry console: the live shader pours into a registration-bracketed crucible plate while a casting deck drives every real LiquidMetal prop (tint, shape, repetition, softness, distortion, contour, chromatic shift, rotation, scale, speed, blur) in real time, with FPS·frame·uptime telemetry, a prefers-reduced-motion–aware breathing loop, and a tabbed install / props-API / live-usage / integration-notes / why-components/ui dock that documents reconciling the verbatim shape="plane" and unused PulsingBorder against shaders-react 0.0.76; Space Grotesk + JetBrains Mono vendored locally	React, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, framer-motion, shadcn/ui, Lucide
living-nebula-shader	shadcn-style integration of the brief's LivingNebulaShader — a two-layer fbm gas cloud (magenta plasma + ion-blue) that lenses around the cursor, rendered full-viewport with Three.js and framed as a deep-sky observatory sky-feed console: corner brackets, a scope scanline, a cursor lens reticle, and a live telemetry rail reading the shader's own per-frame state (feed clock, render FPS, and warp coordinates computed with the exact GLSL normalization); fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, Three.js, shadcn/ui, Lucide
mesh-gradient-shader-hero	shadcn-style integration of the prompt's HeroSection — a hero whose background is a flowing @paper-design/shaders-react MeshGradient under a frosted veil — dropped verbatim into @/components/ui and framed as a warm "palette studio": the live hero sits in a registration-bracketed plate while a control deck drives the shader's real props (color stops, distortion, swirl, speed, offsetX) in real time, with light/dark veil toggle, FPS·frame·uptime telemetry, and a tabbed install / props-API / live-usage / why-components/ui dock; Onest vendored locally as the Satoshi substitute	React, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, shadcn/ui, Lucide
molten-core-shader	shadcn-style integration of the MoltenCoreShader component — a procedural FBM lava fragment shader rendered full-viewport with Three.js, framed as a live "foundry core monitor" with a base-color toggle, a melt-intensity dial, and a telemetry panel that reads core temperature straight off the GPU	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide
morphing-light-shader	Faithful shadcn integration of the brief's verbatim MorphingLight Three.js shader (radially symmetric pink↔cyan morphing interference fringes on one full-screen quad) dropped into @/components/ui and reframed as FRINGE, a tabletop interferometer — the shader's baked constants (2.5/4.0/8.0 + an HSV hue rotation) are promoted to four live "beam" faders, five named emission sources snap the field to stored uniforms, a concentric fringe reticle mirrors the shader's own radial symmetry, a cursor caliper reads fringe order at the optical axis, and a detector strip reads clock/FPS/axis intensity straight off the GPU via gl.readPixels; zero-prop <MorphingLight /> stays byte-for-byte original, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide
moving-circles-shader	Faithful shadcn/R3F integration of the prompt's verbatim moving-circles-shader.tsx (an isometric space-warping GLSL field that tiles a sphere into every lattice cell and steps it one axis at a time) dropped into @/components/ui and framed as PHASE LATTICE, a sphere-sonar console — the shader's exact mod(time,3.0) axis cycle and eased t − sin(t·τ)/τ sweep are decoded in JS to drive a live X/Y/Z phase-axis rail, a sweep meter, and a drift readout that match the GPU frame-for-frame, plus a telemetry ticker (uTime/axis/phase/fps), freeze + speed + hide-UI transport, and a slide-in install/usage sheet; zero-prop <Component /> stays verbatim, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, @react-three/fiber, Lucide
novatrix-gradient-mesh	shadcn/Tailwind v4/TypeScript integration of the prompt's gradient-mesh.tsx (the Novatrix ogl shader) dropped verbatim into @/components/ui and framed as the "NOVATRIX Gradient Mesh Lab" — a water-distorted fractal gradient field under the prompt's mix-blend-overlay "Gradient Mesh" headline, with a uniform control deck that promotes every baked-in constant (speed/swirl/scale/rotation/wave amp·freq·speed/grain/offsets/distortion) to a live fader, eight curated 3-stop palettes, an independent FPS·frame·clock telemetry HUD with pause-freeze, and a tabbed install / props-API / usage / why-components/ui dock; fonts vendored locally, fully procedural (no image assets)	React, TypeScript, Vite, Tailwind CSS v4, ogl, WebGL, shadcn/ui, Lucide
old-television-shader	shadcn/Tailwind/TypeScript integration of the brief's verbatim react-three-fiber WaveShaderMaterial (a flowing-sine + 4-octave fractal-noise field mixing two colours into analog snow on one drei shaderMaterial quad) dropped into @/components/ui and framed as a "Cathode Vault" broadcast monitor — the shader is the live picture tube of a CRT cabinet with scanlines/shadow-mask/vignette glass, a self-typing on-screen channel readout, six tunable channel presets, faders that promote the shader's baked constants to live uWave/uGrain/uBright uniforms, and a phosphor signal meter reading centre-pixel luminance straight off the GPU; the original PolishedShader default export is preserved as a drop-in, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, @react-three/fiber, @react-three/drei, three, Lucide
paper-shader-resume-hero	shadcn components/ui integration of the prompt's portfolio-hero-with-paper-shaders — a split-screen designer résumé (Jessi.cv) whose right panel is a live @paper-design/shaders-react Dithering canvas with its own internal light/dark toggle — dropped in verbatim and framed as a "darkroom" proof: the as-shipped component sits in a crop-marked plate, an ink console promotes every Dithering prop (shape/bayer-matrix/pxSize/scale/speed/colour pair) to live faders with live prop/fps telemetry, a procedural shader-portrait gallery, and a setup/why-components/ui/source/props-API story (the invalid shape="cat" is corrected to sphere); fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, shadcn/ui, Lucide
paper-shaders-control-deck	Instrument-console "Control Deck" for driving live WebGL shaders — four selectable channels (paper-design Mesh Gradient / Dot Orbit / Combined plus the prompt's custom react-three-fiber GLSL Shader Plane + energy rings), a brushed-graphite scope housing with corner brackets/scanlines/vignette, live FPS·frame·uptime telemetry, and speed/intensity faders wired straight into the shader uniforms	React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, @react-three/fiber, three, Lucide
paper-shaders-hero-lab	shadcn integration of the 21st.dev "Beautiful Shader Experiences" hero (two stacked @paper-design/shaders-react MeshGradient layers + a rainbow PulsingBorder ring with orbiting marquee), copied verbatim into components/ui and framed as a dark instrument console — a Showcase/Lab view toggle, a control deck promoting the baked-in shader constants to live config/pulse uniforms (colour stops, base/wire speed, distortion, swirl, wire opacity, wireframe, pulse speed/glow), a telemetry HUD whose colour chip is sampled straight off the live shader canvas, and an install / props / why-components/ui / responsive dock; module-augmented types keep the drop-in byte-for-byte, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, framer-motion, shadcn/ui, Lucide
phosphor-30-shader-hero	shadcn/Vite/TypeScript integration of the brief's raw-WebGL2 phosphor-30 shader (an 80-step raymarch folding a rotating SDF into ribbons of light via tanh(o / 5e3) on one full-screen triangle), framed as a CRT "PHOSPHOR // 30" instrument hero — bezel + corner brackets, a drifting scan line, a phosphor-glow FIELD OF / LIGHT headline, live FPS·session telemetry and lucide-react chrome; the prompt's phosphor-30.tsx + demo.tsx dropped in verbatim alongside a composable type-checked twin, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, WebGL2, shadcn/ui, CVA, @radix-ui/react-slot, Lucide
radial-aperture-shader	shadcn/Tailwind v4/TypeScript integration of the brief's raw-WebGL2 raidal-2 radial-bloom shader (nine accumulating blades on one full-screen triangle, an angular smoothstep gate and a tanh tone-map), framed as the optical "APERTURE" instrument — a live hero with FPS/uptime telemetry, a control deck that promotes the field's baked-in 9/0.03/hue constants to live uniforms, a GLSL anatomy walkthrough, a self-rendered specimen gallery, and the verbatim drop-in shown contained + fullscreen; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, WebGL2, shadcn/ui, Lucide
radial-shader	"Radial Bloom" — verbatim shadcn components/ui integration of the brief's single-file WebGL2 fragment shader (seven polar-gated rings blooming from one full-screen triangle, each rotating at its own t·sin(i²) rate under a phase-shifted cosine palette and a tanh tone-map), dropped in unedited and framed as an observatory instrument: the fullscreen component renders as a fixed background under a glass hero lockup, a right-rail telemetry HUD mirrors the shader's own iTime/iFrame/FPS and per-ring phase, and a scrollable deck documents the shadcn/Tailwind/TypeScript setup, the components.json aliases, why components/ui matters, the props/uniforms API, and a GLSL anatomy walkthrough; zero image/shader-library dependencies, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, WebGL2, shadcn/ui, Lucide
realistic-fog-background	"HAAR" sea-fog instrument integrating the prompt's realistic-fog-background — a WebGL fragment-shader fog (six octaves of domain-warped fBm on one full-screen quad lit by a cursor "lighthouse beam") dropped into @/components/ui; the signature visibility gauge reads the shader's own framebuffer luminance off the GPU via gl.readPixels, a control deck promotes every baked constant to a live uniform with a five-patch fog bank (Sea Haar → Pea Souper → Dry Ice → Moor Drift → Clear Dawn), plus a full shadcn/Tailwind/TS integration story; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, WebGL, shadcn/ui, Lucide
sdf-dreamscape-shader	shadcn-style integration of the verbatim "SDF Dreamscape" component — a native-WebGL fractal signed-distance-field (a recursive Julia-fold bent live by the cursor) ported to strict TS in @/components/ui and reframed as the "Oneirograph" dream-recorder console: a Big Shoulders hero lockup, a registration frame + reticle, four tuning dials (Spectrum/Drift/Recursion/Lens) annotated with their u_* uniforms, Lucid/Abyssal/Solar/REM presets that snap all four at once, and a live telemetry strip reading the shader's own FPS and dream clock; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, WebGL, Lucide
shader-animation-integration	shadcn/ui integration of a zero-prop Three.js WebGL fragment-shader component (radiating RGB lines) — a full-bleed shader hero plus a docs page covering the components/ui path, the three dependency, copy-paste usage, and a props/state/assets/responsive/placement Q&A	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide
shader-flow-field-rings	shadcn/Tailwind/TypeScript integration of the prompt's ShaderAnimation (a Three.js fragment shader drawing additive R/G/B interference rings on one full-screen quad), framed as a signal/oscilloscope lab — a live shader hero with transport + FPS/time/uptime telemetry, a signature "channel decomposition" reading each color[j] loop as its own live sparkline, an install/components/ui story, copyable source tabs, and a props/uniforms API; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide
shader-lines-showcase	shadcn-style integration of the "Shader Lines" component — a generative GLSL line field on one full-screen quad — wrapped in a component-library docs page with a full-bleed live hero, a tabbed copyable source panel, an anatomy walkthrough, and a props/uniforms API, with Three.js r89 and all fonts vendored locally so it runs offline	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide
shader-plasma-grid-background	"PLASMASIGNAL" showcase for a drop-in WebGL plasma-grid background (shadcn components/ui) — the brief's fragment shader ported to TS, wrapped in a "Signal Lab" page with an oscilloscope HUD reading live iTime/FPS/iResolution, and a control deck of faders that promote the shader's baked-in constants to live uniforms to re-tint/re-shape the whole field in real time	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL, Lucide
shader-spectral-clock	"SPECTRA CLOCK" integration of the brief's verbatim shader-clock.tsx — a raw-WebGL eight-fold cosine/sine domain warp coloured by a wavelength→RGB spectrum, with a live clock, editable location and °C/°F toggle floating over it — dropped into @/components/ui and framed as a spectral-field timepiece lab: a frosted clock card over the live field, a telemetry HUD reading the shader's own iTime/FPS/centre-pixel colour off the GPU, a control deck promoting the four baked GLSL constants (for(i<8)/p*=2.0/p.y*50.0/iTime) to live uniforms, a six-city world-preset bank with locally-generated skyline stills, a Freeze control and a CSS-aurora WebGL fallback; the verbatim demo.tsx is embedded untouched and fonts are vendored locally	React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, WebGL, Lucide
sickui-waitlist-mesh-shader	shadcn-style integration of the verbatim background-shader.tsx — a deep-blue @paper-design/shaders-react MeshGradient backdrop — copied byte-for-byte into components/ui and grown into a full "SickUI" waitlist launch page: a glass email-capture card with validation + success state, an animated signup tally and gradient-monogram social proof, a "what's shipping" feature grid, and nav/footer floating over the living shader; Unsplash is network-blocked here so avatars are synthesised locally and fonts are vendored, so it runs fully offline	React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, Lucide
simplex-dithering-shader	shadcn/Tailwind v4/TS integration of the verbatim DitheringShader — a WebGL2 ordered-dithering field (simplex/warp/dots/wave/ripple/swirl/sphere crushed through Bayer 2×2/4×4/8×8 or blue-noise matrices into a two-tone halftone) dropped into @/components/ui, framed as an amber-on-oxblood "dither bench": the brief's ripple · 2×2 preset full-bleed behind a centered "Simplex" lockup, a live Bayer threshold-matrix panel, and field/matrix/pixel-size/speed controls wired straight to the shader uniforms with an FPS/shader-clock telemetry HUD read off the render loop; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS v4, WebGL2, shadcn/ui, Lucide
spooky-smoke-shader	"AETHER" séance instrument that integrates a WebGL2 fbm-noise smoke component — a live observation window tuned by a single smokeColor prop, an alchemical reagent tray of preset swatches plus a brass colour dial, and two documented specimen panes, all on a shadcn/ui project structure	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Lucide, WebGL2
starship-shader	"HELM-9 · FTL Navigation Console" integration of @XorDev's verbatim "Starship" warp-streak fragment shader (a 50-step exp(sin()) accumulation over a noise-warped distance field, tanh-tonemapped on a pure-black hull) rendered on a @react-three/fiber fullscreen quad and dropped into @/components/ui — framed as a starship helm with a signature velocity ladder whose caret rides the shader clock, throttle/exposure faders + named drive regimes wired to optional speed/intensity/paused props, an engage-jump / hold-field sequence, and a live field-clock/velocity/distance/FPS telemetry deck read off the per-frame callback; full shadcn/Tailwind/TS integration story, fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, @react-three/fiber, Lucide
thermal-shader-imaging	"THERMA — Thermal Imaging Bay" integration of the prompt's verbatim ThermalEffect (Apple-style three.js shader painting a pointer-reactive 7-stop thermal gradient inside a logo's alpha mask) dropped into @/components/ui, framed as thermographic hardware — bracketed viewports with a reticle, a live sensor-clock/FPS/core-temp telemetry HUD, the brief's logo × logo two-up plus a specimen tray, a palette/LUT calibration ramp and props API; logo masks are drawn on a canvas at runtime so it runs fully offline	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, three.js, Lucide
vitruvian-ascii-shader	shadcn/Tailwind v4/TS integration of the prompt's hero-ascii "PERFECT PROPORTIONS" hero, with its network-blocked UnicornStudio embed rebuilt as a self-contained HTML-canvas ASCII shader of Da Vinci's Vitruvian Man — bright limbs sweeping between the square and circle poses over a breathing frame, a faint pose-superposition, and a twinkling starfield, under the verbatim UIMIX chrome; JetBrains Mono vendored locally	React, TypeScript, Vite, Tailwind CSS v4, HTML Canvas, shadcn/ui
volumetric-beams-shader	"BEAMWORKS" optics-bench integration of the brief's verbatim volumetric-beams component — a full-screen Three.js + R3F single-scatter raymarch firing an angular star of light beams (Beer–Lambert transmittance, Henyey–Greenstein phase, depth twist, striation ribbing, film grain) dropped into @/components/ui and framed as a calibration bench: 18 grouped faders wired to every u* uniform, six named beacon presets (Searchlight = the brief's demo.tsx), and a live telemetry panel reading render rate / beam flux / spectral cast back off the canvas; the brief's demo.tsx is also rendered verbatim; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, @react-three/fiber, Lucide
warp-checks-background-lab	shadcn integration of the prompt's @paper-design/shaders-react <Warp shape="checks" /> dropped into components/ui (its malformed JSX fixed) and built into a polished, full-viewport animated checks-warp background — one <Warp> in a fixed inset-0 -z-10 layer behind glassy product UI, a live console of faders for every uniform (proportion, softness, distortion, swirl, swirlIterations, shapeScale, scale, rotation, speed), a shape selector and four mood presets, a live-vs-prompt props ledger, an in-page shadcn/Tailwind/TS setup write-up, and an rAF FPS/frame/uptime telemetry strip; boots on the prompt's exact four-colour config, fonts vendored locally	React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, Lucide
warp-dithering-shader	"DITHER LAB" integration of the verbatim DitheringShader WebGL2 component — seven procedural shape fields (warp, simplex, dots, wave, ripple, swirl, sphere) thresholded through random + Bayer 2×2/4×4/8×8 ordered dithering — dropped into shadcn components/ui and framed as a live 1-bit CRT console: a full-bleed Warp hero, a driving deck wired straight to the props/uniforms, a click-to-apply shape library, animated Bayer-matrix explainers, and a live props API mirroring the hero state	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide
warp-drive-shader-bridge	"WARP DRIVE" starship-bridge integration of the prompt's verbatim WebGL warp-tunnel shader (an orthographic full-screen quad of RGB-split light filaments steered by iMouse) dropped into @/components/ui — the signature NavReticle gauge locks to the tunnel's vanishing point and reads warp factor / heading / FPS off the shader's own onFrame loop, a docked helm console surfaces the raw iTime/iMouse/iResolution uniforms with a warpSpeed throttle, and the page tells the shadcn/Tailwind/TypeScript install story; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide
warp-shader-hero	shadcn-style integration of the prompt's verbatim @paper-design/shaders-react <Warp> hero dropped into components/ui, framed as the "Paper Warp // Shader Lab" — a brushed-graphite instrument deck where the same hero becomes a live specimen: a parameter bay of faders promotes every Warp uniform (swirl, distortion, scale, rotation…) to a live control, a shape selector and four mood presets re-work the field, an editable four-stop palette, and an FPS/frame/uptime telemetry strip; fonts vendored locally	React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, Lucide
waves-shader-oscilloscope	"OSCILLON" observation deck integrating the prompt's verbatim zero-prop ShaderComponent (a black-and-white Three.js coswarp interference field on a single full-screen quad) dropped into @/components/ui, framed as a phosphor signal analyzer — corner reticles, scanlines and an edge vignette over the live trace, a live-trace HUD plus a channel legend and a scope deck with a phase-lock meter, all driven off the same requestAnimationFrame clock the shader animates on; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn structure, three.js, Lucide
vhs-noise-distortion-hero	shadcn/Tailwind/TypeScript integration of the prompt's verbatim vhs-hero-section.tsx — a corrupted VHS hero on React Three Fiber: a custom six-octave fbm domain-warp GLSL shader (edge-growing chromatic aberration, a sweeping tracking-error band, glitch sparks, scanlines, film grain, vignette) over 800 cursor-repelling red/white/cyan noise particles, a GSAP GlitchText headline (character scramble + RGB text-shadow pulse), and an aggressive GSAP entrance + looping hue-jitter timeline; dressed as a tape deck with a running HH:MM:SS:FF timecode and CRT chrome; fonts vendored locally	React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, @react-three/fiber, GSAP, Lucide
webgl-flowing-gradient-shader	shadcn/Tailwind v4/TS integration of a raw-WebGL flowing-gradient fragment shader, framed as the "PRISMA Shader Lab" — a cursor-reactive fractal field with viewfinder chrome, a layers/glow/speed control rail, and a live FPS/time/resolution telemetry HUD	React, TypeScript, Vite, Tailwind CSS v4, WebGL, Lucide
webgl-rgb-shift-shader-hero	"CHROMA OSC" hero integrating the prompt's WebGLShader (a single RawShaderMaterial GLSL pass of additive sine ribbons with R/G/B chromatic-aberration) and LiquidButton, framed as a live oscilloscope instrument with corner brackets, an RGB-split headline, a sweeping scan line, and mono telemetry strips reading real FPS / shader uptime	React, TypeScript, Vite, Tailwind CSS, shadcn structure, three.js, CVA, Radix Slot, Lucide

Templates (250)

Project	Description	Stack
atelier-archive-quiet-luxury	"Atelier Archive" quiet-luxury architectural design system — a single cream-paper (#fdfbf9) magazine spread on Zodiak-style serif (Cormorant Garamond, weights 300/400 + italics) and General Sans-style grotesque (Hanken Grotesk), built inside a 1440px page with vertical neutral-200 border-grid; sticky three-column blur header, a 65/35 hero opening spread ("A Study in Quietude") with a Fig 1.0 label and animated 1px-underline CTA, an interactive Room Index whose serif titles go faint→black + roman→italic on hover, alternating 70/30 and 40/60 room sections with sticky product-detail cards (Ref. numbers, material/dimension specs, white-on-hover backgrounds), a four-column "Close Inspection" material grid with white-overlay slide-up reveals, and an archival four-column footer; 1.2s translateY fade-ins via IntersectionObserver, 2s cubic-bezier(.2,.8,.2,1) image scales; fonts and procedural grayscale architectural/material SVG imagery vendored locally, fully offline	HTML, CSS, vanilla JS, SVG, Cormorant Garamond, Hanken Grotesk
aurum-neural-ai-landing	"Aurum" neural-network luxury AI landing page built same-to-same from a reference — a gold-on-black (#0a0a0a base, #a78b71/#c9b8a0/#e8d5b7 gold spectrum) glassmorphic single page on Playfair Display Italic + Inter, with a 32px radial dot grid, a breathing live-status pill, a 16:9 hero "Aurum Core" node ringed by four grayscale-to-color satellite media cards wired in by animated pulsing-branch + dashed-flow SVG bezier curves that redraw on pointer parallax, a 4-up glass features grid, a 3-tier pricing block with a highlighted Pro card and monthly/annual switch, a 2-up grayscale-to-color studio section, and a 5-column footer with a Join Digest field — all reveal-up on IntersectionObserver; fonts vendored and gold/black procedural SVG imagery generated locally, fully offline	HTML, CSS, vanilla JS, SVG, Playfair Display, Inter
browser-core-devtools-template	"Browser-Core Modernism" — a high-density technical landing page that simulates an entire DevTools browser workspace, reproduced from a superdesign reference (live link unreachable, spec-derived). The whole page sits inside a simulated browser chrome (macOS traffic lights, active tab, back/forward/reload icons, a monospace URL pill, a cyan-tinted #06B6D41A extension button) on a #f3f4f6 base with a 20px pattern-grid and 10px #d1d5db custom scrollbars, Inter + JetBrains Mono, and a sharp #06B6D4 accent. Sections: a split-pane hero with a 72px/0.9 headline, a pulse-animated "v2.0 Released" tag and a Chrome-Store CTA beside a simulated UI window where a CSS cursor-demo loops ease-in-out between three cards while a dark #111827 inspector tooltip reveals CSS props in cyan mono; a 300px/1fr changelog with cyan "+" bullets; a three-panel IDE workspace (256px explorer with kbd-boxed shortcuts, a pattern-grid stage holding a 2px-cyan selection box with a div.card tag and 1200×400 dimension labels, a 320px property inspector with an 80px/1fr label-value grid, dropdowns, toggle buttons, color swatches/hex and drag-to-resize size inputs); a dark #0d1117 GitHub-README manifesto with an install code block; and a native <details> technical FAQ — 0.4s IntersectionObserver slide-ups throughout; fonts vendored locally, fully offline	HTML, CSS, vanilla JS, SVG, Inter, JetBrains Mono
clinical-luxury-conversion	"LUMIÈRE" high-conversion 'Clinical Luxury' skincare landing page rebuilt from a superdesign reference — an Earth-and-Stone palette (#FDFCF8 base, #1C1C1C charcoal, #E2E8E4 sage, #D4AF37 muted gold, #DC2626 urgency red) with vendored Space Grotesk + Newsreader-italic + Inter + JetBrains Mono, a #D8E6D8 promo bar with a slow-pulsing "Almost Gone" red tag, a backdrop-blur(12px) sticky nav with gold underline links, a 32px-rounded full-bleed hero mixing bold-sans + italic-serif type over glassmorphism trust badges, a grayscale-to-color "Trusted by" wordmark row, a dark 4-stat strip with gold metrics and 10%-white dividers, white→#F5F5F0 benefit cards with 110%-scaling pastel icon tiles, a 50/50 product spotlight with a #E8E6E1 square holding a floating deep-shadow bottle and a strikethrough price, a 30px-rounded check-vs-X comparison table with a highlighted "LUMIÈRE" column, a verified-buyer social-proof grid, a sage final-CTA with a live monospace countdown and shield-check button, and a fixed mobile sticky cart (95%-white blur, "Selling Fast" tag, full-width Add to Cart) — IntersectionObserver reveals and pulse/float keyframes throughout; fonts + procedural SVG imagery vendored, fully offline	HTML, CSS, vanilla JS, Space Grotesk, Newsreader, Inter, JetBrains Mono
cyber-serif-template	"Cyber Serif" classical-tech template built same-to-same from a superdesign reference (live host blocked by egress, so grounded in the detailed prose spec) — a deep-black #050505 / emerald #10b981 / #EBEBEB system pairing vendored Newsreader serif display (300-weight, -0.04em tracking, leading 0.9, one italic emerald word), Inter body, and Space Grotesk 10px/0.2em uppercase technical labels, with glassmorphism (rgba white 2% + 12px blur), a fixed nav that blurs on scroll with a 360deg-rotating command-icon logo mark and 1px emerald expanding-underline links plus a pulse-glow CTA pill, a 100vh split hero with an emerald pulse-dot label and a parallax floating glass mockup (animated bar chart, latency/uptime metric cards), a 3-column spotlight-card feature grid where each card has a moving shimmer border (::after 3-color emerald gradient at 200% animating 4s) and a cursor-tracking radial spotlight (::before 600px circle following --mx/--my), an IntersectionObserver count-up benchmark table with pulsing check icons and alternating muted/emerald columns, an animated horizontal gradient-text CTA, and morphing blurred emerald background glows (8s border-radius morph) — all staggered reveal-up on cubic-bezier(0.16,1,0.3,1); fonts vendored locally, fully offline	Static HTML/CSS/JS, Newsreader, Inter, Space Grotesk
disruptor-brutalist-template	"Disruptor" neo-brutalist style-guide template recreated from a superdesign reference — a strictly limited Volt-green (#CCFF00) / black (#000) / dark-grey (#121212) / white industrial system on vendored Ranchers (up-to-180px all-caps headlines, leading 0.85, 8px solid text-shadow) + Space Mono technical labels + Plus Jakarta Sans body + Archivo numerals, with only hard 4px/8px black borders and solid 8px offset "neo-shadows" (no blur, no gradients), brutalist press-into-shadow buttons, tilted sticker badges, a fused white-input/black-button email form, a rotated-sticker social-proof bar, a split black-old-way vs volt-better-way comparison grid, white process-blueprint cards with white neo-shadows + 3%-opacity Ranchers watermark numerals + rotated volt STEP tags, a fixed 200px right-edge multi-strip vertical-rl blueprint sidebar, a live Archivo countdown timer, IntersectionObserver reveals, and infinite CSS marquees; fonts vendored, all imagery inline SVG, fully offline	Static HTML/CSS/JS, Ranchers, Space Mono, Plus Jakarta Sans, Archivo
editorial-naturalism-design-system	"Studio/Nord" high-contrast dark-mode editorial design system blending Digital Naturalism with brutalist technicality — a stone-black #0C0A09 base with an acid-lime #D4F268 accent, warm-charcoal surfaces, a fixed 4% fractal-noise overlay in overlay-blend, vendored Newsreader (200/300/400 + italic) serif display + Instrument Sans UI type, a glass pill nav that blurs on scroll, a 5:7 hero with an italic lime accent word and a 10rem rounded-top arch image carrying a 6deg floating lime sticky-note and a frosted Fig. No catalog label, a radial-gradient serrated postage-stamp section divider, a folder-tab bento panel (rotated -2/-1deg tabs, active tab lime + scaled, 40px 3% grid) that swaps content on click, a 3:4 grayscale-to-color showcase grid with one Y-offset card, a rotate(2deg) to 0 lime sticky-note CTA, and a giant Newsreader footer wordmark; IntersectionObserver reveal-up motion on cubic-bezier(.4,0,.2,1), fonts + procedural abstract imagery vendored locally, fully offline	HTML, CSS, vanilla JS, Newsreader, Instrument Sans
emerald-glass-system	"Obsidian" glassmorphism design-system showcase — a monochrome black/zinc page with vibrant emerald (#34D399) highlights, vendored Inter, a floating blur(20px) glass pill nav, a 92vh dark hero with a 22vw CREATE backdrop word and a vertical stack of glass stat cards, a light feature grid with a dark System Analysis card animating progress bars, a #18181B workflow block with numbered glass steps and a 3D-rotated code mockup with a bouncing Deployed tag, a 3-tier bento pricing grid, and a black editorial footer; grain overlays on every dark surface, reveal-on-scroll motion, fully offline	HTML, CSS, vanilla JS, Inter
enterprise-admin-saas-landing	"Sentra" corporate-professional enterprise admin / security SaaS landing page built same-to-same from a superdesign reference — a strict 40px-grid white/slate layout in vendored Satoshi with a #2563eb primary, a fixed 64px glass nav (rgba white + 12px backdrop blur), a 72px hero over a radial-masked 40px grid with a pulsing-green SOC2 status pill and dual CTAs, a simulated browser window with a 256px sidebar dashboard (system-status header, 3-up stat cards, sticky-header audit-log table with colored status badges and blue hover rows), a 6-card module grid that lifts to white-with-shadow on hover, a dark #020617 stats band with concentric-ring decor and IntersectionObserver count-up KPIs (ease-out-quartic, 2 decimals for percentages), a split security section with cert checklist and clickable glass-morphism policy toggles plus an overlapping slate-800 "Threat blocked" card, a chevron accordion FAQ, a dark rounded CTA panel, and a 6-column footer with a pulsing system-status dot — all fadeInUp on scroll; Satoshi vendored locally, fully offline	HTML, CSS, vanilla JS, Satoshi
flux-editorial-saas-landing	Pixel-faithful high-contrast editorial B2C SaaS landing page for "Flux" rebuilt same-to-same from a superdesign reference — brutalist-lite aesthetic with massive Anton display type, Satoshi body, a #FFE17C golden-yellow accent over white/charcoal, a 40px grid background, a 15-degree rotated yellow highlight bar behind the hero keyword, an abstract browser-UI mockup with a properties panel, a charcoal/dark-gray problem-vs-solution split, a bento feature grid with animated pulse blocks + code snippet + avatar stack, a sticky 1:2 how-it-works flow with giant numerals, alternating light/dark testimonial cards, and a yellow final CTA with a 26vw ghost wordmark; Anton + Satoshi vendored locally, fully offline	HTML, CSS, vanilla JS, Anton, Satoshi
forest-sage-organic-store	"Verde" earthy editorial organic-grocery storefront template — a high-contrast Forest (#01472e) / Sage (#ccd5ae) / Olive / Cream "Forest and Sage" palette, vendored Anton + Inter, a fixed blur-pill nav with a white cart badge, a 23vw ANTON hero with per-letter rise-reveal and three floating organic SVG produce cards (3rem radius, float + scroll parallax), a forest marquee strip, a 5rem-rounded olive shop section with a 15vw heading, a rotating circular CTA, and a 3-column product grid with image-scale hover + blur-reveal "Quick Add" overlays, an editorial story band, and a 12-column forest footer with an underline-only newsletter input — all reveal-up on IntersectionObserver with a (0.16,1,0.3,1) motion signature and a fixed 4% SVG noise overlay; fully offline	HTML, CSS, vanilla JS, Anton, Inter
gen-z-neobrutalist-landing	"flok" expressive Gen-Z neo-brutalist app landing page built same-to-same from a superdesign reference — a saturated tri-color system (Acid #ccff00 / Electric Purple #7000ff / Hot Pink #ff0099 / #0a0a0a ink) on Space Grotesk + DM Sans (vendored), a fully-rounded white blur nav pill with hard 6px black shadow, an acid-green hero with two blur(70px) decorative blobs, a purple→pink gradient headline, dual brutalist-shadow CTAs and a 3°-tilted brutalist phone mockup (8px frame, 3rem radius, tilted feed posts + acid action tab) ringed by five independently floating emoji stickers, a -2° rotated black/white-bordered scrolling marquee, a 12-column 7/5/12-span bento grid (gray card with a giant 📍 popping out, black neon card, full-width pink card with an animated bar-chart mini-dashboard) with ±1.5° card rotations, a 3-up rotated testimonial grid, a one-open-at-a-time brutalist FAQ accordion (icon rotates 45°), a hot-pink giant CTA with 20%-opacity 💣/🦄 stickers, and a white footer with a 30vw 5%-opacity "flok" ghost wordmark; signature cubic-bezier(0.175,0.885,0.32,1.275) bounce on every hover, float/wobble/pop-in keyframes, IntersectionObserver reveals, fully offline	HTML, CSS, vanilla JS, Space Grotesk, DM Sans
heavyweight-brutalist-store	"HEAVYWEIGHT®" industrial brutalist gear-store template rebuilt same-to-same from a reference — a Concrete (#f2f2f2) / Ink (#0a0a0a) palette with a single red (#dc2626) accent for live status, vendored Anton + Space Grotesk, a persistent 4%-opacity animated fractalNoise grain overlay, a mix-blend-difference fixed header with an Est. 2024 — NYC sub-label and a right-shifted vertical nav, a 64px floating white cart button with a red count badge that pulses on add, an asymmetric 100vh hero (42% low-set text-9xl HEAVY/DUTY/GEAR headline + 65% off-cropped grayscale image with a -90deg "Collection 004" label), a snap-x drag-scroll Essentials strip of 3:4 cards with hover-fade secondary images and detail badges, a sticky-left 12-column Construction info grid with border-l-2 architecture specs and 4:5/1:1 macro images, a broken/staggered 12-column Live Inventory grid with strike-through out-of-stock sizes and a JS live-stock ticker, a rotated 3-column masonry social-proof wall, and a deep-ink 6-column footer under a 10vw ghost HEAVY wordmark — grayscale-to-color hover, line-through link hovers, and IntersectionObserver reveals throughout; fonts + procedural imagery vendored, fully offline	HTML, CSS, vanilla JS, Anton, Space Grotesk
kinetic-orange-brutalist-agency	"Superdesign®" digital-brutalist agency landing page rebuilt same-to-same from a reference — strict electric-orange/black/white palette, vendored Archivo Black + Space Mono + Inter, a floating black pill nav, a 16vw SUPER/DESIGN typographic hero, a 12s rotating SVG scroll indicator, a skewed dual-row marquee band, a vertical hover-driven service list with rotating arrows, and a 14vw LET'S TALK CTA	HTML, CSS, vanilla JS
lumina-neobrutalist-saas-landing	Pixel-faithful neo-brutalist SaaS landing page for "Lumina" with hard-offset black shadows, Cabinet Grotesk + Satoshi type, a browser-mockup dashboard, an infinite brand marquee, and press-down push buttons	HTML, CSS, vanilla JS, Cabinet Grotesk, Satoshi
lumina-portfolio-template	Premium editorial portfolio template rebuilt same-to-same from a superdesign reference — a navy #171e19 / sage #b7c6c2 design system with cyan/taupe/charcoal supports, vendored Anton + Plus Jakarta Sans, a mix-blend-difference fixed nav, an 18vw Anton hero with a sage text-outline second line and floating 120px-blur ambient orbs, a white asymmetric 2-column masonry "Selected Works" grid with 96px hover-reveal "View" discs and image scale-1.1, a navy featured section with a cyan -48px offset square behind a grayscale image, a #fafafa 12-column capabilities list with hover-extending line prefixes, a charcoal testimonial carousel with a 30rem ghost quote mark, and a navy "Let's Create" footer; IntersectionObserver reveals, cubic-bezier(0.16,1,0.3,1) easing, fonts + procedural SVG imagery vendored, fully offline	HTML, CSS, vanilla JS, Anton, Plus Jakarta Sans
midnight-editorial-template	"Midnight" dark brutalist-editorial fashion-studio template — high-contrast white-on-#050505 with a #0a0a0a footer, vendored Bricolage Grotesque (Clash Display stand-in) + Inter, orange/blue blur(120px) mix-blend-screen light leaks, a mix-blend-mode:difference fixed nav with a hover-fill contact pill, a 15vw FORM/MATTER hero overlapping a 4:5 grayscale portrait, a 4-up bordered stats grid with staggered reveals, two 12-column sticky-numeral narrative blocks with translate-on-hover Explore arrows, a 21:9 rAF parallax gallery, a two-up 4:3 hover gallery with fading black overlays and rise-up captions, and a footer with a giant clipped ghost wordmark + massive email CTA — all reveal-up on IntersectionObserver with a (0.22,1,0.36,1) easing; fonts and grayscale editorial imagery vendored locally, fully offline	HTML, CSS, vanilla JS, Bricolage Grotesque, Inter
neon-velocity-style-guide	"Neon Velocity" brutalist × futuristic-glass style guide rebuilt same-to-same from a superdesign reference — a #050505 base with a #BFFF00 neon-lime accent, vendored Plus Jakarta Sans 800 / Geist Mono / Inter, a fixed 3% SVG fractal-noise overlay and blurred lime refraction glows, a hero anchored by a perspective(1000px) rotateX(15deg) 3D glass card behind a sharp 12px white border-box headline with a tabular-nums DD:HH:MM:SS countdown, a 3-up Luminosity Card bento grid (mouse-proximity lime spotlight, 2rem radius, 450px min-height), a neon avatar stack + blurred pill email form with a sweeping-light Laser Button, and a fixed 48px-target mobile bottom-nav pill; fully offline	HTML, CSS, vanilla JS, Plus Jakarta Sans, Geist Mono
obsidian-elite-template	"Modern Obsidian" monochrome editorial template — a strict #080808-to-#FFFFFF palette with a 135deg silver gradient, an SVG fractal-noise overlay at 0.05 opacity, fluid 92vw layouts, vendored DM Serif Display (italic) + Geist Mono + Inter, a glass-pill nav with bordered links + white Join button, a frosted-glass hero (4rem radius) with an italic silver-gradient "the obsessed." headline and a 3-column monospace metadata bar, an editorial serif HH/MM/SS countdown with slash separators, a frosted-glass beta-capture form with a silver-btn and a "#0x" position success state, a mono stats/urgency row, a 4-up bento grid (hover-lit borders) including a 2x2 grayscale member-registry card, a centered value-prop statement, a 2-col border-left testimonial grid, a massive serif CTA, and a pill-shaped floating mobile bottom nav that reveals after the hero; cubic-bezier(0.16,1,0.3,1) slide-up reveals throughout, fully offline	HTML, CSS, vanilla JS, DM Serif Display, Geist Mono, Inter
organic-intelligence-wave	"Organic Intelligence" editorial-tech wave template rebuilt same-to-same from a superdesign reference — a warm cream #fcfbf9 / charcoal #171717 / indigo #4338ca palette on vendored Playfair Display (italic emphasis) + Inter + JetBrains Mono, a mix-blend-difference fixed header with a pulsing "System Online" pill, a 100vh hero with a 30s drifting indigo/purple blur-mesh and a giant serif "Design with intelligence" headline, a signature