# claude-directory — AI-generated UI experiments built with Claude **An open-source gallery of web UI experiments generated with [Claude](https://claude.com/) (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](https://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](./hero-sections/) · [Landing pages](./landing-pages/) · [Shaders](./shaders/) · [UI design systems](./ui-design/) · [Components & UI](./components-ui/) · [Portfolios](./portfolios/) · [Animations & loaders](./animations-loaders/) · [3D & games](./3d-games/) · [Templates](./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](https://gist.github.com/cnemri/c917e11b3a6936823b509dcff53392aa), [motionsites.ai](https://motionsites.ai/), [lafys.com](https://lafys.com/), [designprompts.dev](https://www.designprompts.dev/), [21st.dev](https://21st.dev), [superdesign.dev](https://superdesign.dev/), and [landinghero.ai](https://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`](./posters.json) manifest — see [`scripts/generate-posters`](./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//`).

Hero sections (41)

| Project | Description | Stack | |---------|-------------|-------| | [aethera-cinematic-hero](./hero-sections/aethera-cinematic-hero/) | Cinematic hero for Aethera with video-driven visual treatment and headless verification | React, TypeScript, Vite, Tailwind CSS | | [ai-builder-dark-hero](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/cinematic-stream-hero/) | LUMIERE full-viewport streaming hero with looping cinematic background video | React, TypeScript, Vite, Tailwind CSS | | [codenest-hero](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/noctis-cinematic-hero/) | NOCTIS full-screen dark cinematic hero with video background, nav, and timecode details | React, TypeScript, Vite, CSS | | [particle-hero](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/rivr-defi-hero/) | DeFi dashboard hero for RIVR with glassmorphism, badge/cards, and verification script | React, TypeScript, Vite, Tailwind CSS | | [securify-data-hero](./hero-sections/securify-data-hero/) | Full-screen hero section for a fictional data-security SaaS called securify | React, TypeScript, Vite, Tailwind CSS | | [sentinel-ai-hero](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/toonhub-figurine-carousel/) | TOONHUB full-viewport character figurine carousel hero | React, TypeScript, Vite, Tailwind CSS, Lucide | | [transform-data-hero](./hero-sections/transform-data-hero/) | Modern hero with a looping video background and a custom requestAnimationFrame fade system | React, TypeScript, Vite, Tailwind CSS | | [vanguard-hero-landing](./hero-sections/vanguard-hero-landing/) | Fullscreen hero landing page for the creative agency VANGUARD with looping background video | React, TypeScript, Vite, Tailwind CSS | | [vaultshield-hero](./hero-sections/vaultshield-hero/) | VaultShield hero experiment with security-product positioning and CLI/headless verification | React, TypeScript, Vite, Tailwind CSS | | [velorah-hero-landing](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./hero-sections/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/asme-liquid-glass-landing/) | Dark cinematic Asme single-page landing site with liquid-glass UI details | React, TypeScript, Vite, Tailwind CSS | | [astral-veil-h6](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/mentality-landing/) | MENTALITY landing page with video hero, glassmorphic navbar, and animated mobile drawer | React, TypeScript, Vite, Tailwind CSS, Motion | | [meridian-grid-systems-h81](./landing-pages/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](./landing-pages/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](./landing-pages/mindloop-mono-landing/) | Pure-black monochrome newsletter/content landing page for Mindloop | React, TypeScript, Vite, Tailwind CSS, shadcn-style UI | | [monolith-grid-atelier-h59](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./landing-pages/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](./animations-loaders/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](./animations-loaders/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](./animations-loaders/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](./animations-loaders/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](./animations-loaders/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](./animations-loaders/linkflow-boomerang-hero/) | Linkflow hero concept with boomerang-style visual direction and CSS-only animations | React, TypeScript, Vite, Tailwind CSS, Lucide | | [mainframe-scrub-hero](./animations-loaders/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](./animations-loaders/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](./animations-loaders/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](./animations-loaders/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](./animations-loaders/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](./animations-loaders/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](./3d-games/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](./3d-games/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](./portfolios/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](./portfolios/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](./portfolios/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](./portfolios/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](./portfolios/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](./portfolios/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](./portfolios/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](./portfolios/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](./portfolios/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](./portfolios/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](./portfolios/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](./portfolios/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](./portfolios/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](./portfolios/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](./components-ui/animated-dots-rain/) | shadcn/ui integration of the verbatim `AnimatedDots` component — a raw-`

UI design (34)

| Project | Description | Stack | |---------|-------------|-------| | [academia-classical-showcase](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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](./ui-design/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 `` 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](./ui-design/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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 `` stays byte-for-byte original, fonts vendored locally | React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide | | [moving-circles-shader](./shaders/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 `` stays verbatim, fonts vendored locally | React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, @react-three/fiber, Lucide | | [novatrix-gradient-mesh](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./shaders/warp-checks-background-lab/) | shadcn integration of the prompt's `@paper-design/shaders-react` `` dropped into `components/ui` (its malformed JSX fixed) and built into a polished, full-viewport animated checks-warp background — one `` 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](./shaders/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](./shaders/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](./shaders/warp-shader-hero/) | shadcn-style integration of the prompt's verbatim `@paper-design/shaders-react` `` 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](./shaders/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](./shaders/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](./shaders/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](./shaders/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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](./templates/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 concave wave-curve bridge (120% width, border-radius 50% 50% 0 0) carrying a 3s-pulsing "Initialize" button, a staggered 2-column 4:3 work grid with scale(1.1) orb cards that lift on hover and reveal a View pill over scroll-drawn 1px lines, a sticky-split fluid Core Capabilities accordion with monospace [bracket] tags, and a dark 5rem-radius footer with a top-center radial indigo glow; cubic-bezier(0.22,1,0.36,1) easing throughout, fully self-contained offline | HTML, CSS, vanilla JS, Playfair Display, Inter, JetBrains Mono | | [premium/aceternity/agenforce-marketing-template](./templates/premium/aceternity/agenforce-marketing-template/) | Pixel-faithful clone of the Aceternity UI Pro "Agenforce" AI agent marketing template — a 4-page site (home, pricing, login, signup) on a clean white (#fff) palette with near-black (#0a0a0a) type, Manrope display headings and Inter body text; CSS 3D perspective transforms for layered hero dashboard screenshots and tilted feature cards, a `@keyframes orbit` animation revolving Slack/Meta/Instagram/Sheets brand icons around a central hub using per-icon CSS custom properties, `mask-image` gradients fading screenshots into the background, IntersectionObserver scroll-triggered logo fade-ins with blur, a typewriter character-by-character effect on the activity log, an FAQ accordion with `max-height` transitions, and a mobile sidebar drawer; two-tier pricing ($10/$60), role-based access avatar grids, a guardrail engine tag cloud, and a perspective-grid footer; all fonts and images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Manrope, Inter | | [premium/aceternity/agenlabs-agency-template](./templates/premium/aceternity/agenlabs-agency-template/) | Pixel-faithful clone of the Aceternity UI "Agenlabs Agency" template — a 5-page minimal agency website (home, work, packages, templates, blog) on a clean white palette with zinc/slate color tokens and purple-to-pink gradient text accents; a sticky nav with gradient-border Contact pill, hero with lightning-bolt SVG logo and gradient headline, animated glow CTA button, dual testimonial sections with circular avatars on grid backgrounds, 4-project portfolio showcase, 6-card services grid with mouse-tracking radial-gradient hover reveal, dark slate-800 CTA block, pricing page, templates page with tech tags, and 3-column blog grid; assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter | | [premium/aceternity/ai-saas-template](./templates/premium/aceternity/ai-saas-template/) | Pixel-faithful clone of Aceternity UI's "Every AI" AI SaaS Template — a 6-page multi-page marketing site for a fictional AI platform on a clean white/black dual-theme palette with Geist Sans typography; an animated column-beam grid hero, company logo strip, dual feature cards with chat UI mockups, an LLM timeline panel, an infinite tech-stack marquee, a 4-column developer feature grid, masonry testimonials, a join-waitlist CTA with giant gradient text, a 4-tier pricing table with monthly/yearly toggle and comparison matrix, a blog listing, a contact form, and auth pages (login/signup); full light/dark theme via CSS custom properties persisted in localStorage with a no-flash boot script, scroll-reactive navbar, mobile hamburger menu; Geist fonts and all assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist | | [cryptgen-marketing-aceternity](./templates/premium/aceternity/cryptgen-marketing-aceternity/) | Pixel-faithful clone of the Aceternity UI CryptGen Marketing template — a dark-themed, single-page crypto and fintech marketing website with a floating glassmorphic navbar with backdrop blur, an animated hero section, a bento-grid features layout with rotating icon orbit animation and conic-gradient glow borders, a social proof logo strip, testimonial cards, a three-tier pricing table, an FAQ accordion, and a multi-column footer; mobile menu, FAQ accordion, scroll-triggered fade-up animations via IntersectionObserver, smooth anchor scrolling, and a scroll-aware navbar in plain vanilla JavaScript; CSS custom properties (design tokens) and the vendored Inter font | HTML, CSS, vanilla JS, Inter | | [devpro-portfolio-template](./templates/premium/aceternity/devpro-portfolio-template/) | Pixel-faithful clone of Aceternity's "DevPro Portfolio Template" — a 6-page dark developer portfolio (home, about, projects, contributions, blogs, events) on a zinc-900 (#18181b) background with a cyan-500 (#06b6d4) accent and Inter typography; an inline pill navbar with avatar + "Tyler Durden" + nav links + gradient "Download CV" button, and a hamburger menu for mobile; a hero with large headline and cyan-highlighted phrase, a JS tab-switcher work experience section (Apple/Google/Microsoft/Netflix), a 3-col responsive project card grid (Algochurn, Aceternity, Tailwind Master Kit, Box Shadows, PlaceholderTech), a 9-card GitHub contributions grid with fork/star counts and a "Show More" toggle, a blog entry list, a timeline about page (2018–2023), and an events/talks page with YouTube thumbnails; scroll-to-top fixed button, all assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter | | [foxtrot-marketing-template](./templates/premium/aceternity/foxtrot-marketing-template/) | A pixel-faithful, self-contained clone of the Foxtrot SaaS Marketing Template by Aceternity UI — a clean, modern marketing site for a SaaS analytics product featuring a dark pill navbar, teal primary accent color (#00ABB3), grid pattern hero background, masonry testimonials, a three-tier pricing section, and a dark CTA banner; plain HTML, CSS custom properties, and vanilla JavaScript, no build step required, fully offline-capable | HTML, CSS, vanilla JS | | [premium/aceternity/minimalist-portfolio-template](./templates/premium/aceternity/minimalist-portfolio-template/) | Pixel-faithful clone of the Aceternity "Minimalist Portfolio Template" by Manu Arora — a 4-page developer portfolio (home, tweets masonry grid, inspiration curated list, blog with live search) on a warm stone (#fafaf9) canvas with Schibsted Grotesk typography, repeating-dot SVG underlines on nav links and inline links, colored gradient icon tiles for "Things I do" / "Companies" / "Work with me" sections, a settings-gear theme toggle (light/dark/system via localStorage, prefers-color-scheme, no-flash boot), client-side blog title search, and a static masonry column tweet grid; all colors driven through CSS custom properties for full light/dark mode support, assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Schibsted Grotesk | | [nodus-agent-template](./templates/premium/aceternity/nodus-agent-template/) | Pixel-faithful clone of the Aceternity "Nodus Agent" (Notus) AI agentic-workflow marketing template — a multi-page site (long home, pricing, about, careers, blog + 7 articles, contact, sign-up, sign-in, 3 legal routes) on a clean white/near-black neutral palette with a coral (#f17463) accent, Inter + DM Mono; a centered sticky nav with a localStorage-persisted light/dark theme toggle and no-flash boot, full light AND dark themes driven by CSS custom properties, dotted-grid decorative panels, connected-tools/native-integration diagrams, a Monthly/Yearly pricing toggle with a full comparison table, an accordion FAQ, testimonial + security bands, and a shared header/footer + "Connect your Current Stack" CTA; IntersectionObserver scroll reveals and vanilla-JS interactions, every logo/photo/illustration/dashboard image vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter, DM Mono | | [playful-marketing-aceternity](./templates/premium/aceternity/playful-marketing-aceternity/) | Pixel-faithful clone of the Aceternity UI "Playful Marketing" template — a modern, five-page SaaS/marketing website aimed at interview recording and feedback management products, pairing a clean white background with a teal-green brand color (#25A18E), a subtle dot-grid background pattern, generously rounded sections (35px border radius), and teal gradient CTAs; vanilla HTML, CSS, and JavaScript, no framework, no build step, all assets vendored locally | HTML, CSS, vanilla JS | | [premium/nextjstemplates/ai-tool](./templates/premium/nextjstemplates/ai-tool/) | Pixel-faithful clone of the "AI Tool" Next.js Templates SaaS landing page — an 18-page site (home, about, pricing, blog listing + 3 posts, docs, an AI-examples gallery + 6 interactive tool pages, sign-in, sign-up, error) on a deep-navy (`rgb(3, 0, 20)`) background with a vivid purple (`#8646f4`) accent and Plus Jakarta Sans type (weights 200–800), featuring a card hover glow that tracks the cursor via `--mouse-x`/`--mouse-y` CSS custom properties, an infinite horizontal testimonial marquee, a sticky glass-blur header, and IntersectionObserver scroll-triggered fade-ins; no build step, fully offline | HTML, CSS, vanilla JS, Plus Jakarta Sans | | [premium/nextjstemplates/doggystickers](./templates/premium/nextjstemplates/doggystickers/) | Pixel-faithful clone of the Doggy Stickers Next.js e-commerce demo store by Bilal Tahir — a 13-page cartoon-sticker shop (catalog home, 11 product-detail pages sharing one template, cart page) with full light/dark theme support (header sun/moon toggle, localStorage-persisted, prefers-color-scheme-aware, no-flash boot script) on the Tailwind v2 "violet" palette (#5B21B6 primary, #4C1D95 hover, #DDD6FE light, #F5F3FF lighter, white/#111118 page background) and Josefin Sans headings over system-font body text; the home page renders an 11-card product grid (notched "$9.99" price-flag pills) client-side from a JS product-data array, each product page has a hero image with a thumbnail strip and left/right arrow navigation plus qty and size selectors and an "Add to cart" button, and the cart page has a quantity-stepper table with per-row remove and a "Check out →" CTA, all backed by a localStorage cart (add/update/remove/badge count) standing in for the original's private Shopify checkout; fonts and product photography vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Josefin Sans | | [premium/nextjstemplates/gostartup](./templates/premium/nextjstemplates/gostartup/) | Pixel-faithful clone of the NextJSTemplates "GoStartup" Next.js business boilerplate — a 19-page dark-mode-first SaaS marketing site (deep navy-black #0A0A0A background, #4A6CF7 indigo/blue accent, Inter body + Lexend headings) with a full light/dark theme toggle (data-theme attribute, localStorage-persisted, no-flash on load) shared across a sticky header (logo, nav, hover Pages dropdown, Sign In/Sign Up buttons, search icon, sun/moon toggle, hamburger menu) and a 4-column footer; the one-page home reproduces a hero with team photo, a 2x3 integrations icon grid, an About tab switcher (About Us/Our Mission/Our Vision), 3-up team cards with hover social icons, a filterable (All/brand/ecommerce) portfolio grid, a custom vanilla-JS testimonial carousel with pagination dots, a trusted-brands logo row, 3-tier pricing cards, a blog preview row, and a full contact form, plus a blog section (index + 6 post-detail articles with cover banners and prose bodies + a tag-filter page), a docs section (index + 5 sub-pages with sidebar nav), a support/contact page, sign-in/sign-up auth pages, and a 404 page; scroll-triggered fade+slide-up entrance reveals are driven by IntersectionObserver, all Inter/Lexend woff2 fonts and imagery vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter, Lexend | | [premium/nextjstemplates/landing-template-nextui](./templates/premium/nextjstemplates/landing-template-nextui/) | Pixel-faithful clone of the open-source "landing-template-nextui" SaaS/product landing page (Next.js + NextUI/HeroUI) — a single long-scroll page with a sticky navbar (logo, in-page anchor nav, a "Features" mega-menu dropdown with 5 icon+title+description items, Login, blue "Start Free Trial" pill, GitHub icon, light/dark theme toggle switch) collapsing on mobile into a full-screen overlay menu; the page reproduces a hero with email-capture form and browser-chrome mockup screenshot, a "trusted by" logo cloud, three alternating feature sections (icon-list+illustration, illustration+icon-list, 2x2 card grid), a testimonials stack of 3 quote cards, a stats strip, a 4-tier pricing grid (Free/Premium-highlighted/Startup/Enterprise), a static FAQ list, a final CTA band, and a multi-column footer; NextUI default theme tokens drive the palette (#0072F5 primary blue, #005FCC hover, #17C964 success green, white/black light-dark backgrounds) via CSS custom properties with localStorage persistence and a no-flash boot script honoring prefers-color-scheme, pill-shaped 9999px radii on buttons/inputs/switch, and press states (opacity 0.7, scale 0.97) on the dropdown trigger; Inter (vendored woff2) throughout, illustration extracted as a vendored local SVG, no build step, fully offline | HTML, CSS, vanilla JS, Inter | | [premium/nextjstemplates/next-saas-starter](./templates/premium/nextjstemplates/next-saas-starter/) | Pixel-faithful clone of the official Vercel/Next.js "SaaS Starter" marketing template (branded "Logoipsum"/"My SaaS Startup") — a 15-page marketing site (home, features, pricing, contact, blog index, 6 blog articles, privacy/cookies legal pages sharing one layout, a themed 404 that every footer placeholder link points to, and a byte-for-byte identical `sign-up.html` mirroring it since the source has no real sign-up route) on Poppins, with CSS-custom-property theme tokens (`--primary: 22,115,255` brand blue, `--secondary: 10,18,30` always-dark navy for hero/CTA/footer bands) swapped via `body.next-light-theme`/`body.next-dark-theme` and a no-flash boot script reading `localStorage.nextColorMode`; shared sticky header with a mobile slide-in drawer (cubic-bezier(0.82,0.085,0.395,0.895) easing) and a dark-navy footer CTA band with a curved SVG wave divider appear on every page, while page-specific interactions include a single-open FAQ accordion with animated height/chevron rotation on Pricing, a prev/next-and-dots testimonial carousel on Home, a 3×3 icon-card grid repeated on Home and Features, and a click-to-load YouTube facade (thumbnail swaps to a real autoplaying iframe) on Features; all fonts, illustrations, and images vendored locally, no build step, fully offline aside from the optional YouTube embed | HTML, CSS, vanilla JS, Poppins | | [premium/nextjstemplates/next-startd](./templates/premium/nextjstemplates/next-startd/) | Pixel-faithful clone of the STARTD Next.js SaaS/startup landing page template by jkytoela — a single-page site on Inter (vendored variable woff2) with a white canvas, indigo `#4f46e5` primary accent, and soft gray gradient panels, covering nav with mobile hamburger, a hero with SVG illustration and "watch the video" play button overlay, a logo strip, a numbered 3-step "Transform Your Business" list, a 6-card bordered feature grid, a dark navy `#111827` case-studies band with an animated canvas particle-dot field (~400 drifting/pulsing dots), a 2-item testimonial carousel with prev/next arrows disabled at the ends, a pricing/CTA panel ($99/mo), and a footer newsletter form; adds a light/dark theme toggle (not in the original) that swaps CSS custom properties and persists via localStorage, no build step, fully offline | HTML, CSS, vanilla JS, Inter | | [premium/nextjstemplates/nextadmin](./templates/premium/nextjstemplates/nextadmin/) | Pixel-faithful clone of the NextAdmin Next.js admin dashboard kit — a 51-page application (eCommerce/Analytics/Marketing/CRM/Stocks dashboards, Calendar, Profile, Manage Team, Tasks List/Kanban, 4 form variants, 3 table variants, a 7-page Pages group, Messages/Inbox/Invoice, 2 charts pages, an 18-page UI-elements showcase, Coming Soon/Under Maintenance, and Sign In/Sign Up) sharing a sticky accordion sidebar and sticky top header across in-app pages, with standalone split-screen auth/utility layouts; #5750F1 indigo primary on a Gray-2 #F7F9FC/white light theme and #020D1A dark theme toggled via a sun/moon button and persisted to localStorage respecting prefers-color-scheme, Satoshi self-hosted WOFF2 (weights 300-900) typography, ApexCharts pre-rendered as inline SVG for area/bar/donut charts; all fonts, icons, and images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Tailwind CSS v4, Satoshi, ApexCharts | | [premium/nextjstemplates/notion-blog](./templates/premium/nextjstemplates/notion-blog/) | Pixel-faithful clone of the Notion Blog template — the Next.js + Notion-CMS demo site built by Vercel engineer JJ Kasper — a minimal 3-page site (home feature overview, `/blog` post index, `/contact` author page) sharing a centered nav, system sans-serif type at a 20px base with an 800-weight/-0.05rem-tracked H1, a fixed double-layer radial-gradient polka-dot background (`#ddd` dots on 50px grid), Vercel-blue (`#0070f3`, hover `#3291ff`) active links and CTAs, and a "Deploy to Vercel" button footer; the home page reproduces the Vercel+Notion logo lockup and an 8-icon feature grid (Blazing fast, JAMstack based, Always available, Customizable, Incremental SSG, MIT Licensed, Edit via Notion, Great scores) as inline SVGs, the contact page reproduces the author avatar and a 4-icon social row (Twitter/GitHub/LinkedIn/email); supports light/dark mode via CSS custom properties switched by `prefers-color-scheme` and a `localStorage`-backed `data-theme` attribute with a no-flash inline init script; plain HTML/CSS/JS, no build step, fully offline | HTML, CSS, vanilla JS, system font stack, inline SVG | | [premium/nextjstemplates/play](./templates/premium/nextjstemplates/play/) | Pixel-faithful clone of the "Play" Next.js SaaS starter kit and boilerplate marketing template by GrayGrids / Next.js Templates — an 11-page site (long-form home, About, Pricing, Contact, Blog grid, three blog-detail articles, Sign In, Sign Up, 404-style Error) on Inter typography with a #3758F9 primary blue over dark-navy #090E34 surfaces, sharing a header (logo, nav with a "Pages" dropdown, dark-mode toggle, Sign In/Sign Up) and dark-navy footer across every page; features a light/dark theme toggle persisted via a dark class on html with a no-flash boot script honoring prefers-color-scheme, a header that turns from transparent-over-hero to sticky-with-shadow on scroll, a slide/fade "Pages" nav dropdown and mobile hamburger drawer, a 6-item FAQ accordion with rotating chevron, 3-tier pricing cards (Premium highlighted), star-rated testimonials, a 4-card team grid, and scroll-reveal entrance animations; Inter (woff2, weights 300-800) and all images/icons vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter | | [premium/nextjstemplates/plutonium](./templates/premium/nextjstemplates/plutonium/) | Pixel-faithful clone of the open-source "Plutonium" Next.js 11 + TailwindCSS 2 startup landing template by Saurish Srivastava — a 2-page site (home, plus the template's original easter-egg "demo" page that reuses Next.js's 404 route) on the Tailwind system-sans font stack with white/`#000000` light/dark backgrounds, pink-purple-indigo and rose-fuchsia-indigo gradient headlines, and a `#F81CE5` text-selection color; a sticky frosted-glass (`backdrop-filter: saturate(180%) blur(20px)`) nav with mobile hamburger reveal and a class-based, system-preference-aware, no-flash dark-mode toggle persisted to localStorage are shared across pages; the home page reproduces a gradient hero with a hover-scaling photo, a grayscale-to-color 4-up sponsor logo grid, a 4-card Features grid (Next.js 11/TailwindCSS JIT/Dark Mode/Next-SEO) with hover-scaling images, and a 3-tier Pricing grid with a rose-bordered highlighted "Freelancer" plan; the 404/demo page carries large "404" digits, an explanatory paragraph, and a "Return Home" button; images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS | | [premium/nextjstemplates/react-portfolio](./templates/premium/nextjstemplates/react-portfolio/) | Pixel-faithful clone of Chetan Verma's React Portfolio Template — a minimalist, typography-forward personal site on the Hind typeface, black-on-white (light) / white-on-black (dark) with a pink-purple radial gradient (#f86bdf → rgba(107,107,248,.8)) decorating the top and bottom of every page; a sticky/fixed nav with scroll-to-section links and a mobile hamburger popover, a custom 30x30px SVG circle cursor that tracks the mouse on fine-pointer devices, and a sun-icon theme toggle persisted to localStorage and applied pre-paint to avoid flash are shared across all six pages. The home page stacks a four-line hero, a GitHub/LinkedIn/Twitter/Blog/email social row, a 2-column Work grid of 6 projects with 600px cover images that scale 1.1x on hover, a 2-column Services grid (Art Direction, Branding, Web Design, 3D Design) with slate hover highlight + scale(1.05), an About paragraph, and a Contact section with a schedule-a-call button; plus a blog listing with a responsive 3/2/1-column grid of 3 post cards, three individual blog-post pages with a full-width hero image and a styled markdown body (headings, lists, blockquote, code, images), and a resume page with a centered card, experience/education entries, and a 3-column skills grid; Hind woff2 weights and all project/blog imagery vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Hind | | [premium/nextjstemplates/saas-ui](./templates/premium/nextjstemplates/saas-ui/) | Pixel-faithful clone of the Saas UI Next.js landing page for the Saas UI React/Chakra component library — a dark-by-default (#171a1d background, white text) marketing site on the Inter variable font, with a purple (#3b1676→#8952e0) / teal-cyan (#135567→#2ab4d9) accent ramp powering the logo mark and a two-stop gradient announcement banner, plus a separate darker gradient wash (swapping to a lavender-to-cyan wash in light mode) behind the hero, pricing, and auth pages; a 3-page site (home with anchor sections, login, signup) sharing a header (logo, nav, theme-toggle sun/moon button, mobile hamburger dropdown) and footer, with the home page reproducing a hero with a dashboard-mockup screenshot, a 4-item feature strip, a two-panel "Core components" section with a copy-to-clipboard `yarn add` code chip, a testimonial-quote + tag-cloud panel, a 3x3 feature icon grid, a 3-card testimonials row, a 3-tier pricing grid (Open Source/Bootstrap/Startup), and a 2x2 static FAQ grid; login is a centered auth card and signup is a two-column split with a feature checklist; a working light/dark theme toggle (CSS custom properties + data-theme attribute, localStorage-persisted, no-flash boot script) recolors every page instantly; font and all images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter | | [premium/nextjstemplates/sandocs](./templates/premium/nextjstemplates/sandocs/) | Pixel-faithful clone of the "Sandocs" Next.js + Tailwind documentation-site template by Web3Templates — a 21-page site (one marketing landing page plus 20 `/docs/...` pages spanning Getting Started, Configuration, Plugins, and API Reference) on a white canvas with a violet accent (`#754ffe` logo badge, Tailwind `violet-500`/`violet-600` buttons and links) and Inter type; the landing page has a hero with a copy-to-clipboard `npm install -g sandocs` CLI pill, a 3-up feature row, a syntax-highlighted code-window mockup card, a 6-card "Features You'll Love" grid, a 5-logo sponsor row (React/Next.js/Tailwind/Sanity/Vercel), and a fixed bottom-right "Pro Version" badge; every docs page shares a sticky left sidebar nav (active-item highlight, mobile drawer), a markdown-style prose content column with prev/next footer nav, and a sticky right "On This Page" rail with scroll-spy heading highlighting; the clone adds a light/dark theme toggle absent from the source, driven by CSS custom properties with `localStorage` persistence and a no-flash boot script; Inter font and all imagery vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter | | [premium/nextjstemplates/solid](./templates/premium/nextjstemplates/solid/) | Pixel-faithful clone of the Next.js Templates "Solid" SaaS marketing site — an 8-page template (home, blog grid, blog detail, docs, sign-in, sign-up, support, 404) sharing a sticky header with animated `.bg-lines` (3s/6s/9s CSS keyframes), a moon/sun dark-mode toggle persisted to `localStorage` via a no-flash inline pre-paint script (only the sign-in/sign-up/support/404 pages also check `prefers-color-scheme`; the rest default to light), and a 4-column newsletter footer; Inter typography on a #006BFF primary blue with #181C31 dark backgrounds, #20C5A8 teal accents, and pill/rounded design tokens; the home page reproduces a two-column hero with dashboard screenshot, a scrolling brand-logo strip, a features grid, a gradient CTA band, a three-tier pricing table (Free/Medium/Large), and a Swiper.js testimonials carousel loaded from jsDelivr CDN, while blog-details adds a search/categories sidebar and social-share/tag row, docs adds a sidebar nav, and auth pages add social sign-in buttons; IntersectionObserver-driven `.animate-reveal` scroll reveals throughout; images are vendored locally but Inter loads from the Google Fonts CDN on every page except the font-link-less home page, so it isn't fully offline | HTML, CSS, vanilla JS, Inter, Swiper.js | | [premium/nextjstemplates/stablo](./templates/premium/nextjstemplates/stablo/) | Pixel-faithful clone of the Stablo minimal blog template by Web3Templates — a typography-forward, 5-page site (home, about, contact, archive, post) with a centered max-w-screen-lg container, a light/dark/system theme toggle (bottom-right select, localStorage-persisted, no-flash inline init script, swapping light/dark SVG script-wordmark logos), and category-colored post labels (Technology/Design #2563EB, Lifestyle #DB2777, Travel #0D9488, Personal Growth #9333EA) on Inter typography; the home page has a 2-column featured post grid plus a 3-column 12-card secondary grid (14 posts total) with 1.05-scale image hover transitions, archive shows 6 posts in a 3-column grid with Previous/Next pagination, about has a bottom-aligned 3-photo team row with a taller center portrait, contact splits into an info column and a black-button form, and post pages carry a full-width featured image, long-form article body, and an author bio card; light palette #FFFFFF bg / #1F2937 text, dark palette #000000 bg / #F9FAFB text, no build step | HTML, CSS, vanilla JS, Inter | | [premium/nextjstemplates/startup-nextjs](./templates/premium/nextjstemplates/startup-nextjs/) | Pixel-faithful clone of the NextJSTemplates/Uideck "Startup" Next.js + Tailwind SaaS/business landing template — a dark-by-default (light-mode toggleable) site on vendored Inter variable fonts with a `#4A6CF7` blue/indigo primary accent, translucent white card surfaces over a near-black `rgb(18,23,35)` body, and decorative blurred spheres + wireframe polygon shapes; a shared header (absolute/transparent over the home hero, sticky/opaque with shadow on scroll, animated hamburger-to-X mobile toggle, "Pages" dropdown) and footer (social icons, three link columns, blurred sphere graphic) run across all 9 pages — home (hero CTAs, brand strip, 6-card "Main Features" grid, video/image feature block, checklist split section, 3-row feature highlights, 3-card testimonial grid, monthly/yearly pricing toggle with 3 plan cards, blog preview grid, ticket + newsletter CTA panels), about, blog grid with pagination, blog details, blog details with sidebar (search, related posts, popular category/tags, newsletter card), contact/support, sign in, sign up (both with OAuth buttons), and a 404/error page with numeral art; theme toggle persists via `localStorage` with a no-flash boot script honoring `prefers-color-scheme`, all fonts/images/icons vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter | | [premium/nextjstemplates/startup-pro](./templates/premium/nextjstemplates/startup-pro/) | Pixel-faithful clone of the Next.js Templates "Startup Pro" SaaS landing page template — a 9-page site (two distinct home variants, About, blog grid, blog list, blog detail article, Pricing, FAQ, Contact) on Inter typography with a #4A6CF7 blue accent, sharing a sticky header with a Home dropdown and a full footer across pages; light mode runs #FCFCFC backgrounds while dark mode (persisted via localStorage, no-flash inline boot script) swaps to #040A22/#1D2144 navy through CSS custom properties; the homes reproduce animated CSS-keyframe gradient blobs behind the hero, a "Trusted by" brand-logo strip, a 6-card feature grid, testimonials cards, 3-tier pricing (Basic/Premium/Business), a Google Maps contact section, and a newsletter banner, while Pricing adds a monthly/annual billing toggle, FAQ a collapsible accordion, About a team grid, and the blog pages a search/categories/tags sidebar; all imagery vendored locally under assets/, Inter loaded via Google Fonts CDN, no build step | HTML, CSS, vanilla JS, Inter | | [premium/nextjstemplates/tailwind-nextjs-starter-blog](./templates/premium/nextjstemplates/tailwind-nextjs-starter-blog/) | Pixel-faithful clone of the Tailwind Next.js Starter Blog by timlrx — a 20-page site (home with 5 latest posts, full blog listing with a tag-count sidebar and client-side search filter, an all-tags grid, a projects showcase with 2 cards, an about/bio page, 5 blog-post articles, and 10 individual tag archive pages) on Space Grotesk typography and a rose/pink accent (`#E11D48` light / `#FB7185` dark) loaded via a single stylesheet with a Google Fonts `@import`; shared chrome across every page (flame-icon logo header, search/theme-toggle/hamburger icons, full-screen mobile nav overlay, social-icon footer), a no-flash inline-script dark-mode toggle persisted to `localStorage`, post pages with a left author-avatar sidebar and a right tags/prev-next sidebar, language-tagged `

` blocks with hover copy-to-clipboard buttons, and a scroll-to-top button; no build step, single shared `styles.css`/`main.js` across all pages | HTML, CSS, vanilla JS, Space Grotesk |
| [premium/nextjstemplates/tx-shadcn](./templates/premium/nextjstemplates/tx-shadcn/) | Pixel-faithful clone of Taxonomy, shadcn's official Next.js 13 demo app — a 12-page marketing-plus-docs site (home, blog index, a blog post, pricing, guides, a 5-page docs section with sticky sidebar and Shiki-style syntax-highlighted code blocks, login, and a two-column register page with a quote panel) built on a minimal black-and-white HSL-variable design system (light bg hsl(0,0%,100%)/dark bg hsl(224,71%,4%)) with CalSans-SemiBold display headings and Inter body text, 0.5rem-radius border-based cards, a shared marketing header/footer, and a dark/light theme toggle that detects prefers-color-scheme and persists via localStorage; CalSans is vendored locally as woff2 while Inter loads from Google Fonts, no build step | HTML, CSS, vanilla JS, CalSans, Inter |
| [premium/nextjstemplates/unft-marketplace](./templates/premium/nextjstemplates/unft-marketplace/) | Pixel-faithful clone of the Cosmic CMS "uNFT Marketplace" Next.js + Stripe digital-art storefront demo — a light/dark themed site (indigo #4437ff accent, green #45b26b price tags, deep-indigo #1a10b1 footer in light mode) on vendored Poppins + DM Sans, driven entirely by CSS custom properties with a no-flash boot script and localStorage-persisted toggle; shared chrome (announcement bar, header with prism logo and mobile drawer, footer, and a site-wide "Authentication with Cosmic" modal) is injected via `assets/js/chrome.js` into `[data-mount]` placeholders across a 54-page site — the home page (hero, prev/next "Hot bid" carousel, 3-up "Hot collections" mosaic tiles, featured-item spotlight panel, illustrated introduction banner, avatar reviews strip, filterable "Discover" grid), an About page, a Search page (keyword/color/price sidebar plus category chips), a gated Upload-details/create-item page that loads with the auth modal open by default, and 50 product-detail pages — one per catalog listing — all rendered from a single template plus a vendored `assets/data/catalog.js` dataset; product cards fade in a "Quick view" overlay on hover, category chips (Sale/Special offer/Cosmos/Artwork) client-side filter the grid, no build step, fully offline | HTML, CSS, vanilla JS, Poppins, DM Sans |
| [premium/themefisher/andromeda-light-nextjs](./templates/premium/themefisher/andromeda-light-nextjs/) | Pixel-faithful clone of Themefisher's "Andromeda Light" SaaS / app landing page template — a 6-page static site (home with hero/brands-marquee/video-popup/3 feature sections/8 testimonials/CTA, about with counters and team cards, blog with 6-post grid and pagination, contact with info cards and form, elements UI showcase, terms & conditions) on a clean white palette with warm orange (#fe6019) accents, Poppins typography, sticky header with dropdown nav, decorative circle motifs, scroll-entrance animations via IntersectionObserver, brands marquee, gradient video-section card, 2×4 testimonial grid, and a 4-column dark footer; real images sourced from the original GitHub repository, no build step, fully offline | HTML, CSS, vanilla JS, Poppins |
| [premium/themefisher/andromeda-nextjs](./templates/premium/themefisher/andromeda-nextjs/) | Pixel-faithful clone of the ThemeFisher "Andromeda" Next.js SaaS landing template — a clean white page on Poppins (Google Fonts CDN) with an orange (#FE6019) primary accent, decorative floating opacity-graded circles, dashed SVG hero curves, and IntersectionObserver-driven fade-up entrance reveals (AOS-style, 400ms ease) throughout; a fixed shadow-on-scroll navbar with a Pages dropdown, mobile hamburger, and 4-column footer appear on 12 of 13 pages — shared via a components.js placeholder-injection script on 9 interior pages, duplicated inline on home and about — while Sign In/Sign Up carry neither; the 13-page set covers a hero + CSS-marquee brand strip (grayscale-to-color on hover, pause-on-hover), a 3-card features grid with hover-lift and alternating image/text detail blocks, a YouTube-modal video section, a dark testimonials band, and a CTA on the home page, plus About, How It Works, Blog (2-col grid + pagination), Careers, Case Studies (hover-overlay cards), Pricing (monthly/annual cubic-bezier toggle, 3 tiers with a featured solid-orange "Team" plan), split-panel Sign In/Sign Up (no shared nav/footer), Elements style-guide, Changelog timeline, Terms and Conditions, and a Contact form; automatic dark mode via prefers-color-scheme and CSS custom properties; all imagery vendored locally, no build step | HTML, CSS, vanilla JS, Poppins |
| [premium/themefisher/bigspring-nextjs](./templates/premium/themefisher/bigspring-nextjs/) | Pixel-faithful clone of the Themefisher "Bigspring" Next.js SaaS/CRM marketing template — a 36-page static site with a white base, mint/pale-teal (#edf6f5) section bands, a solid teal (#0aa8a7) accent, hand-drawn "undraw"-style illustrations, Urbanist headings over Poppins body copy (both vendored as local .ttf), and a real light/dark toggle (Tailwind `.dark` class, animated sun/moon SVG, pre-paint boot script honoring `prefers-color-scheme` and persisting to localStorage); shared mega-menu header (Company/Products/Blog/Pages dropdowns, "Get Demo" pill CTA, sticky) and footer chrome span Home, About, Team, How It Works, Careers, Products index + 4 product detail pages, Blog index + paginated page 2 + 8 post templates, Authors index + 2 author detail pages, Case Studies index + 6 client case studies (Google, Iconsquare, Jira, Slack, Spotify, Trello), 3-tier Pricing with FAQ accordion, standalone FAQ, Contact, Terms, Privacy, and a custom 404; Swiper-powered testimonial/logo carousels with pagination dots and a max-height-transition FAQ accordion round out the interactions, all fonts/images/JS vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Urbanist, Poppins, Swiper |
| [premium/themefisher/clarity](./templates/premium/themefisher/clarity/) | Pixel-faithful clone of the ThemeFisher "Clarity" Next.js SaaS/security marketing template — a clean white-background page with a purple (#a97eff) primary accent, Satoshi body text and Clash Grotesk headings (both vendored as self-hosted variable WOFF2), built across 14 pages (home, features, pricing, about, contact, blog, blog post, FAQ, integrations, case studies, careers, changelog, privacy policy, 404) sharing a fixed navbar with mega "Pages" dropdown and mobile hamburger menu plus a common footer; the home page reproduces an animated SVG hero background, an infinite scrolling brand-logo marquee, a numbered "how it works" section, feature-highlight icon cards, a monthly/yearly pricing toggle across Basic/Professional/Enterprise plans, a customer-reviews carousel, and a CTA band, while the pricing and FAQ pages add an accordion; scroll entrance reveals (IntersectionObserver-driven) and the testimonial carousel are hand-rolled vanilla JS rather than vendored AOS/Swiper libraries; all fonts, images, and icons are vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Satoshi, Clash Grotesk |
| [premium/themefisher/cleaner-nextjs](./templates/premium/themefisher/cleaner-nextjs/) | Pixel-faithful clone of the Themefisher "Cleaner" Next.js cleaning-service marketing template — an 18-page site (home, about, services listing + 4 detail pages, gallery, blog listing + 6 posts, contact, appointment, elements style-guide) on Rubik typography with an indigo (#443dfc) primary, yellow (#fed00e) secondary, and neon-green (#38ff64) accent palette; shared chrome is a primary-color announcement bar ("Call Us: +1 071 281 9795"), sticky header with mobile hamburger menu, and dark footer, with IntersectionObserver-driven AOS-style fade-up/left/right/zoom scroll reveals (data-aos delays), hover-lift cards, FAQ/elements-page accordions, an elements-page tab switcher, and a light/dark theme toggle (localStorage + prefers-color-scheme, no-flash boot snippet) added since the source has no dark mode; Rubik woff/ttf, all hero/service/blog/team images, and icons vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Rubik |
| [premium/themefisher/cloudpeak-nextjs](./templates/premium/themefisher/cloudpeak-nextjs/) | Pixel-faithful clone of Themefisher's "CloudPeak" Next.js SaaS/fintech marketing template — a 32-page site (home, features, pricing with monthly/yearly toggle and full plan-comparison table, about, integration, changelog, contact, book a free demo, elements kitchen-sink page, blog index with 8 post pages and 4 category filters, case studies index with 6 case pages, privacy policy, terms & conditions, and a custom 404) on a dark, deep-navy (`#05071a`) canvas with an electric-blue primary accent (`#376aed`), a green secondary accent (`#47cc88`), and Sora typography throughout; radial glow-blur background decorations, AOS-style scroll-entrance fade/slide-up reveals, a click-to-expand FAQ accordion, a checkbox-driven mobile nav, and a light/dark theme toggle (CSS custom properties, `localStorage`-persisted, `prefers-color-scheme`-aware) added for this clone since the source only ships dark mode; Sora and all imagery vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Sora |
| [premium/themefisher/copper-nextjs](./templates/premium/themefisher/copper-nextjs/) | Pixel-faithful clone of Themefisher's "Copper NextJS" SaaS/business marketing template — a 12-page site (home, about, services, pricing, contact, team, blog, blog post, FAQ, career, how it works, testimonials) on a light canvas with a red-pink primary (`#FF3158`), amber secondary (`#FFBB33`), and teal tertiary (`#1E858B`) accent palette and Quicksand typography throughout; a sticky transparent header with mobile hamburger and dropdown nav, a marquee brand-logo carousel, feature tabs, FAQ accordions, a monthly/annual pricing toggle, IntersectionObserver scroll-entrance animations, and decorative brushstroke SVG dividers between sections; all fonts and images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Quicksand |
| [premium/themefisher/darkrise-nextjs](./templates/premium/themefisher/darkrise-nextjs/) | Pixel-faithful clone of Themefisher's "Darkrise" Next.js analytics/SaaS marketing template — a 29-page site on a near-black palette (#000000 body, #070707/#0b0b0c panels, #2c2c2c borders) with a cobalt-blue #2d57ee accent, blue-to-pink gradient glow art behind hero/CTA sections, and Figtree typography throughout; a shared header (logo, "All Pages" mega-menu, Get This Template pill CTA, mobile hamburger) and footer wrap every page, plus a light/dark toggle (`localStorage`-persisted, defaulting to dark like the source) added since the source ships dark-only; the home page pairs a gradient hero and floating browser-window dashboard mockup (Monthly Sales/Revenue Summary/Real-time stat cards) with a logo marquee, three stacked data-band feature sections, a 6-card feature grid, a 100+-tool integration logo marquee, and a testimonials section plus final CTA; Elements, About, Feature, Changelog, Contact, Terms, and Privacy round out the page set alongside a Pricing page with an animated Monthly/Yearly toggle, three plan cards (Basic/Standard/Pro), and a grouped feature-comparison table, a paginated Blog index with 8 post templates, an Integrations index with 9 detail-page variants (Intercom, Hubspot ×2, Kickstarter, Mailchimp, Shopify ×2, Slack, Zapier), and a custom 404; AOS-style `[data-aos]` scroll-entrance reveals fire via IntersectionObserver, marquee/rotate/border-animation keyframes are ported from the source stylesheet, and Figtree woff2 fonts plus all imagery are vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Figtree |
| [premium/themefisher/glasto](./templates/premium/themefisher/glasto/) | Pixel-faithful clone of Themefisher's "Glasto" Next.js SaaS & startup template for a social-media platform ("SocialSync") — a light-mode-first design with a bold blue (`#3a7dff`) primary against deep navy (`#161c52`) dark sections, slate-grey (`#484a61`) body copy, and Onest typography (loaded via Google Fonts CDN import), spanning 16 pages (home, elements showcase, company, pricing, integration, case studies index + detail, contact, request-a-demo, changelog, blog index + post, reviews, privacy policy, terms, 404) that share a dismissable localStorage-persisted announcement bar, a sticky header with a 3-column "All Pages" mega-dropdown and checkbox-hack mobile menu, and a 4-column dark footer; the home page alone stacks a gradient hero with floating dashboard screenshots, an infinite-scroll partner-logo marquee, feature grids, a scrolling stats strip, feature tabs, a details/summary FAQ accordion, and a testimonials carousel, while pricing adds a monthly/yearly toggle and comparison table; interactions are driven by vanilla JS (sticky header, mega-dropdown, pricing toggle, tabs, FAQ, a hand-rolled data-aos scroll-reveal script) plus the Swiper.js carousel library loaded from jsDelivr, with all imagery/icons vendored locally under assets/ but fonts and Swiper fetched from CDN at runtime | HTML, CSS, vanilla JS, Onest, Swiper.js |
| [premium/themefisher/hyperbit-nextjs](./templates/premium/themefisher/hyperbit-nextjs/) | Pixel-faithful clone of the Themefisher "Hyperbit" Next.js digital-agency template — an 8-page site (home, about, services, work + work-detail, contact, blog + blog-detail) on a light-gray (#f5f5f5) body with a dark-gradient CTA button (translate-Y hover slide), colorful blurred gradient blobs (purple/orange/yellow) behind a grid-overlay hero, and CSS custom-property design tokens for a red/purple/orange/yellow palette plus multi-stop brand gradients; Inter (300–600) handles UI/body copy with Instrument Serif italic for decorative heading emphasis, a sticky header gains a background on scroll, dropdown nav menus fade/slide in, an auto-advancing testimonials carousel, an icon-rotating FAQ accordion with max-height panel transitions, a continuous marquee of six client logos, a two-tier pricing section, and IntersectionObserver-driven scroll-reveal entrance animations throughout; fonts are vendored locally via @font-face while Lenis smooth-scroll loads from a CDN, no build step, fully offline aside from that one script | HTML, CSS, vanilla JS, Inter, Instrument Serif, Lenis |
| [premium/themefisher/kindora-nextjs](./templates/premium/themefisher/kindora-nextjs/) | Pixel-faithful clone of Themefisher's "Kindora" charity & non-profit marketing template — a 9-page site (home, about, programs, blog, teams, reviews, contact, donation, 404) on a white canvas with a warm coral primary (`#FB8E6D`), bright green (`#52DB83`) and golden yellow (`#FFC700`) accents, near-black (`#040404`) headings, and Urbanist typography; a header that reveals a blurred background past 80px scroll, hamburger mobile menu, "Pages" nav dropdown, CSS-only infinite brand-logo marquee, color-cycling progress-bar cause cards, a Swiper "How You Can Help" carousel, a 5-star testimonials grid, an FAQ accordion, and a donation page with preset/custom amount picker; AOS scroll-entrance animations throughout; CSS, JS, and images vendored locally, Google Fonts/AOS/Swiper loaded from CDN, no build step | HTML, CSS, vanilla JS, AOS, Swiper, Urbanist |
| [premium/themefisher/mobit](./templates/premium/themefisher/mobit/) | Pixel-faithful clone of Themefisher's "Mobit" Next.js fintech/payments-app marketing template — a 25-page site (home with hero phone mockup, stats strip, icon feature grid, alternating feature rows, dark integrations card with 19 partner logos, auto-scrolling testimonials marquee, monthly/yearly pricing toggle across 3 plans, and FAQ accordion; features; pricing; reviews with a 12-card grid; contact form; a 3-page paginated blog index; 13 individual blog post pages; a kitchen-sink elements style-guide page with headings, code blocks, notice callouts, tabs, table, accordion, and video players; privacy policy; terms; 404) on a clean, light, warm-beige (`#f3efe7` hero) canvas with a near-black (`#121212`) primary and indigo (`#5a45fe`) secondary accent, Figtree type; a top announcement bar, sticky header with a hover-opening "All Pages" dropdown and CSS-checkbox mobile hamburger (no JS), a dark footer with newsletter signup, and a repeated "Build Beautiful Website" CTA band with animated nested concentric circles above the footer on every page; scroll-reveal via the real vendored AOS 2.3.4 library (fade-up/fade-up-sm with staggered delays), pill buttons with slide-out/slide-in arrow-icon hover, and click-to-expand accordions animating height via inline-style transitions; Figtree variable font, AOS, and all images/icons vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Figtree, AOS |
| [premium/themefisher/neonspark-nextjs](./templates/premium/themefisher/neonspark-nextjs/) | Pixel-faithful clone of Themefisher's "NeonSpark" Next.js dark-theme digital agency/SaaS marketing template — a 15-page site (home, about, blog, blog post, career, contact, elements showcase, FAQ, pricing, privacy policy, services, service detail, teams, terms, work) on an all-black `#0c0c0c` body with Epilogue (Google Fonts, weights 400/500/600/700, upright+italic mix), a pill-shaped fixed/backdrop-blur navbar, a hero-light glow orb, a rotating conic-gradient CTA-banner border (`rotateBorder`), a continuous logo marquee ticker, IntersectionObserver scroll-reveal entrances, and count-up stat counters; footer carries a giant ghosted "NEONSPARK" watermark; plain HTML/CSS/vanilla JS with no external UI libraries, no build step, fully offline | HTML, CSS, vanilla JS, Epilogue |
| [premium/themefisher/optimize-nextjs](./templates/premium/themefisher/optimize-nextjs/) | Pixel-faithful clone of Themefisher's "Optimize" Next.js HR-management SaaS marketing template — a light-theme, rounded card-heavy bento-grid site in Outfit (headlines) over Inter (body), deep forest-green (#063b26) CTA blocks against lime (#cfff91), yellow (#fdeb69), and peach (#fcc091) accent panels, with a shared header (logo, pure-CSS "All Pages" dropdown, morphing-hamburger mobile menu) and dark-green CTA footer across all pages; 13 unique page templates — home (hero bento cards, feature grid, pricing tiers, testimonial CTA), about, features (dark bento showcase, 3 full-bleed color panels, FAQ accordion), pricing (3-tier cards, FAQ, stats band), integrations, changelog timeline, contact, book-demo, a blog index (featured-post hero card, category-tagged post grid), a shared blog-post template reused across 13 posts, privacy-policy, terms, and a reproduced 404 — plus AOS-ported staggered fade-up/zoom scroll animations, a testimonial quote panel, and FAQ accordions; fonts, images, and icons vendored locally, no build step, fully offline, with an added CSS-token dark-mode layer on top of the source's light-only theme | HTML, CSS, vanilla JS, Outfit, Inter, AOS |
| [premium/themefisher/relux-nextjs](./templates/premium/themefisher/relux-nextjs/) | Pixel-faithful clone of Themefisher's "Relux" luxury hotel marketing template — a 17-page site (home, rooms listing, 5 room detail pages, about, cafe & juice, blog listing, 5 blog posts, contact, privacy policy) on a warm-cream (`#f9f3f0`) canvas with a gold primary (`#e5a63f`) and deep-navy secondary (`#051c56`), uppercase Namdhinggo display headings paired with Red Rose body type; a full-screen parallax hero (background-attachment: fixed) with badge/border aside panels, a sticky/scrolled header with checkbox-driven hamburger nav overlay, an about-image triptych with a stats row, horizontal room cards, a testimonials slider with prev/next controls, a room-image gallery lightbox, a dark-navy blog/events band, a 3-column photo gallery, a newsletter signup, and a brands strip (Booking.com, Expedia, TripAdvisor); IntersectionObserver fade-up/down/left/right scroll-reveal animations, arrow slide-in button hovers, image-zoom hover on room/blog/gallery cards, and a back-to-top button; all images and fonts vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Namdhinggo, Red Rose |
| [premium/themefisher/seoptic-nextjs](./templates/premium/themefisher/seoptic-nextjs/) | Pixel-faithful clone of Themefisher's "Seoptic" SEO analytics SaaS marketing template — a 16-page site (home, pricing, integrations, features, about, our-team, blog, careers, changelogs, faq, contact, authors, elements, privacy-policy, terms-of-service, 404) on a white/off-white canvas with a vibrant orange primary (`#ff5a03`), yellow secondary (`#ffd350`), and pink tertiary (`#ff4ec5`) accent palette, Inter body and Inter Tight headings; a sticky header with a Pages dropdown and mobile hamburger menu, a large gradient-bg footer with a webp background image and 4-column grid, `page-hero` breadcrumb sections, a pricing monthly/annual toggle, FAQ accordion (`.faq-item`/`.faq-question`/`.faq-answer` pattern), integration cards with SVG logos, blog archive grid, team/author profile cards, changelogs timeline, careers listing with benefit icons, long-form legal pages, a minimal 404, and a UI elements showcase; AOS-style `data-aos="fade-up"` scroll animations, animated gradient border cards, CSS custom-property design tokens; all fonts via Google Fonts CDN, all images (dashboard screenshots, blog thumbnails, team photos, integration SVGs) vendored locally under `assets/`, no build step, fully offline | HTML, CSS, vanilla JS, Inter, Inter Tight |
| [premium/themefisher/spydea-nextjs](./templates/premium/themefisher/spydea-nextjs/) | Pixel-faithful clone of Themefisher's "Spydea" SaaS document-management marketing template — a 5-page site (home with hero/brands-marquee/feature-tabs/integrations/testimonials/stats/pricing-preview/blog-preview/CTA, about with mission-vision/stats/8-person team grid, pricing with 3-tier cards and monthly/annual toggle and FAQ accordion, contact with info cards and form, blog with 6-article grid) on a white canvas with a black-and-white base palette and colorful accents (mint green #73CFA8, salmon #FB9289, yellow #FDE077, blue #73B1FF), Maven Pro headings + Merriweather body via Google Fonts; a sticky header with scroll-shrink and announcement bar, mobile hamburger menu with dropdown navigation, AOS scroll-triggered animations throughout, infinite-scrolling brand logos marquee, decorative vertical dashed-line grid background, and diagonal section dividers via CSS clip-path; all images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, AOS, Maven Pro, Merriweather |
| [proactiv-marketing-template](./templates/premium/aceternity/proactiv-marketing-template/) | Pixel-faithful clone of the Aceternity UI "Proactiv Marketing Template" — a 6-page dark-themed SaaS marketing site (home, features, pricing, blog, contact, register) on a near-black `#08090a` canvas with a cyan `#39c3ef` accent and Inter typeface; a fixed floating nav, a radial spotlight hero with dashboard screenshot, infinite dual-row marquee testimonials, 5-tab feature panel with image switch, monthly/yearly pricing toggle with conic-gradient featured card, FAQ accordion, contact form, and a GitHub/Google OAuth register page; all animations ported from the original (IntersectionObserver scroll reveals, CSS marquee, `@keyframes` meteor shower); all assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter |
| [productized-agency-template](./templates/premium/aceternity/productized-agency-template/) | Pixel-faithful clone of Aceternity's "Productized Agency" template — an 11-page marketing site (long home, work, products, pricing, blog index + 6 articles) for a fictional design/dev studio, on a warm bone (#F0EFEC) palette with a signature yellow (#FFCC00) accent, dusty-green checks, Inter + DM Mono, and a dark glowing-arc "Aceternity" hero; sticky "Chat with Alex" nav and a dark "Make Your Website a Sales Machine" footer with a giant Aceternity watermark are shared across every page; a logo marquee, bento feature grids, an "Aceternity VS Traditional Service Providers" comparison table, testimonial carousels, tabbed pricing cards, and a CSS-keyframe FAQ accordion are reproduced from the original Tailwind v4 markup, with Framer-Motion entrances replaced by IntersectionObserver reveals; fonts + images vendored locally, fully offline | HTML, CSS, vanilla JS, Inter, DM Mono |
| [premium/aceternity/schedule-marketing-template](./templates/premium/aceternity/schedule-marketing-template/) | Pixel-faithful clone of Aceternity UI's "Schedule Marketing Template" — a two-page scheduling software marketing site for the fictional "shape.ai" brand on a warm cream-to-orange gradient hero canvas with Inter; a frosted-glass floating pill navbar (backdrop-blur, glass-morphism), hero with large 800-weight heading + orange "Scheduling" highlight + phone mockup with schedule app UI, a logo cloud ("Trusted by Industry Leaders"), a 99.99% uptime reliability section with an orange calendar card, a 5-card bento features grid (Record Calls / Smart Scheduling / AI Summaries wide-card / Calendar Sync / Multi-Platform), an AI Integration chat-bubble visualization, a 3-tier pricing table (Hobby $0 / Good $29 dark highlighted card / Enterprise $99) with feature checklists, an infinite marquee testimonials row, a click-to-open FAQ accordion, a floating-icon CTA banner, and a 4-column footer; blog.html with featured post hero + 6-card grid and tag filter buttons; dark mode via CSS custom properties, hover states and animations (marquee, float, fadeSlideIn); avatars and company logos vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter |
| [premium/aceternity/minimal-portfolio-template](./templates/premium/aceternity/minimal-portfolio-template/) | Pixel-faithful clone of Aceternity's "Minimal Portfolio Template" — a neutral, typography-first 12-page personal portfolio and blog for a software engineer persona (home, about, projects, blog index, 7 blog post details, contact) with a floating circular avatar top-left and a floating pill nav top-right; light/dark mode via CSS custom properties, persisted to localStorage and applied pre-paint to avoid a flash of the wrong theme; home page hero, project preview grid, recent-posts preview, an experience timeline with company logos, and a horizontally scrolling testimonials strip; about page has a fanned polaroid travel-photo gallery and a year-grouped achievements timeline; contact page has a client-side form with a success message; avatar, project thumbnails, company logos, and the Inter variable font vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter |
| [sidefolio-portfolio-template](./templates/premium/aceternity/sidefolio-portfolio-template/) | Faithful 14-page clone of Aceternity UI's "Sidefolio" developer-portfolio template — a light-theme app with a fixed left sidebar (avatar, Tabler-style outline-icon nav, socials, and a dark "Read Resume" pill with an animated sky-glow + emerald-underline hover), a white rounded content panel on a gray page, Cal Sans gradient-clipped headings + Inter body, and the full route set: home, about, projects + 4 project details, articles/blog + 4 articles (with dark code-snippet blocks + copy buttons), contact form, and a two-column work-history resume timeline; staggered IntersectionObserver card entrance, gray-50 card-hover surfaces, polaroid-tilt about gallery, and a mobile sidebar overlay toggle; fonts, logos, project thumbnails, and photos vendored locally, fully offline | HTML, CSS, vanilla JS, Cal Sans, Inter |
| [simplistic-saas-template](./templates/premium/aceternity/simplistic-saas-template/) | Pixel-faithful clone of Aceternity UI's "Simplistic SaaS Template" — a 3-page minimal AI workflow automation SaaS site (home, pricing, login) on a white/neutral-950 dark palette with Geist; a canvas dot-grid hero, IntersectionObserver blur+translateY reveal animations, scroll-reactive navbar, bento feature grid, masonry testimonials, 3-tier pricing (Starter $0 / Pro $79 popular / Enterprise $299), FAQ accordions, and a 4-column footer with large outlined wordmark; full light/dark theme via CSS custom properties persisted in localStorage, mobile hamburger; Geist fonts and all assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist |
| [startup-landing-page-template](./templates/premium/aceternity/startup-landing-page-template/) | Pixel-faithful clone of the Aceternity UI "Startup Landing Page" template — a single-page startup marketing site on a white/black palette with light/dark theme support; a fixed navbar with logo, centered nav links, Login link, dark mode toggle, and CTA button; a full-screen hero with a diagonal animated grid background and orange/yellow sparkle decorations, large bold headline, subtitle, dual CTA buttons, and a layered dashboard screenshot; a bento 5-column features grid, a 3-column pricing table (Hobby / Starter / Pro) with checklist features, a split CTA section with stacked avatars, and a footer with 4-column link grid and large gradient "STARTUP" watermark text; IntersectionObserver scroll-reveal animations, mobile hamburger menu; assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter |
| [premium/cruip/docs](./templates/premium/cruip/docs/) | Pixel-faithful clone of the Cruip "Docs" documentation template — a 3-page docs site (Basics & Fundamentals, Marketing API Quick Start, Help & Support) with a sticky 80px header (logo, search modal with / shortcut, dark/light mode toggle), a collapsible 260px left sidebar (3-level nested nav with cube icons for each section), a main article area (H1/H2/H3 headings, paragraphs, code blocks with syntax highlighting, info/success callout boxes, feedback emoji buttons, next/prev page links, footer with social icons), and a sticky right-side "On this page" scrollspy TOC; CSS custom-property light/dark theming persisted in localStorage, mobile hamburger slide-in sidebar with dark backdrop, FAQ accordion on the help page, contact form, and video modal on the guides page; no external dependencies, fully offline | HTML, CSS, vanilla JS, Inter |
| [premium/cruip/appy](./templates/premium/cruip/appy/) | Pixel-faithful clone of Cruip's "Appy" mobile app landing page template — an 8-page dark/light theme site (home with iPhone mockup hero/AOS animations/Swiper carousel/feature sections/video testimonials/pricing/CTA, about with photo grid/team/careers, blog listing, blog post, testimonials wall, help center FAQ accordions, contact form, 404) using Alpine.js for mobile menu/dropdowns/modals/accordions, AOS for scroll-triggered entrance animations, Swiper for the auto-playing carousel, Inter + Red Hat Display typography, and a dark/light theme toggle with localStorage persistence; all CSS, JS, images, and video vendored locally, no build step, fully offline | HTML, CSS, Alpine.js, AOS, Swiper |
| [premium/cruip/jobboard](./templates/premium/cruip/jobboard/) | Pixel-faithful clone of the Cruip Job Board template — a 4-page site (home with hero/job-list/sidebar-filters/testimonials, sign-in, post-a-job, job-post detail) on a clean white palette with an indigo (#6366f1) accent, Inter variable (wt 100–900) + Nothing You Could Do cursive, pill-shaped buttons, a highlighted featured job card, a newsletter CTA embedded mid-list, and split-panel auth/form pages with testimonial panels; fonts and images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter |
| [premium/cruip/community](./templates/premium/cruip/community/) | Pixel-faithful clone of the Cruip "Community" template — a 4-page dark-themed community/forum landing page and app UI (home feed with popular/newest/following tabs and a post list, single-post discussion thread with threaded comments, sign-in, join-community) on a near-black slate palette with an indigo/violet accent, Inter font, and Alpine.js for interactive dropdowns and tabs; all CSS, JS, and images vendored locally, no build step, fully offline | HTML, CSS, Alpine.js |
| [premium/lexingtonthemes/alfred](./templates/premium/lexingtonthemes/alfred/) | Pixel-faithful clone of Lexington Themes' "Alfred" SaaS productivity platform template — a 10-page light-mode site (home, pricing with FAQ, about, customers, changelog, integrations with fuzzy search, help center, blog, sign-in, book-a-demo) on a white oklch palette with soft accent backgrounds, Inter Variable, square corners, CSS marquee, vanilla-JS nav dropdowns, flyout sub-menus, tab switcher, mobile hamburger, shared nav/footer via JS injection; assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter |
| [premium/lexingtonthemes/aelen](./templates/premium/lexingtonthemes/aelen/) | Pixel-faithful clone of Lexington Themes' "Aelen" SaaS CRM marketing website template — a 26-page site (home, about, blog + post + tag directory + tag category, changelog + detail, contact, helpcenter + knowledge base + article detail, integrations + detail, pricing, sign-in, sign-up, reset password, 404, legal terms + privacy, system overview/colors/buttons/typography/links) on a warm cream oklch(95% 0.0187 80.72) canvas with distinct color-blocked sections (orange, cyan, yellow, gray, black), Geist + Geist Mono typography, and a sticky 49px dashed-border header; giant clamp display headings, stacked bar motifs as section dividers, a vertical testimonials marquee, a Fuse.js-powered search modal, a mega menu with staggered entrance animation, and a full-width Ælen SVG wordmark footer; assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist, Geist Mono |
| [premium/lexingtonthemes/astromaxsp](./templates/premium/lexingtonthemes/astromaxsp/) | Pixel-faithful clone of Lexington Themes' "AstroMax SP" creative agency portfolio template — a 21-page dark-themed site (home with hero/marquee/testimonials/Keen Slider work carousel/services grid/CTA morph, work + 4 case studies, blog + 6 posts, store + 4 products, team + 2 profiles, system overview, 2 legal pages) on a near-black OKLCH palette with a warm orange accent, Geist typography, white/20 border-grid layout, sticky header, mobile hamburger, Keen Slider carousel, FuseJS search modal; assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Keen Slider, FuseJS, Geist |
| [premium/lexingtonthemes/aubergine](./templates/premium/lexingtonthemes/aubergine/) | Pixel-faithful clone of Lexington Themes' "Aubergine" dark design agency subscription website — a 5-page site (home, blog, work, team, system overview) on a near-black OKLCH palette with purple/indigo accent, Clash Display + Figtree fonts, AOS scroll entrance animations, Vanilla Tilt 3D card hover effects, Fuse.js fuzzy search, FAQ accordion, mobile hamburger menu, 4-column services checklist, brand logo work cards, 3-tier membership pricing, and spinning logo footer; no build step, fully offline | HTML, CSS, vanilla JS, AOS, Vanilla Tilt, Fuse.js, Clash Display, Figtree |
| [premium/lexingtonthemes/author](./templates/premium/lexingtonthemes/author/) | Pixel-faithful clone of Lexington Themes' "Author" dark editorial blog & publication website template — a 20-page architecture-focused site (home with hero/featured Keen Slider carousel/subscribers grid/newsletter, blog listing + 6 posts, 5 author profiles, pricing/membership, sign-in, sign-up, 4 design-system pages) on a pure-black OKLCH palette with white text and a deep-purple hover accent (#8b0b98); a fixed top nav with Fuse.js search modal, staggered mobile menu entrance animation, card hover color-overlay (mix-blend-mode multiply), Keen Slider prev/next carousel, FAQ accordion, and a multi-column footer with logo wordmark, category chips, and credits; Inter font from CDN, Keen Slider + Fuse.js vendored locally, all images vendored, no build step, fully offline | HTML, CSS, vanilla JS, Keen Slider, Fuse.js, Inter |
| [bastion](./templates/premium/lexingtonthemes/bastion/) | Pixel-faithful clone of Lexington Themes' "Bastion" construction company website template — a 23-page site (home, about, services, projects, team, careers, blog, contact, why-us, partners, mission, 6 service details, 2 project details, 3 legal pages, system overview) in an industrial white/neutral palette with Inter Variable, an oklch color scale, a sticky blur nav that transitions from transparent to white on scroll, a full-bleed video-background hero and footer using a night timelapse, Keen-Slider testimonials carousel, IntersectionObserver reveal animations, mobile hamburger menu, and full hover states for cards, buttons, and nav links; Inter font from CDN, Keen-Slider from CDN, background video vendored locally, fully offline | HTML, CSS, vanilla JS, Keen-Slider, Inter |
| [premium/themefisher/bigspring-light-nextjs](./templates/premium/themefisher/bigspring-light-nextjs/) | Pixel-faithful clone of Themefisher's "Bigspring Light" Next.js SaaS/agency marketing template — an 8-page site (home, blog listing, 3 markdown-style blog posts, pricing, contact, FAQ) on an all-white canvas with a solid teal (`#0aa8a7`) accent, pale-mint (`#edf6f5`) alternating section bands, and Lato typography throughout; a simple flat top nav (no mega-menu) with mobile hamburger, hand-drawn "undraw"-style hero/CTA illustrations, a 6-card feature grid, alternating image/copy feature rows with slide-indicator dots, a 3-tier pricing grid with a raised/highlighted center plan, a full markdown-style blog article template (headings, code blocks, tables, blockquote, definition list), a contact form, and an FAQ card grid; hover states on nav/buttons/cards and IntersectionObserver scroll-reveal animations; fonts and imagery vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Lato |
| [premium/lexingtonthemes/brightlight](./templates/premium/lexingtonthemes/brightlight/) | Pixel-faithful clone of Lexington Themes' "Brightlight" developer email delivery platform — a 4-page site (home, blog, sign-in, system status) on a warm neutral OKLCH palette with orange accent, Geist + Noto Serif; pricing monthly/annual toggle, SDK language tab switcher, feature card hover animations, logo marquee, mobile hamburger nav; assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist, Noto Serif |
| [premium/lexingtonthemes/buio](./templates/premium/lexingtonthemes/buio/) | Pixel-faithful clone of Lexington Themes' "Buio" Web3/SaaS marketing template — a 16-page dark-first site (home, pricing, blog, blog post, changelog, contact, customers, helpcenter, integrations, jobs, sign-in, sign-up, system overview, team, whitepaper, 404) on a near-black OKLCH palette with EB Garamond display, Geist body, Geist Mono code; glassmorphism nav, AOS scroll animations, animated SVG geometric shapes, syntax-highlighted Solidity code blocks; pricing toggle, blog/integrations filters, FAQ accordion, 90-day uptime status page; no build step, fully self-contained | HTML, CSS, vanilla JS, AOS, Geist, EB Garamond |
| [premium/lexingtonthemes/carbon](./templates/premium/lexingtonthemes/carbon/) | Pixel-faithful clone of Lexington Themes' "Carbon" design directory and website showcase template — a 12-page curation platform (home with tag-filtered 4-column website gallery and ⌘K fuzzy search modal, pricing with two-tier cards and FAQ accordion, blog listing, store listing, submit form, advertise/sponsors, system overview, sign-in/sign-up auth forms, site detail, blog post, and store item pages) on a warm beige oklch canvas with a terracotta/salmon accent, InterVariable sans and Hedvig Letters Serif display typography; tag-filter pills, fuzzy search, site cards with hover transitions, native `` FAQ accordions, and a newsletter footer; original compiled Tailwind v4 stylesheet + 28 webp images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Tailwind (compiled), Inter, Hedvig Letters Serif |
| [premium/lexingtonthemes/carriera](./templates/premium/lexingtonthemes/carriera/) | Pixel-faithful clone of Lexington Themes' "Carriera" job board and career platform website template — a 10-page site (home with 4-column layout: featured jobs/categories/companies/candidates, blog listing, help center, pricing with monthly/annual toggle and FAQ accordion, sign-in, sign-up, job detail, company detail, candidate detail, system overview) on a minimal white-first OKLCH palette with three switchable themes (light, dark, green accent via localStorage), Geist + Geist Mono typography, a sticky 5-column nav with Fuse.js site-wide fuzzy search modal, a mobile full-screen overlay menu, pricing billing toggle, FAQ accordion, and a fixed bottom-right 3-dot theme switcher; all assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Fuse.js, Geist, Geist Mono |
| [carrington](./templates/premium/lexingtonthemes/carrington/) | Pixel-faithful clone of the Carrington Law Firm template by Lexington Themes — a multi-page dark-accented law firm site (home, practice areas, cases, team, blog, careers, press & media, offices, contact + detail pages) reproduced as plain HTML + CSS + vanilla JS; dark teal (#0a1a1c) / gold (#fbbf24) palette on Inter Variable + Newsreader serif, a fixed nav that starts transparent on home and color-swaps to white on scroll, a 4-column mega-menu, Fuse.js fuzzy site search (Cmd+K / Slash), IntersectionObserver countup stats, and 37 vendored webp images; no build step, fully self-contained | HTML, CSS, vanilla JS, Inter, Newsreader, Fuse.js |
| [premium/lexingtonthemes/copperlane](./templates/premium/lexingtonthemes/copperlane/) | Pixel-faithful clone of Lexington Themes' "Copperlane" auto detailing and car services website template — a 22-page business site on a white background with a near-black sticky nav (base-900/60 with backdrop-blur), golden/yellow accent OKLCH color scale, Stack Sans Notch display serif + Inter body, a full-screen background video hero, three-column mega menu, image cards with hover scale, FAQ accordions, booking and contact forms; original compiled Tailwind CSS + 33 webp images + hero MP4 video vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Tailwind (compiled), Stack Sans Notch, Inter |
| [dusk](./templates/premium/lexingtonthemes/dusk/) | Pixel-faithful clone of Lexington Themes' "Dusk" Swiss design-week conference template — a 63-page event site (home, schedule, sessions, speakers, tickets, venue, hosts, partners, sponsors, gallery, recap, faq, a 6-post journal with 13 tag archives, 6 speaker profiles, 9 workshop details, 4 sponsor details, register/sign-in/contact forms, a 5-page design system, and terms/code-of-conduct/privacy) rebuilt as plain HTML + CSS + vanilla JS; an International-Typographic-Style look on a warm cream (oklch base) canvas with an electric-blue accent, dashed hairline grid dividers, blocky accent squares, and oversized uppercase Clash Display headings over General Sans body; reproduces the animated logo corner-ticks, a full-screen Fuse.js fuzzy search modal (grouped results), a full-screen mobile overlay menu, and native `` FAQ accordions, and adds a token-driven sun/moon light/dark theme toggle layered on the original OKLCH palette (persisted to localStorage, honoring prefers-color-scheme with a no-flash boot script); the source's compiled Tailwind CSS is preserved for fidelity while Clash Display + General Sans (woff2), every image, and Fuse.js are vendored locally, no build step, fully offline in both light and dark mode | HTML, CSS, vanilla JS, Clash Display, General Sans, Fuse.js |
| [ellamae](./templates/premium/lexingtonthemes/ellamae/) | Pixel-faithful clone of Lexington Themes' "Ella Mae®" SaaS operations workspace template — a 15-page site (home with hero/marquee/features/pricing/FAQ, changelog, customers, helpcenter, integrations, blog with search, system overview/buttons/colors/typography/links, login, signup, contact/404) on a bold geometric layout with thick 8px structural borders, a deep navy/blue OKLCH accent and warm orange/terracotta secondary, InterVariable font, pill-shaped buttons with press-down hover states, an infinite-scroll brand logo marquee, CSS `` FAQ accordion with icon rotation, sticky changelog sidebar, and a large SVG wordmark footer; assets (SVGs, team photos, blog images, integration logos) vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter Variable |
| [premium/lexingtonthemes/enlightr](./templates/premium/lexingtonthemes/enlightr/) | Pixel-faithful clone of Lexington Themes' "Enlightr" online course platform template — a 5-page educational site (home, pricing, courses, sign-in, system-overview) on a white base with a green (#22c55e) accent, Inter Variable body, Instrument Serif italic display headings, Clash Grotesk uppercase labels; pill-shaped buttons, sharp-cornered cards, fixed blur-on-scroll nav, Keen Slider testimonials carousel, FAQ accordion, floating search button, mobile hamburger menu; avatar images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Keen Slider, Inter, Instrument Serif, Clash Grotesk |
| [premium/lexingtonthemes/flaco](./templates/premium/lexingtonthemes/flaco/) | Pixel-faithful clone of Lexington Themes' "Flaco" minimal personal portfolio/blog template for software engineers — a multi-page site (home, blog, projects, store, studio, stack, system overview) on a warm neutral OKLCH palette with a lime-green accent, Geist + Geist Mono typography, full light/dark theme toggle (localStorage + prefers-color-scheme, no-flash boot), a hamburger-menu overlay with staggered entrance animations, and a Fuse.js fuzzy search modal; assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist, Geist Mono, Fuse.js |
| [premium/lexingtonthemes/flabbergasted](./templates/premium/lexingtonthemes/flabbergasted/) | Pixel-faithful clone of Lexington Themes' "Flabbergasted" dark SaaS AI voice platform landing page — a single-page site on a near-black oklch palette with Inter Variable body, InterDisplay headings, Geist Mono labels, named mesh gradients (meshLightBlue, meshRainbow, meshPurple, meshYellow, meshMagenta, meshGreen), and repeating stripe patterns; a sticky nav with mobile overlay, a hero with an AI chat widget and glow CTA, a 12-brand scrolling logo marquee, a four-column feature grid, a voice-cloning demo section with Web Audio API pitch shift, a two-column CTA split, a six-card brainwaves feature grid, an integration showcase with hover colorize, a five-tier pricing table with monthly/annual toggle and full feature-comparison table, a Keen Slider testimonials carousel, and a structured footer with cross-indicator corner markers; assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Keen Slider, Inter Variable, InterDisplay, Geist Mono |
| [premium/lexingtonthemes/hemingway](./templates/premium/lexingtonthemes/hemingway/) | Pixel-faithful clone of Lexington Themes' "Hemingway" editorial magazine & podcast website template — a 9-page content platform (home with hero headline/popular posts grid/interviews/podcast CTA, about with two-column editorial layout and grayscale image grid, magazine/blog listing, blog post with sticky large title and subscriber gate, podcast episode list, podcast interview detail with audio player, 4-tier pricing, design system overview, 404) on a near-white oklch base palette with STIX Two Text serif headings over Inter body; a 3-column grid nav, a black footer with newsletter form, and all pages using the compiled Tailwind CSS from the source; 28 webp images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Tailwind (compiled), STIX Two Text, Inter |
| [premium/lexingtonthemes/hirewise](./templates/premium/lexingtonthemes/hirewise/) | Pixel-faithful clone of Lexington Themes' "Hirewise" job board website template — an 11-page platform (home with hero/featured jobs/browse by category/top companies/top candidates/newsletter CTA, jobs listing with filters, job detail, companies directory, company profile, candidates directory with filter sidebar, pricing with monthly/quarterly/yearly tiers and FAQ accordion, blog/news, sign-in and sign-up with 2-column testimonial layout, submit-job form) on a white/neutral OKLCH palette with blue (#1DA8FF), orange (#FA5925), green (#00C172), and yellow (#FFB112) accents and Geist font; a dropdown mega-menu with colored nav tiles, Fuse.js-powered site-wide search modal, light/dark theme toggle (localStorage persisted, no-flash boot), and colored testimonial cards; no build step, fully offline | HTML, CSS, vanilla JS, Fuse.js, Geist |
| [premium/lexingtonthemes/kotei](./templates/premium/lexingtonthemes/kotei/) | Pixel-faithful clone of Lexington Themes' "Kotei" design studio portfolio and blog template — a multi-page site (home, blog + 3 posts, work + 3 case studies, system overview) presenting "Dezain Sutajio Kotei®", a fictional Fukuoka-based branding studio; on a neutral OKLCH base palette with Geist + Geist Mono typography; a floating bottom dock with logo, Overview/Work links, dark-mode toggle, Fuse.js search modal, and a Buy button; an AOS-animated hero headline (up to text-6xl), an infinite CSS marquee of 12 client logos, a services accordion (Brand Identity, Web & Digital Design, Print & Packaging, Motion Graphics, Art Direction, Consulting), blog and work card grids, and a store section; light/dark theme toggle (localStorage + prefers-color-scheme, no-flash boot), AOS scroll animations, Fuse.js site-wide fuzzy search; assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist, Geist Mono, AOS, Fuse.js |
| [matterhaus](./templates/premium/lexingtonthemes/matterhaus/) | Pixel-faithful clone of Lexington Themes' "Matterhaus" architecture studio website template — a 23-page site (home, projects + 10 details, services + 8 details, studio, contact, careers + 5 details, blog + 4 posts + tags, team + 3 profiles, awards, process, system overview + 4 sub-pages, 5 legal pages, 404) on a monochromatic OKLCH greyscale palette with Switzer variable font; a fixed `mix-blend-difference` header, a two-column split layout throughout, a mobile hamburger menu, and a Fuse.js full-site search modal; compiled Tailwind CSS v4 + 25 webp images vendored locally, Switzer from Fontshare CDN, light-only theme, no build step | HTML, CSS, vanilla JS, Tailwind (compiled), Switzer, Fuse.js |
| [molle](./templates/premium/lexingtonthemes/molle/) | Pixel-faithful clone of Lexington Themes' "Mølle" Scandinavian prefab home company e-commerce template — a 13-page site (home, homes listing, process, about, customers, contact, sign-in, sign-up, blog, blog post, product detail, design system, help center) on a strict five-column grid with dashed borders, InterDisplay + Inter typography, black-and-white + purple OKLCH palette; Keen Slider carousel, Fuse.js search modal, FAQ accordions, mobile hamburger nav, Mølle SVG wordmark footer; compiled Tailwind CSS + 40 webp images + Keen Slider + Fuse.js vendored locally, no build step | HTML, CSS, vanilla JS, Tailwind (compiled), Inter, Keen Slider, Fuse.js |
| [mulberry](./templates/premium/lexingtonthemes/mulberry/) | Pixel-faithful clone of Lexington Themes' "Mulberry" accounting & financial-services website template — a 68-page editorial marketing site (home, about, contact, pricing, faq, testimonials, locations, 404, services + 6 details, industries + 8 details, case-studies + 6 details, blog + 6 posts + tags index + 15 tag pages, team + 6 profiles, 2 legal pages, 5 design-system pages) pairing STIX Two Text serif headings with Inter body on a warm neutral grey palette and a golden-amber accent; full-bleed editorial photography, `base-50` section panels, a black footer and CTA band, a full-width four-column mega menu, a Fuse.js fuzzy site-search modal, native `` FAQ accordions, IntersectionObserver count-up stats, and group-hover card/link transitions; the original compiled Tailwind CSS is vendored as `theme.css` and all images, the CEO video, certification SVGs, fonts, RSS feed, and Fuse.js are vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Tailwind (compiled), STIX Two Text, Inter, Fuse.js |
| [navy](./templates/premium/lexingtonthemes/navy/) | Pixel-faithful clone of Lexington Themes' "Navy" SaaS cloud hosting website template — a 15-page site (home, pricing, sign-in, 6 customer case studies + index, 5 design-system pages) on a clean white canvas with teal/green OKLCH accent radial-gradient burst backgrounds, dot-pattern overlays, SVG trapezoid corner decorators, interactive feature tabs with scroll-reveal dashboard images, a stat grid with hover burst effects, and a feature comparison table; Inter + InterDisplay + JetBrains Mono, compiled Tailwind CSS v4 vendored, logo SVGs and dashboard webp images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Tailwind (compiled), Inter, JetBrains Mono |
| [newport](./templates/premium/lexingtonthemes/newport/) | Pixel-faithful clone of the Newport homeowners-association (HOA) template by Lexington Themes — a calm editorial 27-page community site (home, overview/sitemap, about, contact, faq, gallery, governance, amenities + detail, announcements + detail, blog + post/tags/tag, board + member, documents + detail, events + detail, rules, 4 legal pages, 404) on a light neutral palette driven by three OKLCH scales (base/accent/secondary), pairing the Gambarino serif for display headings with Switzer sans body, soft rounded cards, and deep near-black hero/contact/CTA panels; a fixed header, a Fuse.js site-search modal (icon / Cmd+K / Slash over a 53-item index), a slide-in mobile nav, native `` FAQ accordions, sticky "on this page" sidebars, and IntersectionObserver scroll reveals; unlike the light-only source, the clone is fully theme-aware with light + dark tokens, `prefers-color-scheme`, and a persisted header theme toggle; Switzer + Gambarino fonts and 26 webp images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Switzer, Gambarino, Fuse.js |
| [northbound](./templates/premium/lexingtonthemes/northbound/) | Pixel-faithful clone of Lexington Themes' "Northbound" wedding website template — a 13-page editorial wedding site (home, RSVP, info, gallery index, 3 gallery albums, people, events, FAQ, wishlist, journal, system overview) on a warm off-white (oklch base-50) canvas with a deep olive-green accent, Noto Serif Display (uppercase display headings), Noto Serif (section headings), and Inter (body); a full-viewport hero with "ARIA & DANIEL" display title, a Keen Slider intro carousel with desaturated-to-color image hover, a numbered schedule, dark accent-950 CTA cards (RSVP/Info/Wishlist), a gallery album grid, a split-layout RSVP form with underline-only inputs on a dark panel, and a full-viewport footer image with the decorative ampersand monogram SVG; all images and the compiled Tailwind CSS v4 stylesheet vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Tailwind (compiled), Noto Serif Display, Noto Serif, Inter, Keen Slider |
| [premium/lexingtonthemes/outkast](./templates/premium/lexingtonthemes/outkast/) | Pixel-faithful clone of Lexington Themes' "Outkast" web development agency website template — an 8-page dark-mode site (home, services, work, team, pricing, blog, contact, system overview) on a near-black oklch palette with muted sage-green accents and Geist variable font; a sticky hamburger-drawer nav, CSS marquee ticker animations, IntersectionObserver scroll-triggered entrance reveals, a scrollable work carousel, a three-tier pricing card layout, a FAQ accordion, and a contact form with a live 500-char counter; assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist |
| [premium/lexingtonthemes/phanatik](./templates/premium/lexingtonthemes/phanatik/) | Pixel-faithful clone of Lexington Themes' "Phanatik" news & magazine website template — a 3-page editorial site (home, about, blog post) on a near-white OKLCH base palette with STIX Two Text serif display headings over Inter body; a live-clock top bar, a search modal with Fuse.js, a mega-menu with Company/Categories/Top Stories/Latest Episodes sections, a scrolling headline ticker marquee, a 4-column homepage grid (Featured hero article, Breaking news cards, Top Stories, sidebar Finance/podcasts), tabbed category sections (Business, Finance, Tech, Health, Sports), a newsletter signup in the dark base-950 footer, and a single-post blog layout with subscriber paywall teaser; 19 webp/SVG images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter, STIX Two Text, Fuse.js |
| [premium/lexingtonthemes/primapersona](./templates/premium/lexingtonthemes/primapersona/) | Pixel-faithful clone of Lexington Themes' "PrimaPersona" minimal personal portfolio template — a 7-page single-scroll site on a white background with Inter font, a 4-column grid layout, and OKLCH neutral palette with green accent; hero heading in right half of grid, work/projects (with full-width rounded images), education, and speaking sections, plus system overview and design-system pages; light/dark theme toggle, mobile hamburger menu, 6 webp images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter |
| [premium/lexingtonthemes/profoliox](./templates/premium/lexingtonthemes/profoliox/) | Pixel-faithful clone of Lexington Themes' "ProFolioX" portfolio template — a 33-page minimal dark/light portfolio site (home, blog + 6 posts, work + 6 case studies, store + 6 products, about, studio, course, sign in/up, contact, 5 design-system pages) for designers and developers; a fixed 256px sidebar with staggered-entrance nav, OKLCH design tokens, Geist + Geist Mono, light/dark theme toggle (localStorage + prefers-color-scheme, no flash), Fuse.js fuzzy search modal (⌘K), AOS scroll animations, card hover overlays with translateY text reveal, mobile drawer menu, FAQ/module accordions; 27 webp images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist, AOS, Fuse.js |
| [premium/lexingtonthemes/quartiere](./templates/premium/lexingtonthemes/quartiere/) | Pixel-faithful clone of Lexington Themes' "Quartiere" luxury real estate template — a 7-page site (home, for sale, for rent, property detail, agents, sell property, contact) on a black-and-white OKLCH neutral palette with Geist + Geist Mono typography; a sticky nav with a mega-menu panel, Fuse.js-powered property and agent search modal, AOS scroll-triggered entrance animations, property card grid with hover badge overlay, "Be where the world is looking" 2-column CTA, Press Exposure/Global Connections/Unmatched Marketing 3-feature section, and a multi-column footer with Quartiere letterform SVG; assets vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist, Geist Mono, AOS, Fuse.js |
| [riflesso](./templates/premium/lexingtonthemes/riflesso/) | Pixel-faithful clone of Lexington Themes' "Riflesso" minimal photography portfolio and magazine template — a 6-page site (home with video hero + 10-item responsive gallery grid, magazine/blog listing, blog post detail, store product listing, store product detail with HTML details/summary FAQ accordion, gallery post detail with sticky sidebar) on a white background with Hanken Grotesk variable font; a full-screen overlay navigation menu with staggered entrance animation, Fuse.js-powered site-wide search modal, responsive 1→2→4→5 column gallery grid, vendored photoshoot MP4 video, and 36 webp images; no build step, fully offline | HTML, CSS, vanilla JS, Hanken Grotesk, Fuse.js |
| [rosewood](./templates/premium/lexingtonthemes/rosewood/) | Pixel-faithful clone of Lexington Themes' "Rosewood" home renovation & construction company website template — a 23-page site (home, services + 6 service details, projects + 4 case studies, about, process, blog + 4 posts, contact, free-quote, 404/faqs) on a minimal black-and-white OKLCH neutral palette with EB Garamond display serif + Switzer sans; fixed nav with full-screen overlay menu, Keen Slider services carousel, tabbed project showcase with opacity fade, before/after drag-to-compare image sliders, Fuse.js search modal, and a giant wordmark SVG footer; 50 webp images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, EB Garamond, Switzer, Keen Slider, Fuse.js |
| [sandstone](./templates/premium/lexingtonthemes/sandstone/) | Pixel-faithful clone of Lexington Themes' "Sandstone" interior design studio website template — a 13-page site (home, projects + 4 project details, services, studio, contact, blog + 3 posts, system overview) on a monochromatic OKLCH grayscale palette with Inter Variable; a floating pill nav with animated mobile menu, full-viewport video heroes with marquee ticker and SNDS SVG overlay, Keen Slider testimonials + project carousels, stacked sticky process steps (01–06), slide-up hover link animation, interactive footer services panel with background image switcher; 37 webp images + hero MP4 video vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter Variable, Keen Slider |
| [semplice](./templates/premium/lexingtonthemes/semplice/) | Pixel-faithful clone of Lexington Themes' "Semplice" minimal photography portfolio template — a 3-page site (home, gallery detail, system overview) on a warm off-white canvas with Inter sans and Newsreader serif; a full-width SVG wordmark, 4-column editorial nav, gallery figure linking to a 6-column image grid on a warm tan (#dedad0) background, and a footer with exhibition dates in uppercase serif; images vendored locally, no build step, fully offline | HTML, CSS, Inter, Newsreader |
| [simplexity](./templates/premium/lexingtonthemes/simplexity/) | Pixel-faithful clone of Lexington Themes' "Simplexity" minimal personal portfolio and blog template — a 31-page site (home, blog listing + 10 posts, store + 2 products, projects + 2 detail pages, pricing, about, 404, system overview + colors/buttons/typography/links pages) on a #fafafa background with OKLCH dark mode tokens, Inter Variable, narrow max-w-2xl centered column; dark/light theme toggle, Cmd+K fuzzy search modal, tag filter pills, article list with thumbnails, store and project cards with hover transitions; 14 images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter Variable |
| [snowpeak](./templates/premium/lexingtonthemes/snowpeak/) | Pixel-faithful clone of Lexington Themes' "Snowpeak" news and media publication website template — a 7-page content platform (home with floating glassmorphism nav/big SVG logo hero/animated marquee ticker/3-column featured articles/inline ad/tabbed category sections, blog listing, blog post detail, blog tag page, podcast with audio players, sign-in, sign-up) on a medium-gray OKLCH base-500 background with near-black base-900 cards, Inter Variable body font, Stack Sans Notch display font, a purple/violet accent, orange and pink accents; a fixed pill navbar with backdrop-blur glassmorphism, dropdown menu panel, Fuse.js-powered search modal with keyboard navigation, CSS marquee animation (90s loop, pause-on-hover), category tab-switching, and podcast audio controls; 26 webp images + SVG ads vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter Variable, Stack Sans Notch, Fuse.js |
| [spaziobianco](./templates/premium/lexingtonthemes/spaziobianco/) | Pixel-faithful clone of Lexington Themes' "Spazio Bianco" fintech API SaaS landing page template — an 11-page site (home, blog, sign-up, contact, 2 customer case studies, 5 design-system pages) on a white-on-white aesthetic with a 125° diagonal stripe background, teal and yellow accents, and syntax-highlighted code blocks; large Geist/Geist Mono type, AOS scroll reveals, marquee animations for brand logos and data streams, a tab-switching code showcase with 5 API examples, a chat bubble widget, and Fuse.js blog search modal; the original compiled Tailwind CSS v4 stylesheet vendored as `assets/css/main.css`, all 22 images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Tailwind (compiled), Geist, Geist Mono, AOS, Fuse.js |
| [premium/lexingtonthemes/streamer](./templates/premium/lexingtonthemes/streamer/) | Pixel-faithful clone of Lexington Themes' "Streamer" indie music and media platform template — a 14-page site (home with ticker bar/hero/blog cards/podcast cards, magazine listing with tab category filter, podcast listing, jobs, about, pricing-advertise with 8 stat boxes, pricing-membership with 3 tiers + FAQs, authors grid, blog post, podcast episode with audio player, system overview/colors/buttons/typography) on a cream OKLCH base-300 canvas with a near-black sticky nav (base-900), orange/amber accent (oklch 70.5% .213 47.604), Inter font, Fuse.js site-wide search modal, Keen Slider for carousels, and native `` dropdown menu; 33 webp images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Tailwind (compiled), Inter, Fuse.js, Keen Slider |
| [premium/lexingtonthemes/studiomax](./templates/premium/lexingtonthemes/studiomax/) | Pixel-faithful clone of Lexington Themes' "StudioMax" dark design agency portfolio template — an 11-page site (home, work, blog/journal, team, contact, sign-in, sign-up, work detail, blog post, service detail, system overview) on a pure-black (#000000) background with OKLCH fine border lines, diagonal-stripe and diamond geometric background patterns, Inter sans-serif body, and JetBrains Mono thin-weight uppercase headings; a pinned nav with mobile hamburger menu, full-viewport hero with blue radial glow, 2-column project grid, accordion services list with arrow buttons, 4-tier pricing cards, testimonial, 3-column blog grid with tag pills, 4-person team grid, contact form with 4 office addresses, and a multi-column newsletter footer; all project/team/blog images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter, JetBrains Mono |
| [trendspotter](./templates/premium/lexingtonthemes/trendspotter/) | Pixel-faithful clone of Lexington Themes' "Trendspotter" design tool directory and curation website template — a 17-page site (home tools directory, blog, store + product detail, pricing, sign in, sign up, 10 tool detail pages, tag filter pages, submit tool form, system design overview, dashboard collections, terms of service) on a white background with an OKLCH green accent palette and Inter sans-serif; horizontally scrolling marquee strip, searchable 4-column tool card grid with bookmark actions and tag-based filtering, animated modals (submit tool, subscribe newsletter), vanilla JS search overlay, and a two-column nav with an SVG wordmark logo; 21 webp images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter |
| [premium/lexingtonthemes/vanta](./templates/premium/lexingtonthemes/vanta/) | Pixel-faithful clone of Lexington Themes' "Vanta" online course platform template — a 5-page site (home with hero/testimonials/Keen Slider carousel/blog/projects, courses listing with tag pills and course cards, pricing with monthly/annual toggle and FAQ accordion, sign-in, system overview) on a minimal white OKLCH palette with a lime-green accent, Geist + Newsreader typography, a centered max-w-2xl column; fixed nav with scroll blur, light/dark theme dots (localStorage + prefers-color-scheme), Fuse.js site-wide search modal, mobile hamburger menu, and a giant "vanta" SVG wordmark footer; customer webp images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Fuse.js, Keen Slider, Geist, Newsreader |
| [westend](./templates/premium/lexingtonthemes/westend/) | Pixel-faithful clone of Lexington Themes' "Westend" Nordic real estate agency template — a 26-page property site (home, all properties, filtered listing views, property/agent/neighborhood/open-house detail pages, services, blog, contact, valuation, sell, about, FAQ, careers, system overview, legal) on a minimal white/near-black oklch palette with Inter Variable; 8xl–9xl hero with inline property photo, Keen Slider carousel, property cards with hover-reveal meta overlay, dark "Why Westend" split section, services image grid, FAQ accordion, dark/light theme toggle, search modal, mobile nav; 60 images vendored locally; no build step | HTML, CSS, vanilla JS, Inter Variable |
| [williamsburg](./templates/premium/lexingtonthemes/williamsburg/) | Pixel-faithful clone of Lexington Themes' "Williamsburg" premium e-commerce template — a 16-page storefront (home, store home, all products, product detail, blog, blog post, contact, pricing, helpcenter, membership, affiliates, sign-in, sign-up, about, store tags, checkout) on a clean white OKLCH neutral palette; Inter Variable body + Instrument Serif display headings, Tailwind CSS utility classes; a slide-in cart drawer, a Fuse.js-powered full-screen search modal, a tabbed mega-menu (Latest Drops / EOL Products / Resources), mobile hamburger nav, and Keen Slider carousels; 49 webp/png product images vendored locally, compiled Tailwind CSS vendored as `assets/css/main.css`, no build step, fully offline | HTML, CSS, vanilla JS, Tailwind (compiled), Inter, Instrument Serif, Keen Slider, Fuse.js |
| [premium/lexingtonthemes/zeroindex](./templates/premium/lexingtonthemes/zeroindex/) | Pixel-faithful clone of Lexington Themes' "ZeroIndex" documentation and SaaS marketing template — a 14-page site (marketing home, sign-in, blog, docs getting-started/introduction and quick-start, docs components/accordion/alerts/badges/buttons/tabs/typography/wrappers, docs navigation/sidebar and sidebar-links, docs help/faq) on a white canvas with Geist + Geist Mono, an OKLCH sky-blue accent, and a two-panel layout (fixed left sidebar + scrollable content); three-way light/dark/system theme toggle (localStorage-persisted), vanilla JS accordions, tabs, search, copy buttons, TOC, and feedback widgets; no build step, fully offline | HTML, CSS, vanilla JS, Geist, Geist Mono |
| [premium/magic-ui/agent](./templates/premium/magic-ui/agent/) | Pixel-faithful clone of Magic UI's "SkyAgent" AI-agent SaaS landing page — a single long-scroll page on a light OKLCH canvas (#f8f9fb background, blue #2D6CFF accent) with self-hosted Geist Sans + Geist Mono, wrapped in a max-w-7xl frame with vertical border guides and section dividers; a sticky pill navbar with anchor nav and a light/dark theme toggle (persisted via localStorage), a centered hero with a rotating CSS globe over a soft blue glow, a logo strip, a bento feature grid (chat-bubble, integration orbit, calendar, task-list visuals), a centered dark testimonial quote, a four-step "Simple. Seamless. Smart." accordion, a "Built for Secure Growth" two-card section, a Monthly/Yearly pricing table (Free $0 / Startup $12↔$10 popular dark card / Enterprise $24↔$20), a three-column vertical-marquee testimonial wall, an FAQ accordion, a full-bleed blue CTA banner, and a four-column footer; IntersectionObserver scroll reveals, hover states, mobile hamburger menu; Geist fonts, avatars, and CTA background vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist Sans, Geist Mono |
| [blog](./templates/premium/magic-ui/blog/) | Pixel-faithful clone of the Magic UI Blog template — a 7-page editorial blog (a post-index home plus six article pages) on a shadcn/Tailwind neutral OKLCH design system with Geist Sans/Mono; a sticky backdrop-blur header with logo and a light/dark theme toggle (persisted in `localStorage`), an animated gradient `