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 (403)

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

…view the full README on GitHub.