An open-source gallery of web UI experiments generated with Claude (Fable 5) — landing pages, hero sections, GLSL shaders, design systems, animations, portfolios, and 3D/WebGL scenes. Every project is self-contained, ships its prompt, and includes a recorded demo. Browse the live directory at pulkitxm.com/claude-directory.
Built mostly with React, TypeScript, Vite, Tailwind CSS, Three.js, Framer Motion, and GSAP (plus plenty of framework-free HTML/CSS/JS) — a reference collection of copy-pasteable, AI-generated front-end components and templates for anyone exploring what Claude can build on the web.
Categories: Hero sections · Landing pages · Shaders · UI design systems · Components & UI · Portfolios · Animations & loaders · 3D & games · Templates
Each project folder includes the originating prompt as prompt.md, preserved alongside the generated code. Some prompts were inspired by or adapted from public prompt/design references, including cnemri's gist, motionsites.ai, lafys.com, designprompts.dev, 21st.dev, superdesign.dev, and landinghero.ai.
Heads up: every project here was generated with Claude Fable 5 — this whole repo is vibe coded. Use it with care: review the code, check dependencies, verify accessibility/responsiveness, and run the local project checks before shipping anything to production.
Got a cool experiment? Toss it in. No issues, no templates, no ceremony — just shoot a PR.
Only two things are non-negotiable:
prompt.md— the prompt you used to generate the project, dropped in the project folder.demo.mp4— a short screen recording of the thing actually working.
Beyond that, do whatever: any stack, any vibe, as long as your project lives in its own self-contained folder. Bonus points if you add a row to the table below, but no stress if you forget.
Once your demo.mp4 is in, generate its poster so the directory can show a sharp placeholder while the video loads (node scripts/generate-posters/generate-posters.mjs). This writes a poster.jpg next to the video and updates the root posters.json manifest — see scripts/generate-posters.
All PRs get reviewed and merged by Claude Opus, so don't be shy — if the prompt and demo are there, you're golden. 🤙
Projects are grouped by what they are. Each lives in its category folder (e.g. ./hero-sections/<project>/).
Hero sections (41)
| Project | Description | Stack |
|---|---|---|
| aethera-cinematic-hero | Cinematic hero for Aethera with video-driven visual treatment and headless verification | React, TypeScript, Vite, Tailwind CSS |
| ai-builder-dark-hero | Dark-mode hero section for an AI website builder with animated reveals and HLS video streaming | React, TypeScript, Vite, Tailwind CSS, Motion, hls.js, Lucide |
| altitude-index-h38 | Editorial expedition-outfitter bento hero ("Warm Cartography") on warm paper with an ember accent, parallax photo tiles, fullscreen menu, and a scrolling coordinate ticker | HTML, CSS, JavaScript, Space Grotesk |
| animated-text-rotate-hero | shadcn/ui animated hero integration with spring word-rotation, hosted in a midnight-teal "Spektr" trade-desk shell with a live ticker | React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Framer Motion, Lucide |
| bloom-liquid-glass-hero | Bloom hero experiment with floral imagery, liquid-glass styling, and generated visual assets | React, TypeScript, Vite, Tailwind CSS |
| cinematic-stream-hero | LUMIERE full-viewport streaming hero with looping cinematic background video | React, TypeScript, Vite, Tailwind CSS |
| codenest-hero | Dark coding-education hero for "CodeNest" with an HLS (Mux) video background, grid lines, central glow, and a liquid-glass floating card | React, TypeScript, Vite, Tailwind CSS, hls.js, Lucide, Vitest |
| convix-pr-agency-hero | Full-viewport hero for PR-agency SaaS "Convix Software" with a rounded-card layout, background video, and floating pill navbar | React, TypeScript, Vite, Tailwind CSS, Lucide |
| datacore-video-hero | Responsive full-screen hero with a purple palette and an opaque fullscreen video background | React, TypeScript, Vite, Tailwind CSS, Lucide |
| designpro-video-hero | Full-screen hero for product-design education platform "DesignPro" with a looping video background and animated shiny gradient heading | React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
| digital-epoch-hero | Rounded-card hero with looping video background, floating glass bottom navbar, and seamless CSS marquee logo scroller | React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide |
| equilibrium-liquid-glass-hero | Full-screen "Equilibrium" wellness hero with a liquid-glass UI over a looping background video | React, TypeScript, Vite, Tailwind CSS, Lucide |
| fearless-vision-hero | Full-screen hero with a background video, deep-purple accent, and Inter typography | React, JavaScript, Vite, Tailwind CSS, Framer Motion, Lucide |
| helix-vault-h55 | "Institutional Crypto Terminal" hero for Helix Vault — emerald blade of light, glass portfolio dashboard mockup with count-up balance, growing bar chart, live ticker and scan-line, all framework-free | HTML, CSS, JavaScript, DM Sans |
| ironclad-password-hero | Password-manager hero section for Ironclad with animated product-style presentation | React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
| kubric-hero-landing | Desktop-only dark hero for fictional studio "Kubric™" with a looping background video, an 8-layer progressive bottom blur, a self-drawing animated SVG logo, a character-by-character headline, and a video-ready reveal sequence | TanStack Start, React 19, Vite 7, Tailwind CSS v4 |
| mainframe-hero-landing | Full-screen hero landing page for a creative agency called "Mainframe" with custom Helvetica Now display fonts | React, TypeScript, Vite, Tailwind CSS |
| monocrit-studio-h27 | Interactive near-monochrome Swiss-brutalist studio hero with a cursor-following image card, magnetic headline letters, and movement-driven image cycling | HTML, CSS, JavaScript, Bricolage Grotesque |
| nexora-automation-hero | Single-viewport SaaS automation hero ("Nexora") with Instrument Serif / Inter type and Framer Motion | React, TypeScript, Vite, Tailwind CSS, Framer Motion, shadcn/ui, Lucide |
| noctis-cinematic-hero | NOCTIS full-screen dark cinematic hero with video background, nav, and timecode details | React, TypeScript, Vite, CSS |
| particle-hero | Night-sky particle-canvas hero with a clickable gold-mode invert toggle, rotating spotlights, and a radial-reveal headline | React, TypeScript, Vite, Tailwind CSS, Canvas 2D, shadcn/ui, Lucide |
| power-ai-hero | Full-screen dark AI hero with a JS-controlled fade-loop background video, headline, CTA, and logo marquee | React, TypeScript, Vite, Tailwind CSS, Geist Sans, Lucide |
| prisma-noir-h52 | "Spectral darkroom" creative-director hero with drifting screen-blended color blobs, a clipped rotating-word headline, cursor parallax, and a fullscreen discover menu with hover image tickers | HTML, CSS, JavaScript, Manrope, Titillium Web |
| rivr-defi-hero | DeFi dashboard hero for RIVR with glassmorphism, badge/cards, and verification script | React, TypeScript, Vite, Tailwind CSS |
| securify-data-hero | Full-screen hero section for a fictional data-security SaaS called securify | React, TypeScript, Vite, Tailwind CSS |
| sentinel-ai-hero | Full-screen dark hero for security company "Sentinel AI" with an embedded Spline 3D scene background | React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Spline |
| shape-landing-hero | shadcn integration of Kokonut UI's HeroGeometric — animated geometric shapes, gradient headline and a live props playground on a near-black canvas | React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide, shadcn/ui |
| skyelite-jet-hero | Premium private jet hero section with full-viewport video background and luxury UI treatment | React, TypeScript, Vite, Tailwind CSS |
| smart-prosthetics-hero | Single-page hero with a fullscreen video background and pill-style navbar for a smart-prosthetics concept | React, TypeScript, Vite, Tailwind CSS, Lucide |
| stellar-ai-landing-hero | "Stellar.ai" landing hero on a white background with staggered fade-in animations and Inter type | React, TypeScript, Vite, Tailwind CSS, Lucide |
| synex-wealth-hero | Editorial-minimal full-viewport hero for fictional wealth platform "Synex" on a warm paper background, with two photorealistic stones that reveal a cursor-following moss patch via a spring-driven radial mask, and a staggered blur-up load cascade | React 18, Vite, TypeScript, Tailwind CSS, Framer Motion, Lucide |
| taskly-liquid-glass-hero | High-fidelity "liquid glass" hero for Taskly with a sticky glass navbar and dual-column layout on a white gradient-glow background | React, Vite |
| toonhub-figurine-carousel | TOONHUB full-viewport character figurine carousel hero | React, TypeScript, Vite, Tailwind CSS, Lucide |
| transform-data-hero | Modern hero with a looping video background and a custom requestAnimationFrame fade system | React, TypeScript, Vite, Tailwind CSS |
| vanguard-hero-landing | Fullscreen hero landing page for the creative agency VANGUARD with looping background video | React, TypeScript, Vite, Tailwind CSS |
| vaultshield-hero | VaultShield hero experiment with security-product positioning and CLI/headless verification | React, TypeScript, Vite, Tailwind CSS |
| velorah-hero-landing | Velorah hero landing page built with a modern Tailwind/shadcn-style component approach | React, TypeScript, Vite, Tailwind CSS, shadcn/ui |
| verdant-advisory-h10 | Quiet-luxury advisory hero — oversized forest-green card, Hedvig serif headline, floating glass stat chip, infinite trust marquee, count-up stats and approach cards on a white canvas | HTML, CSS, Vanilla JS |
| wanderful-cinematic-hero | Full-viewport cinematic hero for travel brand "Wanderful" with GSAP animation and a custom display font | React, TypeScript, Vite, Tailwind CSS, GSAP, Lucide |
| woven-light-hero | Interactive hero with 50k cursor-reactive Three.js particles woven into a torus-knot tapestry, integrated as a shadcn-style component | React, TypeScript, Vite, Tailwind CSS, Three.js, Framer Motion |
| xero-encryption-hero | Single-page encryption-product hero for "Xero" with an animated icon pipeline and a pink-magenta gradient arc on a black page, written in plain CSS | React, TypeScript, Vite, CSS |
Landing pages (98)
| Project | Description | Stack |
|---|---|---|
| aegis-console-h39 | "Precision Grid" cybersecurity SaaS landing for "Aegis" — white/bone canvas with one electric-lime accent, a fading hairline grid hero, a live security-console product mockup (animated lime SVG chart that draws itself, counting threat stats, pulsing status nodes), feature grid, ink count-up metrics band, 01–03 how-it-works with alert-feed/risk-bar/playbook mockups, three-tier pricing, and a gridded final CTA | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| almond-hours-h65 | "Warm Clinical Editorial" dignified-care senior-living landing for "Almond Hours" — near-white paper with almond-ink neutrals and a butter-cream tint, a floating rounded mega-menu nav with flip hovers, an infinite photo marquee, a dual-headline hero with text-wipe reveal, a horizontal width-morphing programs accordion with layered image stacks, a healthcare bento grid, a single-open FAQ, a wipe-fill CTA banner, and a cursor-reveal giant wordmark | HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts |
| amber-foundry-h9 | Warm editorial-intelligence landing page for fictional enterprise-AI consultancy "Amber Foundry" — cream/amber/roasted-brown palette, animated canvas neural-network hero, auto-advancing interactive solutions panel, bento method grid, and a dark pricing flip | HTML, CSS, Vanilla JS, Canvas, vendored fonts |
| amberhaus-pet-atelier-h31 | "Amberhaus" warm-amber luxury pet-boutique landing — crisp white paper with a single amber-gold accent and butter-cream tints, Bricolage Grotesque display + Playfair italic flourishes, a crossfading triptych hero with parallax center panel, services+boutique bento, a horizontal-scroll founder story, vertical marquee testimonials, a jumping-type footer canvas, paw cursor, and a slide-up booking overlay | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| archway-summit-h21 | "Gallery Arch" tech-conference landing for "Archway Summit" — near-black editorial gallery framing headline speakers inside tall pastel museum arches (pink/blue/beige/yellow), grayscale-to-color portraits, mono schedule with Day 1/Day 2 toggle, FAQ accordion, and an inverted white final-CTA panel | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| asme-hero-landing | Full-screen dark Asme landing page with Mux/HLS-style video, liquid-glass navbar, and email-capture CTA | React, JavaScript, Vite, CSS |
| asme-liquid-glass-landing | Dark cinematic Asme single-page landing site with liquid-glass UI details | React, TypeScript, Vite, Tailwind CSS |
| astral-veil-h6 | Cosmic-nocturne SaaS landing for "Novela" — near-black canvas, violet/cobalt nebula glows, frosted glass, Playfair Display headlines, CSS starfield, drifting UI fragments, trust marquee, and a floating constellation of integration capsules | HTML, CSS, Vanilla JS |
| atelier-noir-h7 | "Maison Éclisse" — a quiet, editorial haute-couture fashion-house lookbook (Atelier Noir aesthetic) on an ink-on-bone palette with Cormorant Garamond serif display, full-bleed hero, rotating seal badge, alternating diptychs, a staggered product grid, an editorial banner, journal, and slide-in menu/search overlays | HTML, CSS, JavaScript, IntersectionObserver, self-hosted fonts |
| atelier-press-h51 | "Atelier Press" editorial paper-grid creative-workspace membership landing — warm cream (#FFFDF0) paper on near-black ink with a single vermilion (#E64E2A) accent, vendored Familjen Grotesk display + Arial body, a hairline modular grid with a 62/38 split hero (giant -0.06em headline + tall portrait photo over a full-bleed landscape band), a paused-on-hover keyword marquee, an indexed 2×2 spaces grid with nudging ↗ arrows, an underline-marked manifesto, a four-up stats band, three hairline membership plans, and an email-capture closer; IntersectionObserver reveal-ups, image hover scales, prefers-reduced-motion aware, fully offline | HTML, CSS, vanilla JS, Familjen Grotesk |
| aura-email-landing | Dark, cinematic landing page for "Aura", an AI-native email client, with fullscreen video, a shiny gradient headline, a macOS-style menu bar, and a liquid-glass inbox mockup | React, TypeScript, Vite, Tailwind CSS, Motion, Lucide, Supabase |
| auric-clinic-glow-h37 | "Auric" precision dermaceutical-clinic landing (Clinical Warmth aesthetic) — clay-terracotta on ivory-cream with Archivo, a floating pill nav, full-bleed glowing-skin hero with staggered word reveal, an overlapping three-column action grid, a clay marquee, signature-treatment cards, a count-up science split, a quiet testimonial, and a deep-clay CTA band | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| auroracast-hls-landing | Modern landing page with a full-screen HLS video background, glassmorphic navigation header, and bottom-left hero content | React, Vite, hls.js |
| azimuth-realty-engine-h36 | "High-Altitude Precision" real-estate marketing-engine landing for "Azimuth" — deep-navy mission-control palette with a single electric-cobalt accent, Bricolage Grotesque display + JetBrains Mono labels, split grayscale-to-color hero, floating pill navbar with hover mega-menu, bento ecosystem grid, horizontal-scroll property portfolio, cobalt method bento, and a scroll-triggered fanning stacked-card CTA | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| axion-studio-landing | Design agency landing page for Axion Studio with shader-based hero background and multi-section layout | React, TypeScript, Vite, Tailwind CSS, shaders, Lucide |
| axis-quotient-h30 | "Quant Brutalist Editorial" landing page for fictional quant-strategy firm Axis Quotient — ink-on-ivory with electric cobalt, animated point-grid hero canvas, colossal QUOTIENT wordmark, ticker marquee, capabilities accordion, count-up metrics, and toggleable engagement pricing | HTML, CSS, Vanilla JS, Canvas, SVG, vendored fonts |
| carbon-bloom-h95 | "Molten Paper" creative-agency landing for "Carbon Bloom" — bone-beige paper, pure ink-black, and a single molten-orange (#F43C00) accent, with vendored Space Grotesk display + Inter Tight body; a frosted pill navbar, a sticky-stacking two-panel hero (giant uppercase MARKET/SCALE headline + a layered hero image with a floating showreel card), giant 22s/34s infinite marquees, a two-tone philosophy statement, sticky-stacking dark service cards, a single-open FAQ accordion, an offset masonry work grid, hover-darkening article rows, and an orange footer block — paper-stacking beige/black/white sections with rounded top edges, directional IntersectionObserver reveals, prefers-reduced-motion aware, fully offline | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| cerulean-precision-collective-h67 | "Clinical Serenity" precision-medicine landing for "Cerulean Collective" — cool medical-blue (#0F4490) + soft-teal (#4AA9C5) on near-white with vendored Instrument Sans + Inter Tight, an ellipse-clipped full-bleed hero with floating glass trust chips, a three-column methodology grid with slide-in columns and a rotated-plate portrait, a 12-col specialties bento with hover image-zoom, a float-looping metrics band, and a black-bordered marquee-headed "Request Invitation" intake form over animated pulsing grid lines; per-character heading reveals, IntersectionObserver scroll reveals, prefers-reduced-motion aware, fully offline | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| cartwright-relocation-h47 | "Warm Artisan Logistics" white-glove relocation landing for "Cartwright & Co" — terracotta-on-cream editorial palette with a Fraunces italic serif accent, dual opposite-scrolling hero image tickers, a mega-menu glass navbar, partner marquee, soft service cards, a dark count-up stats band, a staggered three-step process timeline, an auto-cycling stacked testimonial deck, and a split contact panel with a working quote form | HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts |
| citron-atlas-h79 | "Phosphor Olive" enterprise growth-advisory landing for "Meridian & Voss" — a near-black boardroom aesthetic lit by one pale citron-lime accent (#F3FFC9) on warm charcoal-olive, with a pill nav + mega-menu, a 700px photo hero over a seamless capability marquee, an infinite client-logo strip with edge fades, snap-scrolling industry + case-study sliders, a cross-fading services accordion, count-up statistics, and a staggered methodology stage with a decorative curve; IntersectionObserver scroll reveals, prefers-reduced-motion aware, vendored Inter + imagery, fully offline | HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts |
| claywell-solene-h5 | Warm-clay editorial landing page for "Solène", a terracotta-and-cream longevity & precision-movement clinic, with an asymmetric split hero, word-by-word heading reveals, zig-zag scroll sections, an infinite marquee, and a dark science band | HTML, CSS, JavaScript, Archivo |
| cobalt-repairworks-h78 | "Workbench Editorial" electronics-repair landing for "RepairWorks" — warm paper-cream canvas with one confident cobalt accent, tight Host Grotesk display + IBM Plex Mono labels, square-glyph logo marks, a left-aligned hero with a "what we fix" device-card grid, a hover-pausing brand marquee, a 2-up services grid with mono spec ticks and prices, a 3×2 benefits grid, a tinted identity split, a 4-up image/quote testimonial grid, a 2-up FAQ, and a panelled final CTA; IntersectionObserver staggered scroll reveals, scroll-aware header, prefers-reduced-motion aware, fully offline | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| concrete-bazaar-h87 | "Brutalist Retail Editorial" e-commerce landing for "Concrete Bazaar", a D2C Indian fashion label — warm concrete-beige canvas, near-black ink and one loud vermilion-orange accent, vendored Poppins, a sticky blur nav with category dropdown/search/icon-badges, a two-column hero with a floating orange offer block, seamless category + stats marquees, an 8-card bestsellers grid with hover-zoom imagery and working add-to-cart (live cart badge), a dark bank/UPI/first-order offers band, a dot-textured orange festive campaign, a 4-up trust row, a live 6-digit pincode delivery checker, a WhatsApp support CTA + floating FAB, review cards, and a newsletter footer with payment pills; IntersectionObserver scroll reveals, slide-up mobile menu, prefers-reduced-motion aware, fully offline | HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts |
| crimson-cut-studio-h72 | "Warm-Paper Viral Studio" landing for "Crimson Cut", a short-form video-editing agency — warm off-white paper canvas, pine-ink panels and one loud crimson accent, a floating pill nav, a centered hero with an inline rotated editor-palette sticker, staggered grayscale-to-color 9:16 video cards, a 2×2 services grid with rotating decorative shape clusters, a dark bento stats band, two-up case studies, an exclusive FAQ accordion, three pricing tiers, a seamless CSS testimonial marquee, and a split final-CTA panel; IntersectionObserver scroll reveals, vendored Manrope + imagery, fully offline | HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts |
| design-rocket-email | Email-style marketing landing page for a "Design Rocket Certificates" AI leadership course | React, TypeScript, Vite, Tailwind CSS, Lucide |
| dhara-heritage-edit-h88 | "Soft Heritage Edit" modern-Indian fashion storefront for "Dhara" — a warm off-white canvas of soft dusty-pastel color blocks (dusty rose, bone cream, mauve) anchored by deep pine green and a single antique-gold accent, with a sticky blurred header, a color-block masonry hero pairing an auto-fading 3-image slideshow with a giant light-weight Manrope headline / philosophy CTA / impact-stat blocks, a 3-up category showcase, a client-rendered 8-product "Weekly Edit" grid with slide-up quick-add bars, a payments band, a large-radius "Dhara Circle" membership panel, a pine-green artisan spotlight with an overlapping quote card, value-prop blocks, and a four-column footer; IntersectionObserver scroll reveals, slide-in mobile menu, prefers-reduced-motion aware, vendored Manrope + imagery, fully offline | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| dot-daily-calm-landing | "Dot." calm-living landing page with a glassmorphic pill navbar, typing messages, and a Nokia-style accent font | React 19, Vite, Tailwind CSS v4, Motion |
| ember-quietude-h26 | Warm paper-calm editorial landing page for focus-first productivity app "Lumo" (Ember Quietude aesthetic) — stone + single ember-orange accent, Instrument Serif display, floating pill nav with hover mega-menu, a fully hand-built HTML/CSS dashboard mockup (sidebar, dark focus timer, tasks, floating AI card), bento planning grid, organize cards, and a monthly/annual pricing toggle | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| evergreen-ledger-h94 | "Evergreen Ledger" forward-thinking venture-capital landing for "Meridian Grove" — deep pine/teal ink and a luminous citron-lime accent on warm bone paper, Inter display + Space Mono labels, a full-viewport hero over a darkened cityscape with overlapping white/black/lime stat cards, a sticky-stacking 01–03 capital-services deck, tilted "ethos" cards flanking a lifted center photo, a grayscale "why partner" image band, a strategic-intelligence article grid, and a pine final-CTA + newsletter footer | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| fernhollow-pet-wellness-h68 | "Forest Apothecary" pet-wellness landing for "Fernhollow" — bone-cream canvas, fern-green ink, and a warm clay accent with Fraunces display type; centered hero with an auto-scrolling photo marquee, count-up stat band, ken-burns showreel panel, split service cards, dark process ritual with grayscale-to-color photos, botanical product grid, single-open FAQ accordion, and an ink-green newsletter CTA with a success state | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| forma-video-landing | Full-screen video-background landing page with rounded card layout and contact form | React, TypeScript, Vite, Tailwind CSS, Lucide |
| freightleaf-clean-haul-h80 | "Clean Haul" sustainable-freight landing for "FreightLeaf" — warm paper-gray canvas with charcoal night-highway panels and an electric lime accent; floating pill nav, cinematic ken-burns hero with a floating dashed-divider stat card, staggered mission tiles, sector card grid, dark AI-tech section with count-up metrics, infinite testimonial marquee, and a full-bleed final CTA | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| graft-modular-h93 | "Matcha Industrial" landing for fictional off-site fabrication firm "Graft Modular" — paper-white Swiss-industrial canvas with sharp zero-radius corners, 1px slate hairlines, and a single matcha-latte green accent; Syne + Inter Tight, a ken-burns hero with a slide-up info card and clip-path highlighter headline plus a capability marquee, a 9-tile numbered sub-systems grid, alternating zig-zag spec rows on rotating backing blocks, a count-up stats band, an 01–04 process row with ghost numbers, and a matcha CTA with a working inquiry form | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| groundai-landing | Single-page landing for interior-design AI product "GroundAI" with a video hero, expanding glass nav pill, brand marquee, and three animated feature cards (style carousel, morphing chat, adaptable list) | TanStack Start, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide |
| gridwright-h48 | "Gridwright" neo-structuralist coding-SaaS landing page on a ruled blueprint grid — paper canvas with diagonal hatch and full-height vertical column rules, structural green accent, Space Grotesk + Space Mono, hard offset shadows, a live-typing terminal hero, count-up stats, asymmetric feature/pricing grids, and a CSS envelope that opens to reveal a postcard | HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted fonts |
| gridframe-precision-h74 | "Precision Grid Studio" enterprise growth-systems landing for "Meridyne" — a Swiss engineering dossier on warm paper, deep forest-green + butter-cream accents, hairline-ruled cells with registration "plus" crosshair markers straddling every frame corner, Inter Tight throughout, a celled nav with flip-up hover links and a hover mega-menu, a cream testimonial-card hero with overlapping portraits, an infinite logo marquee, numbered strategy steps, a four-cell capabilities band, count-up impact stats, a single-open FAQ accordion, and a solid-green CTA panel; scroll reveals and fully offline | HTML, CSS, Vanilla JS, SVG, IntersectionObserver, self-hosted fonts |
| grove-kitchen-fresh-h70 | "Forest Deli" fresh dog-food D2C landing for "Grove Kitchen" — warm cream paper with forest-green + terracotta accents and a faint kraft-paper grain, Fraunces display serif (italic emphasis) over DM Sans, a crossfading scrim hero with a popup menu card, a dashed-badge trust strip, a six-recipe catalog with add-to-box buttons, a serif marquee ticker, a 2×2 why-fresh bento with a 200°F stat chip, numbered how-it-works steps, monogram testimonials, an accordion FAQ, and a bouncing "FRESH." footer canvas with an overlapping contact card | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| halcyon-mesh-h56 | "Obsidian Control Plane" autonomous-ops SaaS landing for "Halcyon Mesh" — near-black engineering canvas under a persistent dashed grid, an aurora teal→violet hero glow, Space Grotesk + Inter + JetBrains Mono, a hand-built "Control Mesh" dashboard mockup (sidebar, live appending execution log, count-up metrics, audit list), hover mega-menu, text-roll buttons, edge-masked logo marquee, animated SVG node-graph feature card, numbered workflow, stats band, three-tier pricing, and a gridded aurora CTA; cursor-reactive glow, scroll reveals, fully offline | HTML, CSS, Vanilla JS, SVG, IntersectionObserver, self-hosted fonts |
| harbour-hearth-h64 | "Warm Sanctuary" compassionate senior-living landing page for fictional boutique care community "Harbour & Hearth" — sun-warmed oat-cream canvas with a single burnt-terracotta accent and cocoa-ink dark sections, Inter Tight, a floating glass pill navbar, a full-viewport scrim hero with a glass feature card, an overlapping about card with fanned polaroid thumbnails, alternating care/service rows, a count-up stats band, an infinite values marquee, a snap testimonial slider, a team grid, and a right-sliding mobile overlay | HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted fonts |
| hearthwell-homeware-h71 | "Marmalade Editorial" homeware essentials store landing for fictional D2C brand "Hearthwell" — warm grey paper canvas with a single saturated marmalade-orange accent, Fraunces display serif (italic emphasis) over Inter, a floating glass pill navbar, a centered hero with a 3-slide cross-fade image frame plus an overlaid "featured item" card and clickable slide dots, a pausable value-prop marquee, tall category cards with zoom-on-hover, an 8-item bestseller grid with badges, a 3-slide auto-rotating editorial split, a starred testimonial band, an ink newsletter card with inline validation + success state, and a multi-column footer; IntersectionObserver scroll reveals, reduced-motion aware, fully offline | HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted fonts |
| helix-strata-h76 | "Deep-Teal Architectural" landing page for fictional business-infrastructure consultancy "Helix Strata" — nocturnal teal canvas alternating with bone-cream monograph sections, a single periwinkle-lavender accent, vendored Inter, a top-aligned hero with a rounded photo and two floating data widgets, a 4-up stat row, a hover-driven service switcher that cross-fades image + copy, a prev/next testimonial carousel, a 3-up insights grid, and a giant fade-in wordmark CTA; IntersectionObserver scroll reveals, fully offline | HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted Inter |
| ink-vermilion-personal-brand-h23 | "Ink & Vermilion" editorial personal-brand landing page for fictional marketing consultant "Marlowe Vane" — warm paper canvas, single vermillion accent, Playfair italic emphasis with hand-drawn SVG scribbles/stars/arrows, a rotated red marquee strip, scroll-reveal sections, a dark gallery band, grayscale-to-color imagery, and fake-submit contact + newsletter forms | HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted fonts |
| kairos-academy-h0 | Warm editorial-ember landing page for "Kairos Academy", a competitive-exam coaching institute, with a split-tone hero, floating exam pill tags, count-up stats, program rows, subject cards, a four-phase method grid, auto-rotating testimonials, and an accordion FAQ | HTML, CSS, Vanilla JS |
| lantern-broth-midnight-ramen-h8 | Warm modular-bento landing page for a late-night Japanese ramen bar "Lantern Broth", with terracotta/mustard/teal tiles, Oswald + DM Sans, scroll-reveal animations, drifting steam, and a vanilla-JS testimonial carousel | HTML, CSS, vanilla JavaScript |
| lantern-loft-tutoring-h1 | Warm "paper studio" home-tutoring landing page for Lantern & Loft with a Fraunces/Jakarta editorial hero, offset cards, marquee, animated stat counters, tilted cards, and stacked program rows | HTML, CSS, JavaScript |
| lumen-grove-h63 | "Verdant Apothecary" botanical-bathhouse & forest-spa landing page for "Lumen Grove" — warm bone canvas with deep pine ink and a single living-chartreuse accent, Fraunces serif + Inter, a rounded split hero card ("Steep. Soften. Return."), avatar social-proof, a seamless staggered photo marquee, an accordion-driven cross-fading rituals panel, a scrim testimonial, three-tier membership pricing, a forest newsletter panel, scroll-reveal, and a trailing chartreuse cursor | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| lumina-maternite-h2 | "Lumina Maternité" — a calm, editorial maternity & women's-health sanctuary landing page on a bone/moss/blush palette with Fraunces + Geist, drifting hero blobs, an auto-scrolling image marquee, sticky-stacking journey cards, an interactive packages selector, FAQ accordion, and a booking form | HTML, CSS, vanilla JavaScript, IntersectionObserver, self-hosted fonts |
| lumen-launch-h44 | "Periwinkle Aurora" landing page for fictional AI product-launch SaaS "Lumen Launch" — lavender/periwinkle aurora-blur motif on crisp white with Outfit + DM Sans, a div-built browser/dashboard hero mockup, infinite logo & testimonial marquees, animated step illustrations, dark testimonial theatre, working monthly/yearly pricing toggle, and a FAQ accordion | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| lumen-vector-h92 | "Electric Brutalism" creative-agency landing for "Lumen Vector" — a midnight-indigo hero that explodes into candy-pastel panels, Anton poster type + Geist, floating glossy tag-pills with soft glows, a giant multi-color headline with a glass-ringed CTA, seamless logo marquee, six pastel service cards, a fan-out methodology card deck on scroll, scroll-linked testimonial parallax, two-tier pricing on a blue panel, and a FAQ accordion | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| mentality-landing | MENTALITY landing page with video hero, glassmorphic navbar, and animated mobile drawer | React, TypeScript, Vite, Tailwind CSS, Motion |
| meridian-grid-systems-h81 | "Warm Brutalist Grid" intelligent-automation consultancy landing for "Meridian®" — paper-cream canvas organised by hairline rules and flat color blocks (electric green + cobalt blue + ink), Space Grotesk + Inter, a split photo/headline hero with a frosted live-status panel, a ghosted logo marquee, a hairline about grid, count-up stats, a springy staggered 01–04 process row with blend-tinted photos, a working monthly/annual pricing toggle, and a hard-shadow contact form | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| meridian-precision-clinic-h35 | "Architectural Clinical Editorial" landing page for bespoke precision-medicine clinic "Meridian" — meridian-navy and warm-bone with whisper-quiet brass, Fraunces serif display + Inter, split full-viewport hero with a sliding navy panel, infinite credential marquee, hairline-divided discipline grid that inverts on hover, numbered method, and an underline-only contact form | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| mindloop-mono-landing | Pure-black monochrome newsletter/content landing page for Mindloop | React, TypeScript, Vite, Tailwind CSS, shadcn-style UI |
| monolith-grid-atelier-h59 | "Grid Monument" Swiss-modernist landing page for bespoke spatial-design studio "Monolith" — bone-white paper, near-black ink, warm sandstone accent, Space Grotesk + Playfair italic, a mix-blend-difference header, full-viewport grayscale hero ruled by a visible structural grid, modular ethos/stats grid with a rotating SVG seal, 3D flip-card portfolio, and floating-label contact form | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| neuralyn-dark-landing | Dark landing page for analytics-dashboard SaaS "Neuralyn" with Framer Motion and shadcn/ui components | React, TypeScript, Vite, Tailwind CSS, Framer Motion, shadcn/ui, Lucide |
| nhm-paleontology-landing | Paleontology-themed museum landing page with Inter / JetBrains Mono typography | React 19, Vite 6, Tailwind CSS v4, Motion, Lucide |
| noctis-aurum-h69 | "Obsidian & Champagne" fine-jewelry maison landing page (Noctis Aurum, est. 1989) — near-black obsidian and muted champagne gold over warm pearl, Cormorant Garamond serif display + Inter, a 50/50 hero with a slow cross-fade slideshow and floating glass "current focus" card, gold-ringed circular category medallions, an infinite serif marquee, a quick-add product grid, a dark Héritage feature, a men's strip, a bespoke-atelier split, and IntersectionObserver scroll reveals | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| obsidian-lacquer-h57 | "Obsidian Lacquer" cinematic automotive detailing-studio landing — pure-black canvas with a scalpel of vermilion red, Bricolage Grotesque display + Playfair italic accents + Inter Tight, a full-viewport ken-burns/pointer-parallax hero with stats strip, an asymmetric 12-col services grid, hover-reveal 01–03 process cards, testimonials, a snap-scroll before/after gallery with arrow nav, a monthly/yearly pricing toggle, and IntersectionObserver scroll reveals | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| obsidian-meridian-h85 | "Cinematic Brutalist Noir" monolithic luxury real-estate & architecture landing for "Obsidian Meridian" — a true-black canvas with one whisper of warm brass, condensed Oswald display, a per-letter wordmark reveal, a glass pill nav, an asymmetric manifesto, a full-bleed ken-burns cinematic hero, a vertically-staggered selected-works grid with brass-inverting year badges, a numbered Protocol band with an offset-framed portrait, a hairline stats strip that counts up on view, a minimal underline inquiry form, and IntersectionObserver scroll reveals | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| ochre-stone-studio-h11 | Warm editorial landing page for a bespoke interior-architecture studio, with a diagonal cutout hero, auto-rotating curation card, bento work grid, and scattered freefall process cards | HTML, CSS, JavaScript |
| orbital-frequency-summit-h22 | "Deep Signal" landing page for a fictional deep-space signals & aerospace-software summit "Orbital Frequency" — observatory-dark void with amber-gold/signal-green accents, Oswald condensed display type, canvas starfield, rotating orbital rings + radar-sweep hero, telemetry strip, mission timeline, floating-beacon pricing passes, and a scroll-tracking signal bar | HTML, CSS, Vanilla JS, Canvas, self-hosted fonts |
| orbis-nft-landing | Dark, space-themed NFT landing page "Orbis.nft" with CloudFront video backgrounds and liquid-glass UI | React, TypeScript, Vite, Tailwind CSS, Lucide |
| paper-circuit-agentic-saas-h16 | "Paper Circuit" — a bright, blueprint-precise light-mode SaaS landing for autonomous-outbound product "Drift": cool off-white dot-grid canvas, Bricolage Grotesque display + Inter Tight + JetBrains Mono, indigo/magenta color-as-wiring, an auto-looping hero icon belt, a floating product mockup (sidebar, metrics, interactive node canvas with animated dashed wires + live email-draft panel) that does mouse-driven 3D parallax, bento features (enrichment flow, hover bar chart, dark agent library, hover-revealed code terminal), portrait testimonial cards, an enterprise governance/YAML block, an indigo CTA strip with a live flipping counter, and a footer with a cursor-spotlight wordmark; all fonts and images vendored, fully offline | HTML, CSS, vanilla JS, SVG, Bricolage Grotesque, Inter Tight, JetBrains Mono |
| pelmatech-health-companion | Pixel-faithful "Pelmatech" health-companion landing with a full-bleed hero, a hover-driven team carousel, a custom-gridline benefits grid, uniform CSS-zoom responsive scaling, and blur-up / fade-up / clip-path animation primitives | React, TanStack Start, TypeScript, Tailwind CSS v4, shadcn/ui, Motion, Lucide |
| prisma-landing | Cinematic landing page for the creative studio PRISMA with dark, moody, warm cream palette | React, TypeScript, Vite, Tailwind CSS, Framer Motion |
| riso-rebel-fest-h20 | Floating-pill neo-brutalist landing page for fictional design conference "Riso Rebel Fest" — warm off-white canvas, oversized riso-color bento cards with animated motifs, chunky Shrikhand display serif, grayscale-to-color speaker grid, tiered tickets, and scroll-reveal | HTML, CSS, Vanilla JS, vendored fonts |
| saaj-heritage-bazaar-h90 | "Heritage Bazaar Editorial" D2C landing for the Indian solid-wood furniture house Saaj Heritage — a warm cream/paper canvas with a burnt-sienna terracotta accent, Inter Tight display + Playfair Display italic, an oversized "Heritage Living" hero with an angled clip-path image cutout and an auto-rotating floating product card, a 5-up category row, an 8-product bestseller grid with slide-up View Product bars and INR pricing, a values strip, testimonials, a stroke-to-fill numbered craft journey, a sienna consultation CTA with a validated callback form, scroll-reveal, header shrink, and a slide-in mobile menu | HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts |
| sencha-atelier-h12 | Wabi-editorial landing page for "Sencha Atelier", a ceremonial-matcha tea house — oversized Fraunces serif hero on warm paper, flush rounded showcase cards, editorial menu rows, count-up stats ribbon with marquee, and an asymmetric gallery | HTML, CSS, Vanilla JS, IntersectionObserver, Fraunces, Inter Tight |
| sentinel-meridian-h77 | "Cold War Dossier" sovereign-intelligence advisory landing for Sentinel Meridian — near-black ink with a steel-cyan accent and a single warning-amber signal color, a blueprint grid and grain overlay, a Forum serif display, a live classified dossier strip (ticking UTC clock + blinking LIVE dot), a Ken-Burns grayscale hero with mask-reveal headline and a scrolling mono intelligence-feed ticker, a numbered mandate column with a frosted pull-quote, hairline-split capability cards, a connected three-step method, count-up stats, and an encrypted final CTA | HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts |
| slate-stone-architectural-h73 | "Gallery Minimalism" architectural real-estate advisory landing for Slate & Stone (principal Elias Morand) — warm linen paper, near-black ink panels, a single oxide-rust accent, condensed uppercase Familjen Grotesk display on Inter, an asymmetric 62.7/37.3 hairline-ruled grid reused across hero, principal bio, residences and a dark advisory panel, with a clip-reveal hero intro, count-up stats, IntersectionObserver scroll reveals, image hover-scales, a full-screen mobile menu, and a reduced-motion fallback; fonts and architectural photography vendored locally, fully offline | HTML, CSS, Vanilla JS, IntersectionObserver, Familjen Grotesk, Inter |
| slow-roast-atelier-h84 | "Quiet Pastel Block-Grid" artisan coffee roastery & micro-bakery landing for Slow Roast Atelier — a calm gallery-like editorial built entirely from edge-to-edge flat dusty-pastel panels (rose/cream/lilac) divided by paper gutters, oversized low-contrast Manrope display type on Inter Tight, one grounding deep-pine-green accent, an asymmetric 740/380/324 hero block-row with a desaturate→color café photo strip and a green "View Menu" CTA bar, a three-cell menu preview with hairline price rows, a philosophy split with a circular "Direct Trade" badge, a three-card locations row, and a "Stay Grounded" subscribe footer; IntersectionObserver scroll reveals, slide-in mobile menu, vendored fonts + imagery, fully offline | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| snip-and-snout-grooming-h18 | "Brutalist Kennel Club" pet-grooming studio landing for Snip & Snout — warm neo-brutalism with thick ink outlines, hard offset shadows, Archivo black display type, a signature oversized rounded hero-photo corner, a fanned service-card deck, dual infinite testimonial rows, and brutal-press buttons | HTML, CSS, Vanilla JS, IntersectionObserver, vendored fonts |
| solace-wellness-grid-h13 | "Quiet luxury wellness" editorial landing page for the holistic studio Solace — an asymmetric bento color-block grid (oat/dusty-rose/lilac/sage panels) with oversized light Manrope display type, a desaturated→color image strip, looping keyword marquee, practices bento, sage stats band, guide portraits, and a reserve form; self-hosted fonts, scroll-reveal, slide-in mobile menu | HTML, CSS, JavaScript, IntersectionObserver, self-hosted fonts |
| space-voyage-landing | Cinematic space-travel landing page with two video-backed full-height sections and liquid-glass UI | React via CDN, Tailwind CDN, Framer Motion, single-page HTML |
| spectral-orbit-novascale-h17 | "Spectral Orbit" near-black cosmic paid-ads growth agency (NovaScale) landing page built around slowly rotating chromatic conic-gradient nebula orbs blooming behind crisp content, a single electric coral-red (#ff4838) accent over a monochrome void, and Instrument Serif italic emphasis on Inter; sections cover a full-viewport orb hero, opposite-direction trust marquees, an infinite pause-on-hover testimonials carousel with metric footers, a glowing about panel, a services grid with corner orbs plus a coral TikTok feature card, an Other-Agencies-vs-NovaScale comparison with a counter-rotating warm orb, a 3-step process with hover-glow cards, a results stat panel with hover-lift tiles and a performance-guarantee callout, a single-open FAQ accordion, an orb final CTA, and a newsletter footer; IntersectionObserver fade-up reveals, animated hamburger mobile nav, and a prefers-reduced-motion fallback; fonts and inline-SVG avatars vendored locally, fully offline | HTML, CSS, vanilla JS, SVG, Inter, Instrument Serif |
| synergeus-landing | Pixel-faithful dark AI-fintech "Synergeus" landing with three scroll-revealed sections — an HLS video hero with a 3D-tilt story card, an analytics card with count-ups, and an AI-intelligence trio (NL queries, wipe-reveal chart, animated SVG node tree) | React 18, Vite, TypeScript, Tailwind CSS, Framer Motion, hls.js, Lucide, React Router |
| terra-craft-editorial-h58 | "Quiet Craft Editorial" landing page for the artisan furniture house Terra Studio — a warm cream paper canvas with IBM Plex Serif display type, a two-column hero whose charcoal panel holds three overlapping mat-board image cards with mouse-parallax + hover-lift, an infinite materials marquee, a framed product collection grid, an atelier philosophy split, a count-up stats band, and a swap-to-success newsletter CTA; self-hosted fonts, scroll-reveal, mobile menu | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| terra-siena-atelier-h14 | "Terra Siena" handcrafted-ceramics atelier landing ("Sun-Fired Earth" aesthetic) on a terracotta/ochre/bone palette with Fraunces serif + Inter Tight, a marquee hero, a scroll-triggered fanned card deck that spreads into collections, 3D flip cards, a testimonial grid, an accordion FAQ, and a marquee footer | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| tide-table-h82 | "Tide to Table" coastal seafood & oyster bar landing page (Tide & Table) — a salt-washed cream canvas with deep-navy ink and a seafoam accent, Playfair Display serif + Inter Tight, five rhythmic multiply-blended hero image strips that rise on load, a slow Ken-Burns philosophy split, a dark "Seasonal Harvest" menu list with rotated image cards that pop and straighten on hover, an overlapping editorial atmosphere card, a glassy split reservation form with inline confirmation, a full-screen menu overlay, and a paper-grain overlay | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| usd-halo-landing | Premium fintech-style landing page for the stablecoin product "Halo / USD Halo" with a custom logo mark and TT Norms Pro type | React, TypeScript, Vite, Tailwind CSS, Lucide |
| valmax-photography-landing | Single-page dark recreation of the "Valmax" photography studio landing with an orchestrated intro sequence, a lime accent, oklch design tokens, and photo-driven sections | TanStack Start, React 19, TypeScript, Tailwind CSS v4, shadcn/ui, Framer Motion, Lucide |
| vantix-precision-medicine-h34 | "Clinical Obsidian" precision-medicine institute landing page (Vantix) — deep obsidian-navy canvas with electric cyan-blue accents, Bricolage Grotesque display type and JetBrains Mono telemetry labels, an asymmetric split hero with count-up metrics, grayscale-to-color clinical photography, a pulsing rapid-response strip, capabilities/platform/specialists sections, and a consultation form | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| vellum-apothecary-archive-h32 | "Archival Apothecary" wellness-sanctuary landing page (Vellum & Verdigris) on a vintage sepia vellum/paper palette with Playfair Display + Instrument Serif + Courier Prime, a paper-grain overlay, a load-time cream curtain reveal over a sepia hero photo, scroll fade-rise reveals, hairline catalogue rules, a numbered philosophy grid, a coded rituals gallery, an ink "Memoirs" testimonials band, and a custom hollow-ring cursor | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| vellum-atelier-h33 | "Vellum" luxury hair atelier landing ("Sculptural Serif Atelier" aesthetic) on a warm paper/ink/gold palette with Unbounded + Figtree + Sacramento, a character-by-character animated hero wordmark, extreme top-rounded image panels, a dark service menu with cursor-tracked hover previews, an offset 3-up portfolio grid, and scroll-reveal motion | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| velvet-vellum-agency-h4 | "Velvet precision" marketing-agency landing page (Velvet Vellum) with an oxblood-maroon hero panel, giant Josefin Sans display type, a bento case-study grid, auto-rotating testimonials, and a faux-3D perspective floor-grid footer | HTML, CSS, Vanilla JS, IntersectionObserver |
| verdant-atelier-h40 | "Forest & Gold" product-photography studio landing page (Verdant Atelier / Maya Kapoor) on deep forest-green with museum-gold + deep-orange accents, Playfair Display + Inter, signature arch-masked still-life imagery, a slow-spinning "View Projects" badge, a 12-column asymmetric editorial hero, dual infinite marquees, staggered work/services galleries, and a hamburger mobile overlay | HTML, CSS, Vanilla JS, IntersectionObserver, SVG, self-hosted fonts |
| verdant-pledge-bento-h49 | "Soft Editorial Bento" conservation-collective landing page (Verdant Pledge) on a white canvas of 40px rounded bento cards with a single electric-lime accent and Inter Tight, featuring a 5/7 lime+photo hero with floating glass map markers, an editorial missions table with rotated hover previews, image problem cards, a dark impact band with count-up stats, and scroll-reveal motion | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| verdant-salon-h91 | "Heritage Verdant" elite social-strategy agency landing page (Verdant Salon) on a warm paper-beige canvas with midnight-green panels and cocoa-brown ink, Playfair Display + Inter Tight, a centered oversized serif hero with staggered portrait cards that reveal via tiled grid-demask animation, count-up impact stats, hairline service rows with floating rotated hover previews, an alternating heritage gallery, a green inquiry panel with a faked submit, and scroll-reveal motion | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| verdant-spine-clinic-h66 | "Clinical Calm" precision-chiropractic & movement-science clinic landing page (Verdant Spine) on a warm grey-green paper canvas with a single sage + deep-forest palette, Schibsted Grotesk + Inter, a split editorial hero with a frosted-glass appointment card floating over the clinic image, gradient stat cards, a deep-forest services panel with an infinite giant-type marquee and zoom-on-hover service cards, a sticky numbered "how it works" track, a glass-quote testimonial carousel, a 3-up journal grid, and scroll-reveal motion | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| verdigris-trail-h50 | "Architectural Trail" landing page for fictional architecture studio "Verdigris Archi." — fennel-pastel canvas with a single luminous mint accent, Playfair Display serif + Inter Tight, a fixed vertical hairline "trail" with a travelling mint comet, a circular Begin-Trail hero CTA, a pillar marquee, grayscale-to-color brutalist concrete photography, numbered principle columns, a staggered project gallery, an ink count-up stats band, and a pill CTA | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| vermillion-cram-h3 | Loud neo-brutalist board-prep academy landing page in vermillion orange + ink navy, with hard 2px borders, offset brutal shadows, a scrolling ticker, an overlapping dashboard stat panel, count-up stats, dual testimonial marquees, and a trial-booking form | HTML, CSS, Vanilla JS |
| vermillion-table-h83 | "Culinary Architecture" premium food-delivery landing page (Vermillion Table) on a pale-vanilla canvas with a sinopia red-orange + Caribbean-teal duotone, vendored Questrial type, oversized ultra-tight display headlines, rounded modular "island" cards, a full-bleed gourmet hero with a frosted Dish-of-the-Week card, zoom-on-hover category cards with a teal→red-orange tint shift, a four-phase "Logistics of Luxury" process grid, a floating phone app-download split, and IntersectionObserver scroll-reveal | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| viktor-oddy-landing | Single-page landing for creative design studio "Viktor Oddy" with custom PP Neue Montreal / PP Mondwest fonts and staggered animations | React, TypeScript, Vite, Tailwind CSS, Lucide |
| voltaic-grid-advisory-h75 | "Putty & Voltage" strategic-advisory landing on a warm putty-grey canvas built from large rounded tiles, Host Grotesk + Inter, one electric-lime accent over soft pastel cards, a golden-hour photo hero with social-proof avatars, a 3-up stat grid, a sticky stacking services deck in lavender/yellow/pink/mint, a lavender testimonial panel, an expanding case-study list, an infinite masked insights ticker, a lime CTA, scroll-reveal motion and a mobile dropdown nav | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| voltic-showroom-h89 | "Electric Stone" premium offline-electronics experience-center landing (Voltic) — a warm stone canvas with near-black ink and a single electric-lime accent, self-hosted Inter, a framed split hero with the stacked touch./feel./choose. headline and lime terminal dots, a floating pill nav, an infinite pausable demo-product marquee, a 4-up zoom-on-hover Curated Zones grid, an interactive accordion that cross-fades a paired image, an ink "Bestseller" pricing-deal trio, a lime WhatsApp/Call CTA band, an inertial lime cursor and a slide-in mobile menu | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| voltframe-dev-h29 | "Bracketed Voltage" developer-portfolio landing on a near-black stage with one electric-yellow accent, a hairline framed hero box with glowing corner nodes, hover-yellow title words, floating particles, pulsing orbs, scroll-revealed skills/work/testimonials, and a mobile slide-in menu | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
| voltline-automation-h60 | "Bone & Volt" industrial AI-automation landing on a warm off-white canvas with graphite ink and a single electric-lime accent, Space Grotesk + JetBrains Mono, a pure-CSS orbiting 3D cube rig with a glowing lime core, a randomized pixel-fill nav button, starfield-reveal CTAs, a count-up stats strip, a 3-card solutions grid, and a dark starfield mission band | HTML, CSS, Vanilla JS, IntersectionObserver, CSS 3D transforms, self-hosted fonts |
| wayfare-expedition-journal-h86 | "Expedition Journal" boutique-travel landing page (Wayfare) — a warm aged-paper canvas with espresso ink and clay/moss/ochre field-notebook accents, Fraunces serif + Inter Tight, a dark photographic hero with parallax, a polaroid coordinate tag, a "Now Boarding" stamp and a floating trip-finder card, a partner marquee, a manifesto split with count-up stats, a chip-filterable expedition card grid, a numbered how-it-works, a horizontally-scrolling guides rail, a rotating dark testimonial, and a photo-backed final CTA with a ghosted wordmark footer | HTML, CSS, Vanilla JS, IntersectionObserver, self-hosted fonts |
Animations & loaders (12)
| Project | Description | Stack |
|---|---|---|
| apex-scroll-hero | Apple-product-page-style "Apex" hero whose 5-second F1 sunset film is scroll-scrubbed full-screen (scroll drives video.currentTime) with a synced speed/gear telemetry HUD |
Next.js 16, React 19, TypeScript, Tailwind CSS v4 |
| bags-editorial-collage | Three-section animated bags landing — a warm cream editorial sticker-collage hero, a scroll-driven unfolding-envelope collection stage, and an orbiting "perfect match" field, tied together by glowing serif accent words | React, TypeScript, Vite, Tailwind CSS, Framer Motion |
| bloom-nested-squares | The shadcn "Bloom" NestedSquares component (25 violet-gradient squares scaling and rotating forever via Framer Motion) staged in a dark motion-specimen studio — a graticule plate, ambient glow, and a calibration rail of dials that retune the live component's ring count, period, stagger, growth, spin and culture | React, TypeScript, Vite, Tailwind CSS, Framer Motion |
| container-scroll-animation | Integration of the Aceternity "Container Scroll Animation" into a shadcn-style codebase — the same useScroll/useTransform device card used as three stacked stages that tilt from 20° to flat and stand upright on scroll, with a live rotateX/scale telemetry HUD |
React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
| dot-nokia-typing-hero | Single-screen "dot." calm-messaging hero with a full-bleed Nokia-phone background video, a live typing/deleting animation in a Nokia cellphone font overlaid on the phone screen, and a floating glass pill navbar | React 19, Vite, TypeScript, Tailwind CSS v4, Motion |
| linkflow-boomerang-hero | Linkflow hero concept with boomerang-style visual direction and CSS-only animations | React, TypeScript, Vite, Tailwind CSS, Lucide |
| mainframe-scrub-hero | Mainframe contact hero whose background film is scrubbed by cursor movement, with typewriter headline and multi-select service pills | React, TypeScript, Vite, Tailwind CSS, Motion, Lucide |
| microvisuals-boomerang-hero | Fullscreen hero with GSAP boomerang-style animation and a custom display font | React, TypeScript, Vite, Tailwind CSS, GSAP, Lucide |
| moneta-key-preloader | Full-viewport cinematic "Moneta Key" preloader — color-dodge glowing sphere, masked dashed orbit line, wave-cut logo, and a curved canvas-based 0–100 number arc that idles forever | React, TypeScript, Vite, Tailwind CSS, Framer Motion, Canvas 2D |
| pallet-ross-landing | Scroll-driven landing for fictional artist marketplace "Pallet Ross" where seven artwork cards perform a choreographed intro, then gather into a stack, descend, and fan into a diagonal cascade ladder locked across three full-height sections | React, TypeScript, Vite, Tailwind CSS v4, Framer Motion, Lucide |
| qclay-hexagon-loader | Full-screen recreation of the QClay loader — an animated honeycomb of real SVG hexagon tiles with a glowing blue active center, breathing rAF motion, crossfading icons, a shimmering label, and an organic looping progress bar | React, TypeScript, Vite, SVG |
| scroll-expansion-hero | Integration of the ScrollExpandMedia hero into a shadcn-style codebase — a compact media card that hijacks the wheel/touch to unfurl into a full-bleed video or image as you scroll, with a splitting title, dissolving backdrop, and an editorial about-section that reveals on full expansion | React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
3D & games (2)
| Project | Description | Stack |
|---|---|---|
| lovable-webgl-hero | 1:1 recreation of the Lovable landing page — a full-viewport WebGL hero driven by the real CoreRenderer runtime, a glass navbar with full-width dropdowns, an animated typewriter prompt input, and a 3D trusted-by logo carousel | TanStack Start, React 19, Tailwind CSS v4, Framer Motion, Lucide, WebGL |
| sidi-bou-said-3d-walk | Navigable, fully procedural 3D walk through Sidi Bou Said, Tunisia in a single HTML file | Three.js, single-file HTML/JS |
Portfolios (14)
| Project | Description | Stack |
|---|---|---|
| circuit-ledger-h15 | Dark "quiet circuitry" developer portfolio with a live circuit-board canvas, champagne accents, bento stack and typewriter terminal | HTML, CSS, Vanilla JS, Canvas |
| cobalt-bento-folio-h43 | "Daylight Workbench" light-glass bento developer portfolio — cool pale-gray canvas with a colossal royal-cobalt PORTFOLIO hero tile, frosted-glass panels, pointer-parallax + specular hero, typewriter rotator, animated skill ring, count-up stats, and a validated contact form | HTML, CSS, Vanilla JS, IntersectionObserver, Plus Jakarta Sans, JetBrains Mono |
| crimson-press-kit-h25 | Editorial spiral-bound magazine portfolio staged as a crimson brand press kit with print grain, collage cover, and scroll reveals | HTML, CSS, Vanilla JS |
| electric-volt-folio-h45 | "Kinetic Brutalism" motion-designer portfolio — acid-green/hot-pink neo-brutalist poster grid, oversized Inter Black type, blocky shadows, marquee, scroll-in counters, and a full-screen overlay nav | HTML, CSS, Vanilla JS, Inter, Space Mono |
| inkpress-atelier-h46 | "Inkpress Atelier" risograph-print graphic-designer portfolio staged as a folded zine — cream paper frame, 4-color registration bar, Anton display type, diamond logo plate, services menu, colored works grid, and scroll reveals | HTML, CSS, Vanilla JS, Anton, Roboto Condensed |
| jack-3d-portfolio | Dark-themed 3D creator portfolio landing page for Jack with gradient hero text | React, TypeScript, Vite, Tailwind CSS, Framer Motion |
| lumen-folio-h19 | Soft editorial-minimalism personal portfolio with floating glass nav, drag carousel, typewriter hero, and scroll reveals | HTML, CSS, JavaScript |
| michael-smith-portfolio | Dark single-page creator portfolio with GSAP / Framer Motion animations and HLS video | React, TypeScript, Vite, Tailwind CSS, GSAP, Framer Motion, hls.js, React Router |
| meridian-drafthouse-h54 | "Drafting-Table Brutalism" architect & spatial-designer portfolio — warm ecru paper, blueprint grid, hairline frames, highlighter-yellow accent, masked type-rise hero with an outlined italic word, sliding image reveals, count-up stats, and a numbered approach table | HTML, CSS, Vanilla JS, Instrument Serif, Space Grotesk |
| monogram-terminal-h42 | "Monochrome Terminal Editorial" developer portfolio — strict greyscale void, JetBrains Mono headlines, Merriweather italic accents, terminal-card hero, cross-fading featured slider, work timeline, and paginated articles | HTML, CSS, Vanilla JS, JetBrains Mono, Inter, Merriweather |
| nocturne-bento-h28 | "Midnight Atelier" dark designer portfolio — animated perspective-grid floor, acid-lime accent, Fraunces serif + Inter Tight, bento-grid glass hero, pointer parallax, scroll reveals, and a validated contact form | HTML, CSS, vanilla JS, Fraunces, Inter Tight, JetBrains Mono |
| solstice-craft-studio-h41 | "Warm Editorial Craft" light-mode UX designer portfolio — paper canvas, tangerine accent, Space Grotesk + Caveat handwriting, floating design-tool micro-cards, 3D-perspective project ticker, animated process line, and a fullscreen menu | HTML, CSS, Vanilla JS, Space Grotesk, Caveat |
| voltline-resume-h53 | "Voltline" neo-brutalist engineer résumé portfolio — warm cream paper with an orange dot-grid, dual-offset ink/orange borders, hard offset shadows, skewed experience & education bands, count-up hero stats, parallax wedge, and a printable PDF mode | HTML, CSS, Vanilla JS, Bebas Neue, Space Grotesk, Inter |
| voltmark-engineer-terminal-h24 | Electric-yellow dark engineer portfolio with terminal typewriter, code-chip hero, marquee, and filterable project grid | HTML, CSS, Vanilla JS |
Components & UI (15)
| Project | Description | Stack |
|---|---|---|
| animated-dots-rain | shadcn/ui integration of the verbatim AnimatedDots component — a raw-<canvas> dot rain where columns of dots fall and each dot bleeds a single R/G/B channel from black to full as it accelerates down, then recycles with a new colour and speed — dropped into @/components/ui and framed as a component lab: a full-bleed live hero (the verbatim demo) with a render-FPS/uptime telemetry strip, a control deck of faders wired to every real prop (dotsNum/dotRadius/dotSpacing/speedRange/opacity + blend-mode and background-colour controls) with named presets and a live-usage snippet, a shadcn-CLI integration story explaining the default paths and why /components/ui matters, and a props API with the prompt's data/state/assets/responsive/placement Q&A; zero runtime deps, zero component assets, fonts vendored locally, fully offline |
React, TypeScript, Vite, Tailwind CSS v4, Canvas, shadcn/ui, Lucide |
| animated-hud-targeting-ui | shadcn/ui integration of the verbatim TargetingUI + HudFrame primitives — an animated SVG targeting reticle inside a chamfered, notched clip-path frame — driven as a live avionics fire-control display: a SCANNING → ACQUIRING → TRACKING → LOCKED acquisition state machine re-tints and re-draws the reticle per phase over vendored recon stills, with a scrolling bearing tape, a pitch/roll horizon ladder, four bracketed corner readouts of easing tabular-num telemetry, a sensor sweep, and L-brackets that snap shut on lock with an amber flash; cold cyan/white instrument palette with one reserved amber lock accent, fonts + images vendored locally, fully offline |
React, TypeScript, Vite, Tailwind CSS v4, Framer Motion, next-themes, Lucide |
| aurora-sign-up | Two-column "Aurora" registration interface with a background-video hero, staggered Motion reveals, and a multi-step sign-up form | React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide |
| background-paths-hero | Integration of the "Background Paths" shadcn/ui hero — 72 flowing animated SVG paths behind a per-letter spring headline and a glassy CTA, wrapped in a dark/light theme toggle and a preset-headline switcher | React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Framer Motion, Lucide |
| core-features-gradient-cards | Static "Core Features" marketing section with three gradient feature cards | Single-file HTML/CSS |
| crimson-mill-supply-card-h61 | "Millstone Craft" digital visiting card for a fictional heritage stone-mill flour/grain/spice supplier — a vertical, mobile-first tap-to-contact page stacking a marquee-ticker brand hero, a sage WhatsApp + terracotta Call contact grid, a four-up product showcase, a split flagship-store location card, and an hours/footer strip, each as a soft-shadowed cream card revealed on scroll; warm paper canvas, crimson + wheat-gold accents, condensed Oswald display over Inter Tight, real tel/wa.me/mailto/maps links, fonts and product imagery vendored locally, fully offline | HTML, CSS, Vanilla JS, IntersectionObserver |
| gradient-bars-background | shadcn/ui integration of the verbatim GradientBars component — an equalizer-shaped wall of pulsing vertical CSS linear-gradient bars (U-shaped height curve, staggered scaleY @keyframes) — dropped into @/components/ui and framed as a component lab: a full-bleed live hero with a render-FPS/bars/assets/uptime telemetry strip and stack ticker, a control deck of faders wired to the real props (numBars/animationDuration + gradientFrom colour picker with named presets + backgroundColor) with a live-usage snippet, a shadcn-CLI integration story explaining the default paths and why /components/ui matters, and a props API with the prompt's data/state/assets/responsive/placement Q&A; zero image assets (pure CSS keyframes), fonts vendored locally, fully offline |
React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Lucide |
| gradient-dots-background | shadcn/ui integration of the verbatim GradientDots component — a hue-cycling hexagonal CSS radial-gradient dot field looped with framer-motion — dropped into @/components/ui and framed as a component lab: a full-bleed live hero (the verbatim demo) with a render-FPS/uptime telemetry strip, a control deck of faders wired straight to the real props (dotSize/spacing/duration/colorCycleDuration + a background colour control) with named presets and a live-usage snippet, a four-step shadcn-CLI integration story explaining the default paths and why /components/ui matters, and a props API with the prompt's data/state/assets/responsive/placement Q&A; zero component assets (pure CSS), fonts vendored locally, fully offline |
React, TypeScript, Vite, Tailwind CSS v4, framer-motion, shadcn/ui, Lucide |
| interactive-3d-spline-scene | shadcn/ui integration of a Spline 3D scene — the exact SplineScene + Card + Spotlight demo, a graceful animated WebGL fallback for when the remote scene is unreachable, a live props playground, and an on-page guide to the shadcn structure, default paths and why components/ui matters | React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Spline, Framer Motion, Lucide, Canvas |
| lumen-aurora-vcard-h62 | "Lumen Aurora" personal digital visiting card for a fictional creative technologist — one frosted-glass card floating over a slow living aurora of drifting violet/teal/rose blobs with film-grain and vignette, stacking a meta bar with a live local clock, an avatar-ring hero with a pulsing emerald "available" status, a short first-person bio with mono tag chips, a three-up email/call/WhatsApp action grid, a five-up social row, and an amber "Save contact" button that generates a vCard 3.0 .vcf blob client-side plus a "Copy link" toast; cinematic near-black palette, Fraunces display serif over Geist + Geist Mono, pointer parallax with specular sheen, staggered reveal, real mailto/tel/wa.me links, all fonts and portrait vendored locally, fully offline |
HTML, CSS, Vanilla JS, vCard, backdrop-filter |
| nexto-404-hero | Full-viewport 404 "Page Not Found" hero for fictional brand "nexto." with a layered alien-spaceship background, floating gradient Material Symbols, a dashed-gradient navbar, and a morphing mobile menu overlay | React, Vite, Tailwind CSS, Material Symbols |
| scanner-card-stream | Draggable Three.js card stream that decodes each photo into glitching, scrambling ASCII as it crosses a glowing violet scan line, with an ambient WebGL particle field and a 2D spark burst — packaged as a shadcn-style @/components/ui drop |
React, TypeScript, Vite, Tailwind CSS v4, Three.js, Lucide |
| sixsense-reference-finder | Pixel-faithful "Sixsense" AI reference-finder page with canvas pixel-grid glass backgrounds, an organic cursor hover blob, a layered folder/lights stack, three floating reference cards, and a glass typewriter prompt box with a spinning gradient send button | React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Framer Motion, Lucide, Canvas |
| spatial-product-showcase | shadcn/ui integration of the verbatim EarbudShowcase component — a spatial-audio "Sonar Spatial" product stage that mirrors its whole layout when you flip between the Left and Right earbud, with a per-side blue/emerald glow, a rotating dashed ring and floating product shot, animated feature meters, live connection/battery telemetry, and a Dynamic-Island-style segmented switcher; earbud PNGs vendored locally, fully offline |
React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide |
| terminal-cli-control-deck | "ACME Control Deck" infrastructure panel built in a phosphor-green Terminal CLI design system — centralized tokens, composable windows/panes, ASCII art logo, typewriter headline, raw-data ASCII progress meters, a live syslog feed, an interactive zsh console, a box-less access form, and a subtle CRT scanline overlay | React, TypeScript, Vite, Tailwind CSS v4, Lucide |
UI design (34)
| Project | Description | Stack |
|---|---|---|
| academia-classical-showcase | "The Athenæum" Academia / Classical design-system showcase — a library-at-night members' society across ten Roman-numeral Volumes, with arch-topped sepia-to-colour engravings, a rotating brass sunburst hero, 40px corner flourishes, Cinzel drop caps, ornate glyph dividers, crimson wax-seal badges, engraved brass buttons, a manifesto Proclamation, certificate pricing tiers, an alternating timeline, an accordion FAQ, a validated enquiry form, and fixed paper-grain + vignette overlays; vendored fonts/illustrations, fully offline | HTML, CSS, vanilla JS |
| ai-budget-tracking-landing-page-velara-al | "Velara AI" AI budget-tracking landing page — a dark, purple-accented (#A855F7) fintech site assembled from 10 numbered sections: a video-background hero with a glass dashboard mockup (animated wave chart, sidebar, asset list), a feature-grid "Why Choose Us", a 3-step "How It Works" with animated goal/insight mockups, a bento Features grid (stacked encryption cards, smart-alert feed, animated budget bars, sparkline mini-cards), a global-transfers map card with floating glass widgets, an infinite dual-column testimonials ticker, a security band + app-download banner with browser-chrome dashboard, a cosmic-horizon pricing trio with a "Popular" tier, an animated FAQ accordion, and an SVG globe-arc footer with cycling country badges and a glowing VELARAAI wordmark | React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
| aperture-minimalist-dark | Full "Minimalist Dark" design-system landing page for fictional dev tool "Aperture" — layered-slate palette with a warm amber accent, vendored Space Grotesk / Inter / JetBrains Mono, drifting ambient glow orbs + noise/grid ambience, a self-driving glass ⌘K command palette that types and streams a deploy log, glass-effect bento features, count-up stats, a numbered workflow + tinted config code panel, a glowing featured pricing tier, accent-line testimonials, an accessible max-height FAQ accordion, and an amber-ring email CTA | React, TypeScript, Vite, Tailwind CSS, Lucide |
| art-deco-gatsby-showcase | Self-contained Art Deco ("Gatsby") design-system showcase — gold-on-obsidian, vendored Marcellus/Josefin Sans, a rotating sunburst hero, stepped-corner cards with rotated-diamond icons, a Roman-numeral timeline, pricing tiers, testimonials, an accordion FAQ, underlined-input enquiry form, and a 5-column footer | HTML, CSS, vanilla JS |
| aurora-flow-landing | "Tide" deep-work-ritual landing page on the exact prompt scaffold (Vite + React + TS, Tailwind + tailwind-merge + clsx, Framer Motion, Lucide, @/ alias, cn()) — a deep oceanic-twilight design whose signature is a full-width canvas "tide of light" (drifting, pointer-leaning sine bands, reduced-motion-safe), a hero that is a working focus session (breathing dial + live 50:00 countdown), a soundscape marquee, a 3-step Ritual timeline, a Soundscapes bento, count-up stats, scaled-tier pricing, an ARIA FAQ accordion, and a validating email CTA; vendored Fraunces/Inter/JetBrains Mono, fully offline |
React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
| bauhaus-form-follows-function | "WERKBUND" Bauhaus design-system landing page — a constructivist poster brought to life with three primary colours, thick black borders, hard offset shadows, binary radii, geometric circle/square/triangle primitives, color-blocked sections, a stats band, feature grid, pricing tiers, testimonials, journal, and a red/cream FAQ accordion | React, TypeScript, Vite, Tailwind CSS v4, Lucide |
| bitcoin-defi-aurum | "AURUM" Bitcoin DeFi design-system landing — a True-Void/Bitcoin-Fire aesthetic with a spinning orbital orb hero ringed by floating glass stat cards, a seamless stats ticker, count-up metrics, a feature grid with hover-reveal icon watermarks, a "How It Works" blockchain timeline (gradient ledger line, pinging nodes, corner-accent cards), asymmetric scaled pricing, glass testimonials, and colored (never black) glows; centralized cva tokens, self-hosted Space Grotesk/Inter/JetBrains Mono, fully offline | React, TypeScript, Vite, Tailwind CSS, CVA, tailwind-merge, Lucide |
| bold-typography-design-system | "OBELISK" Bold Typography design-system showcase — poster design translated to web with near-black/vermillion tokens, a 13-step type ramp, vendored Inter Tight/Playfair Display/JetBrains Mono, a parallax decorative-numeral hero, an adjective marquee, three button variants (underline/inversion/ghost), layered-text depth, zero radius, a token-flip inverted CTA, and a 200ms ARIA FAQ accordion | React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
| botanical-organic-serif | "Verdant" Botanical / Organic Serif design-system showcase — a slow-living wellness landing on centralized tokens, with hand-built fully-offline botanical SVG art masked into Roman arches, the mandatory paper-grain overlay, Playfair Display headlines using italic emphasis words, a sage/clay/terracotta palette, staggered feature & collection grids, count-up stats, soft-shadow pill buttons, a vine-growing divider, an ARIA FAQ accordion, an underlined newsletter input, and a full-screen mobile menu | React, TypeScript, Vite, Tailwind CSS v4, Lucide |
| clay-design-system | "Claymakers" High-Fidelity Claymorphism design-system showcase — premium digital clay with reusable 4-layer shadow stacks (deep/card/button/pressed), a candy-shop palette and vendored Nunito/DM Sans, super-rounded radii, gradient hero text, an abstract nested-clay hero, breathing count-up stat orbs, a bento feature grid with a peeking panel, a live squish/recessed-input playground, a fanned-tablet split, pricing with a scaled "popular" tier, testimonials, a recess-on-open FAQ, a working CTA, and a reduced-motion-safe blob world | React, TypeScript, Vite, Tailwind CSS v4, Lucide |
| copy-machine-pixel-perfect | "Foundry" browser-native PCB board-studio landing built on the exact "copy machine" prompt scaffold (Vite + React + TS, Tailwind + tailwind-merge + clsx, Framer Motion, Lucide, @/ alias, cn()) — a dark copper-on-substrate design whose signature is a live-autorouter TraceField behind the hero (45°-constrained copper traces growing to pads and pulsing vias, pointer-leaning, reduced-motion-safe) and a layer-toggle BoardCanvas that composites Gerber-style solder-mask/copper/silkscreen films; plus a sticky nav, a continuous-DRC bento feature grid, count-up fab stats, a 4-step schematic→route→verify→ship workflow, quote testimonials, scaled-tier pricing, and a validating email CTA; vendored Space Grotesk/Inter/JetBrains Mono, fully offline |
React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
| copy-machine-setup | "Copy Machine" landing-page scaffold built byte-for-byte to a fixed setup spec (Vite + React, TypeScript, Tailwind + tailwind-merge + clsx, Framer Motion, Lucide, @/→/src/ alias) with the spec-pinned files reproduced character-for-character and an empty App.tsx awaiting the first component; ships a self-contained dark blueprint/IDE "PROJECT SETUP COMPLETE" status screen (radial-masked grid, drifting glow orbs, scanline, count-up readout, created-file tree, verbatim App.tsx code panel, tech-stack chips, copy-machine rules) rendered as a sibling of #root, with vendored Inter/JetBrains Mono, fully offline |
React, TypeScript, Vite, Tailwind CSS, tailwind-merge, clsx, Framer Motion, Lucide |
| corporate-trust-design-system | "Northwind" Corporate Trust design-system showcase — a modern enterprise-SaaS landing fully expressing the style: indigo→violet gradients, colored (blue/violet-tinted) shadows, an isometric 3D hero dashboard, soft blurred blobs, a split gradient headline, zig-zag deep-dives on tilted gradient slabs, a count-up stats band, glowing numbered steps, a scaled "popular" pricing tier, a details/summary FAQ, and a dramatic dark final CTA — all on centralized tokens | React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide |
| cyberpunk-glitch-design-system | "NEUROCITRINE // Netrunner OS" — a self-contained Cyberpunk / Glitch design-system showcase that renders like a malfunctioning CRT: chromatic-aberration glitch headline, full-page scanline + signal-noise + sweeping-beam overlays, clip-path chamfered HUD panels, real stacked-box-shadow neon glow, circuit/PCB + grid backgrounds, a live self-typing breach terminal, holographic telemetry cards, all five button variants, count-up stats, an accordion FAQ, and a prefers-reduced-motion static fallback; vendored Orbitron/JetBrains Mono/Share Tech Mono, fully offline |
HTML, CSS, vanilla JS |
| flatline-design-system | Complete flat-design-system showcase landing page — centralized tokens, sharp full-section color blocks (Blue/Emerald/Amber/dark), tinted color-block cards, thick outline buttons, a scaled "popular" pricing tier, multi-color stat count-ups, and high-contrast solid focus rings with zero box-shadows anywhere | React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide |
| finsyc-finance-landing | "Finsyc" AI finance-management landing page applied verbatim from a 10-component template — an animated soft-gradient video hero with an expanding "Get Started" pill and brand logo marquee, color-blocked metric cards with count-ups, four product-UI feature cards (donut spend chart, balance-forecast graph, security shield, instant-transfer), a tabbed 4-step "How it works", a scroll-pinned benefits list with a progress rail, a count-up metrics band plus a center-snapping testimonial carousel, hover-activated pricing tiers with a monthly/yearly toggle, an animated integrations seal wired to 8 vendored brand icons, a blog grid, and a CTA footer with a giant rising "Finsyc" wordmark; all fonts/logos/UI art/avatars and the background video vendored locally, fully offline | React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
| handcraft-paper-ui | "Scribbly" Hand-Drawn design-system landing page — a messy-on-purpose whiteboard product rendered entirely in wobbly irregular border-radii (never rounded-*), hard zero-blur offset shadows, warm paper-grain dot texture, and self-hosted Kalam / Patrick Hand type; centralized tokens drive composable taped/tacked/post-it cards, a hand-drawn SVG hero whiteboard, squiggly step connectors, a dashed-circled scaled pricing tier, speech-bubble testimonials, and a press-flat button system |
React, TypeScript, Vite, Tailwind CSS v4, Lucide |
| industrial-skeuomorphism | "SCHEMATIC" Industrial Skeuomorphism design-system showcase — a tactile hardware-control landing built on centralized neumorphic tokens, with an all-CSS hero device mockup (scanline screen + live dashboard), glowing LED status indicators, corner screws & vent slots on every panel, a cylindrical How-It-Works pipe connector, push-pinned testimonials with masking tape, punched-hole pricing tags, a conic-gradient radar sweep, recessed "data slot" inputs, and a matte-plastic noise overlay; vendored Inter/JetBrains Mono and all assets, fully offline & responsive | React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide |
| kinetic-typography-poster | Kinetic Typography design-system showcase — a festival poster page with viewport-width clamp() headlines, two infinite marquees, towering background numbers, hard acid-yellow color-inversion hover states, sticky-stacking cards, scroll-driven hero zoom, and a prefers-reduced-motion static fallback |
React, TypeScript, Vite, Tailwind CSS v4, Framer Motion, react-fast-marquee, Space Grotesk |
| lumen-design-system | Showcase landing page that fully expresses the Linear/Modern design language — four-layer ambient background with floating gradient blobs, mouse-tracking spotlight cards, gradient typography, scroll-linked hero parallax, multi-layer shadows, an asymmetric bento grid, a live token gallery and component playground, and a responsive hamburger menu, all on centralized design tokens | React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
| lumina-minimalist-modern | Full "Minimalist Modern" design-system landing page for analytics platform Lumina — Electric Blue signature gradient, inverted slate sections, Calistoga/Inter dual-font type, an animated abstract hero graphic, and centralized design tokens | React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
| luxury-editorial-design-system | "MAISON" Luxury / Editorial design-system showcase — a full editorial landing (hero, drop-cap features, dark stats, multi-layer testimonials, ARIA FAQ accordion, blog grid, footer CTA) with vendored Playfair/Inter fonts, vertical writing-mode labels, fixed gridlines, a gold-sliding button, and a paper-grain noise overlay | React, TypeScript, Vite, Tailwind CSS, Lucide |
| material-you-showcase | "Lumi" Material You (Material Design 3) design-system showcase — a full landing page on centralized MD3 tonal tokens (purple seed #6750A4): a 48px-radius hero, layered organic blur shapes, pill buttons with state layers, glass-morphism benefits on a primary block, glow-on-hover How-It-Works badges, a recessed tonal-ramp visualizer, a lifted featured pricing tier, image-zoom blog cards, an accordion FAQ, a filled-text-field CTA, and a tertiary FAB — all on the cubic-bezier(0.2,0,0,1) easing, with vendored Roboto and fully local SVG art | React, TypeScript, Vite, Tailwind CSS v4 |
| maximalism-dopamine-system | "DOPAMINE" Maximalism / Dopamine design-system showcase — a deliberately overwhelming nine-section page on five clashing accents (rotated by index % 5) with layered dot/stripe/checker/mesh patterns, multi-layer glow+hard shadows, stacked text-shadows, 21 floating shapes, bleeding background words, animated gradient text, broken offset grids, two rotated marquees, a live token gallery, scaled-tier pricing, a 4-variant component playground, ARIA FAQ, and a full reduced-motion fallback; vendored Outfit/Unbounded/DM Sans/Bangers/Bungee, fully offline | HTML, CSS, vanilla JS |
| neo-brutalism-loud-system | "LOUDHOUSE" Neo-brutalism design-system showcase — centralized @theme tokens (cream/black + red/yellow/violet highlighters), hard offset shadows (zero blur) as shadow-neo* utilities, hollow text-stroke display type, sticker rotations, a chaos-zone hero, live token gallery, count-up stats, an interactive component playground, scaled pricing, two marquees, a keyboard FAQ, mechanical click-down buttons / lift cards / yellow-flood inputs, and a full prefers-reduced-motion fallback |
React, TypeScript, Vite, Tailwind CSS v4, react-fast-marquee, Lucide, Space Grotesk |
| neumorphism-soft-ui | "SOFTFORM" Neumorphism (Soft UI) design-system showcase — one cool-grey surface (#E0E5EC) where dual opposing RGBA shadows carve every edge: extruded / inset / inset-deep / nested depth states, hyper-rounded 32px corners, floating concentric-circle hero art, a working component playground (buttons in all states, inset inputs with accent focus rings, a switch, segmented control, draggable+keyboard slider), an inset token gallery, a soft-dark theme toggle, and zero borders anywhere; fully offline |
HTML, CSS, vanilla JS |
| newsprint-editorial-press | Full editorial landing page expressing the "Newsprint" design system — massive Playfair headlines, zero radius, collapsed grid borders, drop caps, a breaking-news ticker, an inverted black "How It's Filed" section, grayscale halftone engravings, hard offset hover shadows, and sparing editorial red | React, TypeScript, Vite, Tailwind CSS, CVA, tailwind-merge, Lucide |
| playful-geometric-design-system | "Blobby" Playful Geometric design-system showcase — a Memphis-inspired "stable grid, wild decoration" landing with centralized tokens (warm paper + slate + four rotational pop colors), chunky 2px borders, hard no-blur "pop" shadows, varied/blob radii, a blob-masked geometric mascot illustration, confetti shapes, keyword + logo marquees, a dashed-line feature grid, a star-badged scaled pricing tier, a live token gallery, an ARIA FAQ, and a focus-shadowed CTA form — all honoring prefers-reduced-motion | React, TypeScript, Vite, Tailwind CSS v4, Lucide |
| retro-90s-nostalgia-design-system | "WEBMASTER 95" Retro / 90s Nostalgia design-system showcase — a faux Windows 95 desktop that documents its own DNA with centralized bevel tokens, a scrolling marquee, animated rainbow text, title-bar windowed cards, a tiled crosshatch background, blue/underlined hyperlinks, alternating rows, groove HR dividers, a glowing green hit counter, pulsing NEW!/HOT! badges, a construction-stripe CTA, dotted focus rings, and zero border-radius; fully offline | HTML, CSS, vanilla JS |
| scaffold-ready-splash | Exact-spec single-page landing scaffold (Vite + React + TypeScript + Tailwind v3, @/ alias, cn() helper, Framer Motion + Lucide) whose App shell — instead of an empty page — renders a polished, self-contained "Scaffold ready" splash: ambient drifting orbs + a panning technical grid, a gradient headline, a self-typing macOS terminal, stack chips, a scroll-sequenced setup checklist, a src/ file tree, and a dashed "drop your first component" target; fully offline (system fonts) and prefers-reduced-motion–aware |
React, TypeScript, Vite, Tailwind CSS, Framer Motion, clsx, tailwind-merge, Lucide |
| serif-editorial-design-system | "Roman & Quill" Serif design-system showcase — a private-publishing-house editorial landing (hero, stats, drop-cap features, asymmetric 1.3fr/0.7fr benefits, decorative-quote testimonials, gold-tinted featured pricing, journal grid, ARIA FAQ, inverted correspond form, footer) with vendored Playfair/Source Sans 3/IBM Plex Mono, a rule-line + small-caps label system, bespoke SVG engraving plates, burnished-gold accent, paper-grain overlay, and ambient glow — all on channel-format design tokens, fully offline | React, TypeScript, Vite, Tailwind CSS, Lucide |
| swiss-design-system | Self-contained Swiss International (International Typographic Style) design-system showcase — strict B/W/Swiss-Red tokens, four CSS texture patterns (grid, dots, diagonal, noise), a Bauhaus hero composition, a mathematical type specimen, a 2×2 component gallery, and bold mechanical interactions (color inversions, rotating plus icons, count-up); fully offline | HTML, CSS, vanilla JS, Inter |
| vaporwave-outrun-design-system | "NEONWAVE OS" Vaporwave / Outrun design-system showcase — centralized neon tokens (magenta/cyan/sunset) and skew/glow/window component classes, a fixed receding perspective grid floor, a 600px blurred sun, and a global CRT scanline + RGB chromatic-aberration overlay, with a typing-terminal hero, gradient-clipped headlines, skewed un-skewing buttons, rotating diamond icons, an interactive file-explorer, IRC <username> testimonials, a scaled pricing tier, and an accordion FAQ; vendored Orbitron / Share Tech Mono |
React, TypeScript, Vite, Tailwind CSS v4, Motion, Lucide |
| verdant-organic-design-system | Full "Organic / Natural" design-system landing for botanical apothecary "Verdant" — earth-drawn palette, Fraunces + Nunito, a global paper-grain overlay, drifting+morphing blob backgrounds, bespoke palette-drawn botanical SVG illustrations, asymmetric feature-card radii, a hand-drawn curved-dashed ritual connector, a rotated-tin product spotlight, an organic image mask, hover-tilt testimonials, and varied moss/terracotta sections; fonts + noise vendored, fully offline | React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide |
Shaders (84)
| Project | Description | Stack |
|---|---|---|
| abstract-glassy-shader | GLASSWORKS — a drop-in WebGL2 metaball field (two SDF circles fused with a smooth union, an exponential glow and a cosine spectrum) integrated into shadcn components/ui and framed as a glass component lab: a live telemetry HUD reading the shader's own blob centres/FPS/clock, a control deck of faders that promote the baked-in constants to live uniforms, copyable source tabs, and a props/uniforms API; fully procedural with a CSS metaball fallback |
React, TypeScript, Vite, Tailwind CSS v4, WebGL2, shadcn/ui, Lucide |
| aether-flow-shader | Faithful shadcn integration of the Aether Flow component — a procedural fractal-noise (fBm) gas rendered on a single full-screen Three.js quad — framed as an atmosphere synthesizer console: a left instrument rail of five faders (Hue/Speed/Intensity/Complexity/Warp) wired straight to the shader's u_* uniforms, a named patch bank (Nebula/Ember/Abyss/Drift/Solar/Bloom), pointer-driven warp, and a live telemetry strip reading the field's per-frame state back out; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide |
| ai-input-wave-hero | "Wavelength" integration of the prompt's HeroWave AI-input hero (a Three.js + GSAP wavefield of up to 256 instanced, 23.4°-skewed bars driven by two keyframed sine waves, lit with an UnrealBloom pass and a custom film-grain ShaderPass, glowing under the cursor) dropped into @/components/ui with its mini-navbar dependency — the verbatim component's self-typing "Make me a…" prompt box sits over the canvas, framed by a live FPS/uptime HUD, an onPromptSubmit toast, and a shadcn/Tailwind/TypeScript install + props story; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, GSAP, Lucide |
| animated-shader-background | "AnoAI" product hero set over a full-viewport three.js aurora fragment shader, integrated as a shadcn components/ui piece, with a graceful CSS-aurora fallback when WebGL is unavailable, vendored Geist font + generated avatar art, and a headless screenshot-based shader verification |
React, TypeScript, Vite, Tailwind CSS v4, three.js, shadcn/ui, Lucide |
| animated-shader-hero | "Emberfield" showcase for a reusable WebGL2 animated shader hero (drifting fractal ember field by @atzedent) — a single drop-in @/components/ui component with a live uniforms HUD, pointer-reactive canvas, and a shadcn/Tailwind/TypeScript integration story; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, WebGL2, Lucide |
| anomalous-matter-hero | shadcn/Tailwind/TypeScript integration of the AnomalousMatterHero — a simplex-noise-displaced Three.js icosahedron wireframe with a fresnel rim glow and a cursor-tracked point light, framed as a "containment lab" specimen: faders wired straight into the displacement/glow/speed uniforms, a live "anomaly energy" telemetry panel that reads center-pixel luminance off the GPU, plus a reticle scope and corner brackets; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide |
| atc-tunnel-shader | shadcn-style integration of the prompt's ShaderDemo_ATC "ATC one-liner" — a single WebGL2 fullscreen fragment shader ray-marching a cosine-folded chromatic warp tunnel — dropped into @/components/ui and framed as an "Aperture Transit Corridor" instrument: a vertical depth gauge whose reticle rides the shader's own marching clock, a chromatic-split wordmark, a hold/resume control wired to the shader's paused prop, and a telemetry rail reading real per-frame depth + FPS off the GPU loop; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, WebGL2, shadcn/ui, Lucide |
| aura-core-shader | shadcn-style integration of the brief's verbatim AuraCore WebGL2 energy-core shader (inlined-OGL renderer, HSV core with ten rotating rays, fbm-distorted surface, cursor-reactive particle field) dropped into @/components/ui, framed as a plasma-containment console — the component's four sliders become reactor field controls, four named profiles snap the shader to regimes, and a telemetry deck reads containment integrity / excitation straight off the GPU clock with a freeze control; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, WebGL2, Lucide |
| aurora-borealis-shader | "Aurora Watch" field-station console wrapping the brief's verbatim Three.js aurora-borealis shader (an FBM-noise green→violet curtain with a cursor-tracking flare) as a shadcn @/components/ui drop-in — a probe reticle tracks the flare as geomagnetic lat/long, and the signature Kp-index gauge (0–9) is driven by the aurora's brightness sampled straight off the GPU, with a CSS-aurora WebGL fallback and fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide |
| blue-meshy-shader-lab | Faithful shadcn integration of the verbatim WebGL2 "blue meshy" background — a procedural domain-warped fractal-noise (fBm) sea on a single full-screen quad, transparent-compositing through a 20-step blue palette — dropped into @/components/ui and framed as a component lab: the live shader as a full-bleed min-h-screen hero carrying the shipped "Turning Ideas Into Impact" lockup, then a setup guide, anatomy, a props + shader-constant reference, and a usage gallery; the only deltas to the verbatim file are a valid join(", ") and a cancelAnimationFrame cleanup for StrictMode safety, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide |
| blueprint-ascii-grid-shader | "GRIDLINE" shadcn-style integration of the brief's verbatim WebGL2 asd.tsx — a deep-navy four-point mesh-gradient blueprint grid with ASCII glyphs stamped on the major intersections, drift, vignette, value-noise grain and Bayer dithering — dropped into @/components/ui and framed as a live instrument: a telemetry HUD (iTime/FPS/iResolution/iMouse), a control deck promoting the shader's baked constants to live uniforms, a per-pixel anatomy walkthrough, and a full shadcn/Tailwind/TS integration story; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide |
| cathedral-raymarch-shader | "VAULTWORK · Cathedral of Light" — the prompt's verbatim WebGL2 volumetric ray-march (a 50-step fragment shader that folds a vaulted nave of leaded, sine-rainbow light) dropped unchanged into shadcn @/components/ui and framed by a thin CathedralStage wrapper that keeps the exact mainImage body while promoting its hidden knobs (pixelRatio / timeScale / paused / exposure) to props and reading center-pixel luminance off the GPU; the chrome is a cathedral-light analysis bench with gothic tracery, named light regimes, a brass control deck, a pointer-tracking rose-window reticle, and a GPU-sampled telemetry strip (nave clock, FPS, dominant stained-glass channel); fonts vendored locally, zero image assets |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide |
| celestial-bloom-shader | Procedural GLSL "Celestial Bloom" fragment shader — a five-petalled nebula with a glowing star core and twinkling field, rendered full-viewport with Three.js and framed as an observatory specimen plate with reticle corners, a Fraunces hero lockup, and a live telemetry HUD (mission clock, render FPS, petals) driven by the shader's own per-frame state; fonts vendored locally | React, TypeScript, Vite, Tailwind CSS v4, Three.js, Lucide |
| celestial-ink-shader | Verbatim Three.js "Celestial Ink" fragment shader (a rotating six-octave fBm ink field, plum→magenta→gold, that ripples around the cursor) dropped into shadcn @/components/ui and framed as an inkstone scrying instrument — a cursor-following astrolabe reticle sights the ripple, a telemetry column reads the shader's own per-frame state (ink time, rotation, ripple coords, fps), and freeze / drift / ripple controls drive the pass; Cormorant Garamond / Inter / JetBrains Mono vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide |
| celestial-matrix-shader | shadcn-style integration of the verbatim Three.js "Celestial Matrix" shader (blue-to-green digital rain bent around a cursor-driven gravitational warp) dropped into @/components/ui, framed as a deep-space signal console — a cursor reticle tracks the warp center while live readouts report render rate, feed time, and warp coordinates; freeze/recalibrate controls drive the shader clock, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide |
| celestial-matrix-terminal | shadcn-style integration of the verbatim Three.js "Celestial Matrix" shader (blue-to-green digital rain bent around a cursor-driven gravitational warp) dropped into @/components/ui, reframed as "Meridian Station · Orbital Relay 9" — a retro-CRT relay terminal that types a boot/login handshake over the live feed and lands on ACCESS GRANTED; a cursor reticle marks the warp lock and a bottom telemetry strip (feed clock, warp x·y, render rate, carrier state) is sampled straight off the GPU loop; freeze/recalibrate controls drive the shader clock, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide |
| celestial-sphere-shader | shadcn-style integration of the verbatim Three.js "Celestial Sphere" shader (a cursor-warped fractal-noise nebula over a twinkling star field on one full-screen quad) dropped into @/components/ui, framed as the VANTA-IX deep-field navigation console — a cursor-tracking gimbal reticle and a warp vector visualise the exact u_mouse shift the shader applies, live telemetry reads feed time / FPS / warp x·y / hue, and four faders promote the brief's props (hue, speed, zoom, particleSize) to live GPU uniforms; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, shadcn structure, Three.js, Lucide |
| cosmic-plasma-web | shadcn integration of the brief's verbatim OGL PlasmaWeb shader (a layered plasma lattice of pulsing nodes, curl-flowed connective streams and excited particles that bends toward the cursor) dropped into @/components/ui and framed as a cursor-driven "field resonance console" — a 60fps cursor-tracking reticle stands in for the pointer (so the interaction reads in the silent recording), faders re-drive the shader's hue/density/glow/attraction/energy props live, named presets snap the lattice between regimes, and a telemetry panel reads render FPS / cursor x·y / an engagement signal off the loop; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, OGL, Lucide |
| crystal-voronoi-shader | shadcn-style integration of the prompt's crystal-shader (InteractiveShader) — a raw-WebGL two-pass warped Voronoi lattice with a cursor repel field, ported to TypeScript and framed as the "Cryolite Lab" crystallography specimen station: a caliper-framed full-viewport shader with a counter-rotating goniometer reticle, live GPU telemetry (FPS, centre-pixel luminance + spectral cast read via gl.readPixels), and four calibration faders wiring the brief's cellDensity/animationSpeed/warpFactor/mouseInfluence props to live uniforms; zero runtime libs (raw WebGL, no three.js), fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, WebGL, Lucide |
| crystalline-cube-shader | shadcn-style integration of the verbatim WebGL "Crystalline Cube" component — a sine-carved, ray-marched SDF box lit by a mouse-driven key light and an Inigo-Quilez palette — framed as a lapidary analysis bench: a reticle-bracketed specimen window, a facet console of four faders that promote the component's props (complexity, dispersion, loupe gain, light parallax) to live uniforms, a four-specimen preset catalog, and a telemetry strip reading FPS, derived facet count, refractive index and carat; fonts vendored locally, with a graceful WebGL-offline fallback | React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL, Lucide |
| cybernetic-grid-shader | shadcn-style integration of the verbatim Three.js "Cybernetic Grid" shader (a pulsing cobalt lattice with magenta energy crawling the intersections and a white glow that warps the grid around the cursor) dropped into @/components/ui, framed as a lattice-integrity diagnostic console — a probe caliper snaps to the warp center and reports its coordinates, an integrity gauge fills with render rate, and hold/re-seed controls drive the field clock; Chakra Petch type and fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide |
| digital-glitch-shader | shadcn-style integration of the prompt's digital-glitch Three.js/GLSL component — a retro CRT shader of scanlines, RGB-shift chromatic aberration, and film grain rendered full-viewport — framed as the "Static Bureau" signal-calibration bench: the brief's five uniforms become engineering trim faders, its presets become patch channels, and a live SMPTE timecode, measured FPS, and a signal-loss meter read straight off the shader's own animation loop; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Three.js, Lucide |
| digital-petals-shader | shadcn-style integration of the brief's DigitalPetalsShader — a polar-coordinate GLSL flower on a single full-screen quad with Three.js dropped into @/components/ui, framed as a herbarium specimen plate: the corolla breathes between three and seven petals, the cursor seeds a soft light bloom, and a signature Petal Dial gauge plus a cultivation-log HUD read the shader's exact per-frame petal count and state straight off the GPU; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide |
| dithering-shader-lab | "DITHER LAB" darkroom instrument integrating the drop-in DitheringShader (WebGL2 / GLSL ES 3.00, 7 shapes × 4 ordered-Bayer/noise dithering matrices) at @/components/ui — a full-bleed live stage with reticle chrome, shape/matrix/ink/pixel-grid/speed controls plus presets driving the shader through live uniforms, and a telemetry HUD reading FPS/clock/buffer/cell-grid straight off the GPU; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, WebGL2, shadcn/ui, Lucide |
| dithering-sphere-shader | "DITHER LAB" showcase for the designali-in/dithering-shader component — a WebGL2 fragment shader that resolves seven procedural fields (sphere, ripple, swirl, warp, dots, wave, simplex) to 1-bit through ordered Bayer or stochastic dithering — dropped into @/components/ui and framed as a 1-bit print instrument: a full-bleed live hero with an FPS/frame telemetry HUD, a control deck promoting every prop (shape, dither type, pxSize, speed, colours) to a live knob, a signature panel that renders the shader's actual Bayer threshold matrix and live-dithers a tonal ramp, plus a lazy-mounted shape index; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide |
| dithering-swirl-shader | "HALFTONE ENGINE" — a halftone-press take on the prompt's DitheringShader (WebGL2, 7 shapes × 4 ordered-Bayer/noise matrices) at @/components/ui: a full-bleed swirl press with press controls (shape/matrix/phosphor/pixel-size/speed), a panel rendering the active Bayer threshold matrix cell-by-cell, and an ink-coverage telemetry HUD reading lit-pixel fraction straight off the framebuffer; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide |
| dotted-surface-waves | shadcn/Tailwind v4/TS integration of the verbatim DottedSurface component — a full-viewport three.js Points lattice (40 × 60 = 2,400 dots) displaced by two crossing sine waves — framed as a quiet "field generator" with a centred Geist Mono lockup + radial glow and a live next-themes toggle that flips the dot palette (light dots on dark ↔ dark dots on light) in real time; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Three.js, next-themes, Lucide |
| dynamic-waveform-shader | shadcn-style integration of the ShaderCanvas "Dynamic Waveform" — a Three.js fragment shader that stacks up to eight mouse-warpable sine harmonics into a glowing signal trace — dropped into @/components/ui and framed as a CRT "Signal Analysis Bench" with an oscilloscope graticule, corner reticles, two-trace colour trims, five faders wired straight to the shader uniforms, four channel presets (Baseline / Signal Scan / Deep Sea / Vaporwave), and a live telemetry strip (sweep time, refresh, trace level, harmonics) read off the shader's own per-frame state; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, three.js, Lucide |
| electric-waves-shader | shadcn/Tailwind v4/TS integration of the prompt's ElectricWavesShader (a Three.js fragment shader piling additive R/G/B sine-interference lines onto one full-screen quad), framed as the "ARCWAVE" signal instrument — viewfinder brackets, CRT scanlines, the component's own five-slider uniform deck (wave count / amplitude / frequency / brightness / colour separation), and a live FPS / uptime / resolution telemetry HUD; system fonts, runs offline |
React, TypeScript, Vite, Tailwind CSS v4, Three.js, shadcn/ui, Lucide |
| endless-pursuit-shader-hero | shadcn/Tailwind v4/TS integration of UIMIX's monochrome "ENDLESS PURSUIT" hero — the pasted component's remote UnicornStudio shader scene is preserved but layered over a dependency-free WebGL fallback field (drifting nebula, an "endless orbit" arc, parallax twinkling stars) with a pure-CSS starfield beneath, so the Sisyphus-themed hero runs fully offline; Next.js 'use client'/styled-jsx adapted to Vite, JetBrains Mono vendored, Lucide icons |
React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, WebGL, Lucide |
| exoplanet-survey-shader | shadcn-style integration of the brief's verbatim Three.js "Celestial Sphere" ShaderCanvas (six-octave FBM cloud deck + Fresnel atmosphere rim on a rotating SphereGeometry) dropped into @/components/ui, framed as a "Stellar Cartography" exoplanet survey — the sphere sits inside a brass eyepiece with an engraved reticle and radar sweep, two nebula colour chips plus rotation / cloud-density / glow dials and the brief's three world presets, a catalog card deriving spectral class / rotation period / albedo from the live props, and a telemetry strip reading the shader's own per-frame clock, FPS and longitude; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide |
| flowing-waves-shader | shadcn/Tailwind/TypeScript integration of the prompt's InteractiveWaveShader (a nine-iteration cosine-displacement Three.js fragment-shader wave field on one full-screen quad), framed as a "tidal field observatory" — a live buoy-telemetry panel reads significant wave height/period/turbulence straight off the GPU via gl.readPixels, with a sea-state mode selector, center-clarity toggle, and amplitude dial steering the shader's mode/dimmingDisabled/intensity uniforms; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide |
| fluid-swirl-shader | shadcn/Tailwind/TypeScript integration of the prompt's verbatim FluidSwirl raw-WebGL component (three pigments folded into an endless paint vortex on a single full-screen quad) dropped into @/components/ui, framed as the "FLUX" pigment-mixing console — the shader's hard-coded uniforms become an additive, backward-compatible props API driving three live colour pickers, contrast/spin/flow/pixel-filter faders, a polar-warp toggle, six paint presets and a randomiser, with pointer/touch steering the spin and a signature pigment-trace oscilloscope reading the field's average luma straight off the framebuffer; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL, Lucide |
| galactic-spiral-shader | shadcn-style integration of the verbatim Three.js ShaderAnimation (a 7-colour neon-rainbow spiral GLSL fragment shader) dropped into @/components/ui, framed as a deep-field "survey transmission" — a registration-corner plate, a Galactic Spiral hero lockup over a legibility scrim, and a live telemetry ledger reporting mission clock, measured render FPS, and drifting R.A./Dec. coordinates; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Three.js, Lucide |
| gaming-vibe-shader | shadcn-style integration of the brief's "Gaming vibe Shader" (neno-shader.tsx) — a Three.js neon ring field (electric blue → magenta) that warps, breathes and rotates — dropped into @/components/ui and framed as the "NENO RIG" arcade-rig boot diagnostic, with an Orbitron cabinet marquee lockup, an overclock control deck of four faders (clock/rings/warp/sync) plus RGB profiles wired straight into the shader uniforms, pointer parallax with a targeting reticle, and a live telemetry HUD; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Three.js, Lucide |
| generative-mountain-scene | shadcn/Tailwind/TypeScript integration of the brief's GenerativeMountainScene — a solid 128² Three.js plane raised into a mountain massif by two octaves of 3D simplex noise in a custom GLSL vertex shader and lit by a fresnel+diffuse fragment shader off a cursor-driven point light — framed as the "ORONOMY" terrain-survey station with a viewfinder stage (corner brackets, scanlines, sweep), freeze-drift + ridge-tint controls, and a live telemetry HUD reading real FPS / survey clock / time drift / point-light X·Y·Z straight off the render loop; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide |
| glsl-hills-shader | shadcn/Tailwind/TypeScript integration of the brief's verbatim GLSLHills — a monochrome 3-octave Perlin hill range on one 256² RawShaderMaterial plane, folded to face the camera and pushed forever forward so its far ridges dissolve into haze — dropped into @/components/ui and framed as the "FOGBANK" low-visibility terrain monitor: the canonical demo lockup floats over a viewfinder stage (reticle, scanlines, sweep), a drift console of four faders promotes the props + baked fog/haze constants to live uniforms with four field presets, and the signature visibility gauge plus a telemetry strip read drift clock / FPS / cam depth / visibility (km) and ridge-crest straight off the GPU framebuffer; hold/resume drives the shader clock, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide |
| grain-gradient-corners-lab | "GRAINFIELD" — the prompt's verbatim GradientBackground (a @paper-design/shaders-react GrainGradient painting the corners shape: two rounded rectangles in warm orange→amber→pink grain on black) dropped into components/ui, then wrapped in a parametric GrainGradientStage twin so an instrument console can drive the whole uniform surface live — a shape selector across all seven u_shape modes (wave·dots·truchet·corners·ripple·blob·sphere), five named palettes, a uniforms deck of faders (softness·intensity·grain·scale·rotation·speed), a Freeze control, a four-tab copyable integration story (component/usage/parametric/setup) and a telemetry strip reading real FPS/clock/frames off a rAF loop; the preserved "Backgrounds are awesome :)" hero floats over it. Fonts vendored locally, CLI-verified headless with a WebGL render check |
React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, shadcn/ui, Lucide |
| grainy-gradient-ripple-card | shadcn integration of the brief's verbatim gradient-shader-card — a grainy 7-stop gradient (domain-warped value noise + 3D simplex grain + overlay film grain) rendered on a single React-Three-Fiber quad that ripples where you tap it — dropped into @/components/ui and framed as the "Chroma Foundry" pigment-lab console: a rail with the exact 7 hex stops the shader mixes, five faders promoting the baked noise*/waveNoise* constants to live uniforms, named patches (Foundry/Silk/Marble/Static/Tide), click-to-ripple with tactile DOM markers, and a telemetry strip reading the shader's own clock + live ripple count off the GPU loop; fonts vendored locally, headless WebGL + interaction verification (9/9) |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, @react-three/fiber, framer-motion, Lucide |
| hero-button-expandable | shadcn/Tailwind v4/TS integration of the prompt's hero-button-expendable — a GodRays-lit "Nexus" hero whose pill CTA performs a framer-motion shared-layout morph (layoutId) into a full-screen MeshGradient demo-request modal with an animated idle→submitting→success form; both shaders from @paper-design/shaders-react, fonts vendored locally |
React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, framer-motion, shadcn/ui, Lucide |
| hero-dithering-card | "DITHER · PRESS" — the brief's CTASection dropped verbatim into components/ui: a transparent-backed @paper-design/shaders-react Dithering shader laying Pantone-orange ink under an editorial headline, mounted on a print-house "press bed" with crop marks, a rotating registration loupe, a half-tone dot field, and a telemetry strip that samples ink coverage live off the plate; plus an "ink console" whose faders (speed / shape / type / ink) drive a second live Dithering instance, a copyable-source integration story, a Dithering props table, and a paper ↔ lights-out theme toggle — fonts vendored locally, CLI-verified with a screenshot-diff render check |
React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, Lucide |
| hero-futuristic-webgpu | Faithful shadcn integration of the Hero Futuristic component — a depth-mapped portrait dissolved into a scanning dot-matrix field, rendered through a Three.js WebGPU pipeline written entirely in TSL: a colour texture + companion depth map drive a node material that parallax-shifts the image by the cursor, masks it into cellular-noise dots, and sweeps a depth-driven reveal, then a TSL post pass adds bloom + a travelling red scan line; headline reveals word-by-word over the top. Async-renderer gl callback (WebGPU → WebGL2 fallback) needs @react-three/fiber v9; texture, depth map and fonts vendored locally |
React 19, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js (WebGPU + TSL), @react-three/fiber, @react-three/drei, Lucide |
| hex-shield-shader | shadcn-style integration of the brief's verbatim shield-shader.tsx — a 100-step three + @react-three/fiber fragment shader that folds a mirrored hex lattice onto a sphere distortion and tanh-tonemaps a cyan→violet arc field — dropped into @/components/ui and framed as the "AEGIS" deflector-array console: a typed sibling promotes every baked GLSL constant (dome bias, curvature, hex scale, drift, edge/arc gain, falloff, tint) to a live uniform driven by a calibration deck, five named deflector profiles snap the field to regimes, a cursor-tracked impact reticle lights the dome, and a circular shield-integrity gauge plus a telemetry strip read render rate / impact charge / shield clock straight off the GPU loop with a freeze control; fonts vendored locally |
React 19, TypeScript, Vite, Tailwind CSS, Three.js, @react-three/fiber, shadcn/ui, Lucide |
| hive-noise-shader | "HIVE" — a faithful shadcn integration of the prompt's verbatim hive.tsx component, a single full-screen WebGL2 fragment shader that raymarches a 20-step noise field and tints it with a flowing amber → magenta cosine spectrum; dropped unedited into @/components/ui (zero props, zero deps, zero assets) and mounted as a fixed full-viewport backdrop under a frosted shader lab: a hero, a spec HUD reading the shader's real shape (its u_res/u_time uniforms, raymarch steps, DPR clamp) instead of faked telemetry, an integration ticker, and a below-the-fold integration story (default paths, why components/ui, from-scratch setup, copyable source, a render-pipeline walkthrough, and a props/state/assets Q&A); CLI-verified with a headless screenshot light-check |
React, TypeScript, Vite, Tailwind CSS v4, WebGL2, shadcn/ui, Lucide |
| horizon-strata-shader | "STRATA" shadcn integration of the brief's verbatim WebGL2 lab.tsx — a single fullscreen fragment pass that folds space into repeating 4-unit horizon strata (p.y = abs(mod(d - 2.0, 4.0) - 2.0)) over a cosine-tube ground plane and flies it toward the vanishing point (p.z -= t), tanh-mapped — dropped into @/components/ui and framed as a deep-field stratigraphy scanner: a right-edge layer gauge whose reticle rides the shader's own march clock (one sweep per band), a chromatic-split STRATA wordmark, a hold/resume control wired to the component's real paused prop, and a telemetry rail reading live depth/frame/FPS off the GPU loop via onSample; CSS-strata fallback when WebGL2 is unavailable, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide |
| interactive-flux-shader | shadcn-style integration of the prompt's interactive-shader component — a full-screen WebGL2 FBM noise field (hue/speed/intensity/complexity uniforms + a cursor-warp) ported to TypeScript and re-framed as "FLUX·01", a Eurorack-style field synthesizer: the four params become engraved aluminium faders, the field sits in a recessed scope window with a tracking crosshair reticle, and a live telemetry stack reads the field's sampled luminance, dominant hue, and draw rate straight off the GPU via gl.readPixels; zero runtime libs (raw WebGL, no three.js), fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide |
| launch-shader | shadcn-style integration of the brief's verbatim WebGL2 Component (launch.tsx) — a single fullscreen fragment shader ray-marching a churning molten engine plume (camera at vec3(0,-2,7), an animated turbulence loop folded into a cos-rippled SDF floor, accumulated into a hot red/amber channel and tanh tone-mapped) — dropped into @/components/ui and framed as a rocket ignition control console: a vertical thrust gauge whose reticle rides the shader's own clock, a heat-glow LAUNCH wordmark, an Ignite/Hold control wired to the shader's paused prop, an arming launch-sequence rail, and a telemetry rail reading real altitude/throttle/iFrame/FPS off the GPU loop; auto-detects software WebGL to keep captures fluid while real GPUs render full-res; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide |
| liquid-crystal-shader | shadcn-style integration of the verbatim raw-WebGL liquid-crystal component (simplex-noise interference bands on a single mouse-warped full-screen quad) dropped into @/components/ui, framed as a polarized-light optics bench — the prompt's top-left ControlsPanel drives the hue/speed/noise/warp/zoom/brightness uniforms, a crossed-polarizer reticle tracks the mouse-warp centre, an instrument rail reads live FPS/render clock/birefringence off the shader's own per-frame state, and an integration docket documents the drop-in; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, WebGL, Lucide |
| liquid-metal-foundry | shadcn-style integration of the prompt's verbatim background-shades — a full-bleed, framer-motion–animated @paper-design/shaders-react LiquidMetal field dropped into @/components/ui and framed as a molten-metal foundry console: the live shader pours into a registration-bracketed crucible plate while a casting deck drives every real LiquidMetal prop (tint, shape, repetition, softness, distortion, contour, chromatic shift, rotation, scale, speed, blur) in real time, with FPS·frame·uptime telemetry, a prefers-reduced-motion–aware breathing loop, and a tabbed install / props-API / live-usage / integration-notes / why-components/ui dock that documents reconciling the verbatim shape="plane" and unused PulsingBorder against shaders-react 0.0.76; Space Grotesk + JetBrains Mono vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, framer-motion, shadcn/ui, Lucide |
| living-nebula-shader | shadcn-style integration of the brief's LivingNebulaShader — a two-layer fbm gas cloud (magenta plasma + ion-blue) that lenses around the cursor, rendered full-viewport with Three.js and framed as a deep-sky observatory sky-feed console: corner brackets, a scope scanline, a cursor lens reticle, and a live telemetry rail reading the shader's own per-frame state (feed clock, render FPS, and warp coordinates computed with the exact GLSL normalization); fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, Three.js, shadcn/ui, Lucide |
| mesh-gradient-shader-hero | shadcn-style integration of the prompt's HeroSection — a hero whose background is a flowing @paper-design/shaders-react MeshGradient under a frosted veil — dropped verbatim into @/components/ui and framed as a warm "palette studio": the live hero sits in a registration-bracketed plate while a control deck drives the shader's real props (color stops, distortion, swirl, speed, offsetX) in real time, with light/dark veil toggle, FPS·frame·uptime telemetry, and a tabbed install / props-API / live-usage / why-components/ui dock; Onest vendored locally as the Satoshi substitute |
React, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, shadcn/ui, Lucide |
| molten-core-shader | shadcn-style integration of the MoltenCoreShader component — a procedural FBM lava fragment shader rendered full-viewport with Three.js, framed as a live "foundry core monitor" with a base-color toggle, a melt-intensity dial, and a telemetry panel that reads core temperature straight off the GPU |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide |
| morphing-light-shader | Faithful shadcn integration of the brief's verbatim MorphingLight Three.js shader (radially symmetric pink↔cyan morphing interference fringes on one full-screen quad) dropped into @/components/ui and reframed as FRINGE, a tabletop interferometer — the shader's baked constants (2.5/4.0/8.0 + an HSV hue rotation) are promoted to four live "beam" faders, five named emission sources snap the field to stored uniforms, a concentric fringe reticle mirrors the shader's own radial symmetry, a cursor caliper reads fringe order at the optical axis, and a detector strip reads clock/FPS/axis intensity straight off the GPU via gl.readPixels; zero-prop <MorphingLight /> stays byte-for-byte original, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide |
| moving-circles-shader | Faithful shadcn/R3F integration of the prompt's verbatim moving-circles-shader.tsx (an isometric space-warping GLSL field that tiles a sphere into every lattice cell and steps it one axis at a time) dropped into @/components/ui and framed as PHASE LATTICE, a sphere-sonar console — the shader's exact mod(time,3.0) axis cycle and eased t − sin(t·τ)/τ sweep are decoded in JS to drive a live X/Y/Z phase-axis rail, a sweep meter, and a drift readout that match the GPU frame-for-frame, plus a telemetry ticker (uTime/axis/phase/fps), freeze + speed + hide-UI transport, and a slide-in install/usage sheet; zero-prop <Component /> stays verbatim, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, @react-three/fiber, Lucide |
| novatrix-gradient-mesh | shadcn/Tailwind v4/TypeScript integration of the prompt's gradient-mesh.tsx (the Novatrix ogl shader) dropped verbatim into @/components/ui and framed as the "NOVATRIX Gradient Mesh Lab" — a water-distorted fractal gradient field under the prompt's mix-blend-overlay "Gradient Mesh" headline, with a uniform control deck that promotes every baked-in constant (speed/swirl/scale/rotation/wave amp·freq·speed/grain/offsets/distortion) to a live fader, eight curated 3-stop palettes, an independent FPS·frame·clock telemetry HUD with pause-freeze, and a tabbed install / props-API / usage / why-components/ui dock; fonts vendored locally, fully procedural (no image assets) |
React, TypeScript, Vite, Tailwind CSS v4, ogl, WebGL, shadcn/ui, Lucide |
| old-television-shader | shadcn/Tailwind/TypeScript integration of the brief's verbatim react-three-fiber WaveShaderMaterial (a flowing-sine + 4-octave fractal-noise field mixing two colours into analog snow on one drei shaderMaterial quad) dropped into @/components/ui and framed as a "Cathode Vault" broadcast monitor — the shader is the live picture tube of a CRT cabinet with scanlines/shadow-mask/vignette glass, a self-typing on-screen channel readout, six tunable channel presets, faders that promote the shader's baked constants to live uWave/uGrain/uBright uniforms, and a phosphor signal meter reading centre-pixel luminance straight off the GPU; the original PolishedShader default export is preserved as a drop-in, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, @react-three/fiber, @react-three/drei, three, Lucide |
| paper-shader-resume-hero | shadcn components/ui integration of the prompt's portfolio-hero-with-paper-shaders — a split-screen designer résumé (Jessi.cv) whose right panel is a live @paper-design/shaders-react Dithering canvas with its own internal light/dark toggle — dropped in verbatim and framed as a "darkroom" proof: the as-shipped component sits in a crop-marked plate, an ink console promotes every Dithering prop (shape/bayer-matrix/pxSize/scale/speed/colour pair) to live faders with live prop/fps telemetry, a procedural shader-portrait gallery, and a setup/why-components/ui/source/props-API story (the invalid shape="cat" is corrected to sphere); fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, shadcn/ui, Lucide |
| paper-shaders-control-deck | Instrument-console "Control Deck" for driving live WebGL shaders — four selectable channels (paper-design Mesh Gradient / Dot Orbit / Combined plus the prompt's custom react-three-fiber GLSL Shader Plane + energy rings), a brushed-graphite scope housing with corner brackets/scanlines/vignette, live FPS·frame·uptime telemetry, and speed/intensity faders wired straight into the shader uniforms | React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, @react-three/fiber, three, Lucide |
| paper-shaders-hero-lab | shadcn integration of the 21st.dev "Beautiful Shader Experiences" hero (two stacked @paper-design/shaders-react MeshGradient layers + a rainbow PulsingBorder ring with orbiting marquee), copied verbatim into components/ui and framed as a dark instrument console — a Showcase/Lab view toggle, a control deck promoting the baked-in shader constants to live config/pulse uniforms (colour stops, base/wire speed, distortion, swirl, wire opacity, wireframe, pulse speed/glow), a telemetry HUD whose colour chip is sampled straight off the live shader canvas, and an install / props / why-components/ui / responsive dock; module-augmented types keep the drop-in byte-for-byte, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, framer-motion, shadcn/ui, Lucide |
| phosphor-30-shader-hero | shadcn/Vite/TypeScript integration of the brief's raw-WebGL2 phosphor-30 shader (an 80-step raymarch folding a rotating SDF into ribbons of light via tanh(o / 5e3) on one full-screen triangle), framed as a CRT "PHOSPHOR // 30" instrument hero — bezel + corner brackets, a drifting scan line, a phosphor-glow FIELD OF / LIGHT headline, live FPS·session telemetry and lucide-react chrome; the prompt's phosphor-30.tsx + demo.tsx dropped in verbatim alongside a composable type-checked twin, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, WebGL2, shadcn/ui, CVA, @radix-ui/react-slot, Lucide |
| radial-aperture-shader | shadcn/Tailwind v4/TypeScript integration of the brief's raw-WebGL2 raidal-2 radial-bloom shader (nine accumulating blades on one full-screen triangle, an angular smoothstep gate and a tanh tone-map), framed as the optical "APERTURE" instrument — a live hero with FPS/uptime telemetry, a control deck that promotes the field's baked-in 9/0.03/hue constants to live uniforms, a GLSL anatomy walkthrough, a self-rendered specimen gallery, and the verbatim drop-in shown contained + fullscreen; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, WebGL2, shadcn/ui, Lucide |
| radial-shader | "Radial Bloom" — verbatim shadcn components/ui integration of the brief's single-file WebGL2 fragment shader (seven polar-gated rings blooming from one full-screen triangle, each rotating at its own t·sin(i²) rate under a phase-shifted cosine palette and a tanh tone-map), dropped in unedited and framed as an observatory instrument: the fullscreen component renders as a fixed background under a glass hero lockup, a right-rail telemetry HUD mirrors the shader's own iTime/iFrame/FPS and per-ring phase, and a scrollable deck documents the shadcn/Tailwind/TypeScript setup, the components.json aliases, why components/ui matters, the props/uniforms API, and a GLSL anatomy walkthrough; zero image/shader-library dependencies, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, WebGL2, shadcn/ui, Lucide |
| realistic-fog-background | "HAAR" sea-fog instrument integrating the prompt's realistic-fog-background — a WebGL fragment-shader fog (six octaves of domain-warped fBm on one full-screen quad lit by a cursor "lighthouse beam") dropped into @/components/ui; the signature visibility gauge reads the shader's own framebuffer luminance off the GPU via gl.readPixels, a control deck promotes every baked constant to a live uniform with a five-patch fog bank (Sea Haar → Pea Souper → Dry Ice → Moor Drift → Clear Dawn), plus a full shadcn/Tailwind/TS integration story; fonts vendored locally | React, TypeScript, Vite, Tailwind CSS v4, WebGL, shadcn/ui, Lucide |
| sdf-dreamscape-shader | shadcn-style integration of the verbatim "SDF Dreamscape" component — a native-WebGL fractal signed-distance-field (a recursive Julia-fold bent live by the cursor) ported to strict TS in @/components/ui and reframed as the "Oneirograph" dream-recorder console: a Big Shoulders hero lockup, a registration frame + reticle, four tuning dials (Spectrum/Drift/Recursion/Lens) annotated with their u_* uniforms, Lucid/Abyssal/Solar/REM presets that snap all four at once, and a live telemetry strip reading the shader's own FPS and dream clock; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, WebGL, Lucide |
| shader-animation-integration | shadcn/ui integration of a zero-prop Three.js WebGL fragment-shader component (radiating RGB lines) — a full-bleed shader hero plus a docs page covering the components/ui path, the three dependency, copy-paste usage, and a props/state/assets/responsive/placement Q&A |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide |
| shader-flow-field-rings | shadcn/Tailwind/TypeScript integration of the prompt's ShaderAnimation (a Three.js fragment shader drawing additive R/G/B interference rings on one full-screen quad), framed as a signal/oscilloscope lab — a live shader hero with transport + FPS/time/uptime telemetry, a signature "channel decomposition" reading each color[j] loop as its own live sparkline, an install/components/ui story, copyable source tabs, and a props/uniforms API; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide |
| shader-lines-showcase | shadcn-style integration of the "Shader Lines" component — a generative GLSL line field on one full-screen quad — wrapped in a component-library docs page with a full-bleed live hero, a tabbed copyable source panel, an anatomy walkthrough, and a props/uniforms API, with Three.js r89 and all fonts vendored locally so it runs offline | React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, Lucide |
| shader-plasma-grid-background | "PLASMASIGNAL" showcase for a drop-in WebGL plasma-grid background (shadcn components/ui) — the brief's fragment shader ported to TS, wrapped in a "Signal Lab" page with an oscilloscope HUD reading live iTime/FPS/iResolution, and a control deck of faders that promote the shader's baked-in constants to live uniforms to re-tint/re-shape the whole field in real time |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL, Lucide |
| shader-spectral-clock | "SPECTRA CLOCK" integration of the brief's verbatim shader-clock.tsx — a raw-WebGL eight-fold cosine/sine domain warp coloured by a wavelength→RGB spectrum, with a live clock, editable location and °C/°F toggle floating over it — dropped into @/components/ui and framed as a spectral-field timepiece lab: a frosted clock card over the live field, a telemetry HUD reading the shader's own iTime/FPS/centre-pixel colour off the GPU, a control deck promoting the four baked GLSL constants (for(i<8)/p*=2.0/p.y*50.0/iTime) to live uniforms, a six-city world-preset bank with locally-generated skyline stills, a Freeze control and a CSS-aurora WebGL fallback; the verbatim demo.tsx is embedded untouched and fonts are vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, WebGL, Lucide |
| sickui-waitlist-mesh-shader | shadcn-style integration of the verbatim background-shader.tsx — a deep-blue @paper-design/shaders-react MeshGradient backdrop — copied byte-for-byte into components/ui and grown into a full "SickUI" waitlist launch page: a glass email-capture card with validation + success state, an animated signup tally and gradient-monogram social proof, a "what's shipping" feature grid, and nav/footer floating over the living shader; Unsplash is network-blocked here so avatars are synthesised locally and fonts are vendored, so it runs fully offline |
React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, Lucide |
| simplex-dithering-shader | shadcn/Tailwind v4/TS integration of the verbatim DitheringShader — a WebGL2 ordered-dithering field (simplex/warp/dots/wave/ripple/swirl/sphere crushed through Bayer 2×2/4×4/8×8 or blue-noise matrices into a two-tone halftone) dropped into @/components/ui, framed as an amber-on-oxblood "dither bench": the brief's ripple · 2×2 preset full-bleed behind a centered "Simplex" lockup, a live Bayer threshold-matrix panel, and field/matrix/pixel-size/speed controls wired straight to the shader uniforms with an FPS/shader-clock telemetry HUD read off the render loop; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, WebGL2, shadcn/ui, Lucide |
| spooky-smoke-shader | "AETHER" séance instrument that integrates a WebGL2 fbm-noise smoke component — a live observation window tuned by a single smokeColor prop, an alchemical reagent tray of preset swatches plus a brass colour dial, and two documented specimen panes, all on a shadcn/ui project structure |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Lucide, WebGL2 |
| starship-shader | "HELM-9 · FTL Navigation Console" integration of @XorDev's verbatim "Starship" warp-streak fragment shader (a 50-step exp(sin()) accumulation over a noise-warped distance field, tanh-tonemapped on a pure-black hull) rendered on a @react-three/fiber fullscreen quad and dropped into @/components/ui — framed as a starship helm with a signature velocity ladder whose caret rides the shader clock, throttle/exposure faders + named drive regimes wired to optional speed/intensity/paused props, an engage-jump / hold-field sequence, and a live field-clock/velocity/distance/FPS telemetry deck read off the per-frame callback; full shadcn/Tailwind/TS integration story, fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, @react-three/fiber, Lucide |
| thermal-shader-imaging | "THERMA — Thermal Imaging Bay" integration of the prompt's verbatim ThermalEffect (Apple-style three.js shader painting a pointer-reactive 7-stop thermal gradient inside a logo's alpha mask) dropped into @/components/ui, framed as thermographic hardware — bracketed viewports with a reticle, a live sensor-clock/FPS/core-temp telemetry HUD, the brief's logo × logo two-up plus a specimen tray, a palette/LUT calibration ramp and props API; logo masks are drawn on a canvas at runtime so it runs fully offline |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, three.js, Lucide |
| vitruvian-ascii-shader | shadcn/Tailwind v4/TS integration of the prompt's hero-ascii "PERFECT PROPORTIONS" hero, with its network-blocked UnicornStudio embed rebuilt as a self-contained HTML-canvas ASCII shader of Da Vinci's Vitruvian Man — bright limbs sweeping between the square and circle poses over a breathing frame, a faint pose-superposition, and a twinkling starfield, under the verbatim UIMIX chrome; JetBrains Mono vendored locally |
React, TypeScript, Vite, Tailwind CSS v4, HTML Canvas, shadcn/ui |
| volumetric-beams-shader | "BEAMWORKS" optics-bench integration of the brief's verbatim volumetric-beams component — a full-screen Three.js + R3F single-scatter raymarch firing an angular star of light beams (Beer–Lambert transmittance, Henyey–Greenstein phase, depth twist, striation ribbing, film grain) dropped into @/components/ui and framed as a calibration bench: 18 grouped faders wired to every u* uniform, six named beacon presets (Searchlight = the brief's demo.tsx), and a live telemetry panel reading render rate / beam flux / spectral cast back off the canvas; the brief's demo.tsx is also rendered verbatim; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, @react-three/fiber, Lucide |
| warp-checks-background-lab | shadcn integration of the prompt's @paper-design/shaders-react <Warp shape="checks" /> dropped into components/ui (its malformed JSX fixed) and built into a polished, full-viewport animated checks-warp background — one <Warp> in a fixed inset-0 -z-10 layer behind glassy product UI, a live console of faders for every uniform (proportion, softness, distortion, swirl, swirlIterations, shapeScale, scale, rotation, speed), a shape selector and four mood presets, a live-vs-prompt props ledger, an in-page shadcn/Tailwind/TS setup write-up, and an rAF FPS/frame/uptime telemetry strip; boots on the prompt's exact four-colour config, fonts vendored locally |
React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, Lucide |
| warp-dithering-shader | "DITHER LAB" integration of the verbatim DitheringShader WebGL2 component — seven procedural shape fields (warp, simplex, dots, wave, ripple, swirl, sphere) thresholded through random + Bayer 2×2/4×4/8×8 ordered dithering — dropped into shadcn components/ui and framed as a live 1-bit CRT console: a full-bleed Warp hero, a driving deck wired straight to the props/uniforms, a click-to-apply shape library, animated Bayer-matrix explainers, and a live props API mirroring the hero state |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, WebGL2, Lucide |
| warp-drive-shader-bridge | "WARP DRIVE" starship-bridge integration of the prompt's verbatim WebGL warp-tunnel shader (an orthographic full-screen quad of RGB-split light filaments steered by iMouse) dropped into @/components/ui — the signature NavReticle gauge locks to the tunnel's vanishing point and reads warp factor / heading / FPS off the shader's own onFrame loop, a docked helm console surfaces the raw iTime/iMouse/iResolution uniforms with a warpSpeed throttle, and the page tells the shadcn/Tailwind/TypeScript install story; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, Three.js, Lucide |
| warp-shader-hero | shadcn-style integration of the prompt's verbatim @paper-design/shaders-react <Warp> hero dropped into components/ui, framed as the "Paper Warp // Shader Lab" — a brushed-graphite instrument deck where the same hero becomes a live specimen: a parameter bay of faders promotes every Warp uniform (swirl, distortion, scale, rotation…) to a live control, a shape selector and four mood presets re-work the field, an editable four-stop palette, and an FPS/frame/uptime telemetry strip; fonts vendored locally |
React 19, TypeScript, Vite, Tailwind CSS v4, @paper-design/shaders-react, Lucide |
| waves-shader-oscilloscope | "OSCILLON" observation deck integrating the prompt's verbatim zero-prop ShaderComponent (a black-and-white Three.js coswarp interference field on a single full-screen quad) dropped into @/components/ui, framed as a phosphor signal analyzer — corner reticles, scanlines and an edge vignette over the live trace, a live-trace HUD plus a channel legend and a scope deck with a phase-lock meter, all driven off the same requestAnimationFrame clock the shader animates on; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, three.js, Lucide |
| vhs-noise-distortion-hero | shadcn/Tailwind/TypeScript integration of the prompt's verbatim vhs-hero-section.tsx — a corrupted VHS hero on React Three Fiber: a custom six-octave fbm domain-warp GLSL shader (edge-growing chromatic aberration, a sweeping tracking-error band, glitch sparks, scanlines, film grain, vignette) over 800 cursor-repelling red/white/cyan noise particles, a GSAP GlitchText headline (character scramble + RGB text-shadow pulse), and an aggressive GSAP entrance + looping hue-jitter timeline; dressed as a tape deck with a running HH:MM:SS:FF timecode and CRT chrome; fonts vendored locally |
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, Three.js, @react-three/fiber, GSAP, Lucide |
| webgl-flowing-gradient-shader | shadcn/Tailwind v4/TS integration of a raw-WebGL flowing-gradient fragment shader, framed as the "PRISMA Shader Lab" — a cursor-reactive fractal field with viewfinder chrome, a layers/glow/speed control rail, and a live FPS/time/resolution telemetry HUD | React, TypeScript, Vite, Tailwind CSS v4, WebGL, Lucide |
| webgl-rgb-shift-shader-hero | "CHROMA OSC" hero integrating the prompt's WebGLShader (a single RawShaderMaterial GLSL pass of additive sine ribbons with R/G/B chromatic-aberration) and LiquidButton, framed as a live oscilloscope instrument with corner brackets, an RGB-split headline, a sweeping scan line, and mono telemetry strips reading real FPS / shader uptime |
React, TypeScript, Vite, Tailwind CSS, shadcn structure, three.js, CVA, Radix Slot, Lucide |
Templates (113)
| Project | Description | Stack |
|---|---|---|
| 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 |
| premium/shadcnblocks/aspect | Same-to-same clone of shadcnblocks.com's premium "Aspect" shadcn/ui template — a 17-page dark-first fintech/SaaS marketing site (home, features, features/support, pricing, about, blog + 4 posts, faq, contact, login, signup, privacy, terms, cookie-policy) on near-black obsidian surfaces with hairline white-alpha borders, a bordered max-width container, vendored Figtree typography, and a violet "star" accent; full next-themes-style light/dark system driven by HSL custom-property tokens with a persisted theme toggle, a dismissible announcement banner, a sticky 80px header with a Product mega-menu, a hero dashboard mockup, a logo marquee, a tabbed feature showcase, testimonials, a layered "Cash Positioning" dashboard reveal, FAQ accordions, and a monthly↔annual pricing toggle; all interactions rebuilt in vanilla JS, every asset (images, logos, Figtree woff2) vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Figtree |
| 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/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 |
| atelier-archive-quiet-luxury | "Atelier Archive" quiet-luxury architectural design system — a single cream-paper (#fdfbf9) magazine spread on Zodiak-style serif (Cormorant Garamond, weights 300/400 + italics) and General Sans-style grotesque (Hanken Grotesk), built inside a 1440px page with vertical neutral-200 border-grid; sticky three-column blur header, a 65/35 hero opening spread ("A Study in Quietude") with a Fig 1.0 label and animated 1px-underline CTA, an interactive Room Index whose serif titles go faint→black + roman→italic on hover, alternating 70/30 and 40/60 room sections with sticky product-detail cards (Ref. numbers, material/dimension specs, white-on-hover backgrounds), a four-column "Close Inspection" material grid with white-overlay slide-up reveals, and an archival four-column footer; 1.2s translateY fade-ins via IntersectionObserver, 2s cubic-bezier(.2,.8,.2,1) image scales; fonts and procedural grayscale architectural/material SVG imagery vendored locally, fully offline | HTML, CSS, vanilla JS, SVG, Cormorant Garamond, Hanken Grotesk |
| aurum-neural-ai-landing | "Aurum" neural-network luxury AI landing page built same-to-same from a reference — a gold-on-black (#0a0a0a base, #a78b71/#c9b8a0/#e8d5b7 gold spectrum) glassmorphic single page on Playfair Display Italic + Inter, with a 32px radial dot grid, a breathing live-status pill, a 16:9 hero "Aurum Core" node ringed by four grayscale-to-color satellite media cards wired in by animated pulsing-branch + dashed-flow SVG bezier curves that redraw on pointer parallax, a 4-up glass features grid, a 3-tier pricing block with a highlighted Pro card and monthly/annual switch, a 2-up grayscale-to-color studio section, and a 5-column footer with a Join Digest field — all reveal-up on IntersectionObserver; fonts vendored and gold/black procedural SVG imagery generated locally, fully offline | HTML, CSS, vanilla JS, SVG, Playfair Display, Inter |
| 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 |
| 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 <canvas> banner, a bordered three-column post-card grid with a category filter (desktop pill buttons with count badges, mobile dropdown), and article pages with a full-width hero, a prose body (headings, lists, code blocks), a sticky sidebar (author card + "On this page" TOC scroll-spy + "Try Magic UI Pro" promo), and a "Read more" related-posts section; card hover scale/underline motion throughout, fonts from CDN, all imagery vendored locally, fully offline |
HTML, CSS, vanilla JS, Geist Sans, Geist Mono |
| 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 <details> 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 |
| 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 | 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 |
| premium/tailwindcss/catalyst | Pixel-faithful clone of the Tailwind Plus "Catalyst" application UI kit demo — a 37-page fictional event-management admin dashboard (home dashboard, events list + 4 event details, orders list + 26 order details, settings, and login/register/forgot-password auth pages) on the Tailwind v4 zinc neutral ramp (OKLCH/lab) with a blue-500 focus accent, self-hosted Inter Variable, and built-in light/dark color schemes; a fixed w-64 sidebar app layout (team-switcher dropdown, Home/Events/Orders/Settings nav with an active left-edge pill, Upcoming Events list, Support/Changelog, and an Erica account dropdown) wrapping a rounded white content panel that floats on a zinc-100 page, plus a separate centered card auth layout; the original's compiled Tailwind v4 stylesheet and class-driven markup are preserved for fidelity while the proprietary Headless UI + Next.js runtime is replaced by a small vanilla-JS layer reimplementing the account + team-switcher dropdown menus (blue-500 focus highlight), the mobile slide-in sidebar over a black/30 backdrop, and a manual dark-mode toggle mirrored onto html.dark; status badges (lime "On Sale"/"Successful", zinc "Closed"), whole-row-clickable tables, KPI stat cards, definition-list order details, and a full settings form; Inter Variable font, event photos, the Catalyst logo, the user avatar, and the Canada flag all vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Inter |
| premium/shadcnblocks/charter | Pixel-faithful clone of the shadcnblocks "Charter" fintech / developer-API marketing template — a 9-page site (home, about, pricing, faq, contact, login, signup, terms, privacy) on a near-white / deep-navy palette with a deep-indigo primary, built as self-contained HTML + CSS + vanilla JS; Hubot Sans display headings (tight tracking), Inter body, IBM Plex Mono eyebrows/code, and a dotted-grid texture with soft indigo→green hero glows; a dismissible announcement bar, a sticky blur header with a Product dropdown and a sun/moon light/dark theme toggle (persisted in localStorage, honoring prefers-color-scheme with a no-flash boot script), a hero with a Transfers dashboard mockup + floating curl code panel, a "Code security" bento grid, an "AI chatbot" four-card grid, a dark "Launch today / $29.99" CTA panel, a three-tier pricing block, grouped FAQ accordions with a testimonials wall, a Book-a-demo form, and centered auth cards; IntersectionObserver scroll-reveal entrances and full hover states throughout, all imagery/logos vendored locally, no build step, fully offline in both light and dark mode | HTML, CSS, vanilla JS, Hubot Sans, Inter, IBM Plex Mono |
| 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 |
| premium/magic-ui/changelog | Pixel-faithful clone of Magic UI's "Changelog" template — a single-page release-notes timeline on the shadcn/ui design language with the vendored GeistSans typeface and an OKLCH neutral palette (light default + system-aware dark via .dark, persisted to localStorage); a bordered "Changelog" header with a sun/moon theme toggle that rotate-scale-crossfades between icons, and a max-w-5xl vertical timeline of three release entries (2.1 Kimi K2 Support, 1.2 Enhanced AI Agent Interface, 0.9 UX Improvements) each with a sticky left date + version badge, a bg-border rail with a bg-primary dot, category pills, media (a looping <video controls> and Unsplash images), feature bullets, a Shiki github-light/dark syntax-highlighted code block with a copy button, and collapsible Features / Bug Fixes accordions that height-animate (.2s ease-out) with a rotating chevron; responsive single-column below md; GeistSans font, demo video, favicon, and imagery vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, GeistSans |
| 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 |
| codeforge | Pixel-faithful clone of the Magic UI "CodeForge" AI coding-agent SaaS landing template — a single long-scroll light-theme page (all nav links are in-page anchors) on a #f9fafb canvas with a sky-blue (#00a5ef) accent, vendored Geist + Geist Mono fonts, hairline #e5e5e5 borders and a #2cd5ff→#2c30ff gradient; a sticky blur navbar with a working light/dark theme toggle, a hero with a shimmer "Start for free" button, feature tabs and a radial-glow starry image, a bordered logo cloud, an animated terminal typewriter card, a red/green code-diff review card, MCP-install + parallel-agents bento cards, a dotted-canvas world map, a three-step "Setup. Connect. Build. Ship." grid, three vertical auto-scrolling testimonial marquees with edge-fade masks, a scroll-velocity skewed text band, a Monthly/Annually pricing toggle ($12/$24 ↔ $120/$240), a single-open FAQ accordion, a glowing final CTA, and a four-column footer; IntersectionObserver blur-in scroll reveals throughout, Geist fonts + Unsplash hero + randomuser avatars vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist, Geist Mono |
| commit | Pixel-faithful clone of the Tailwind Plus "Commit" changelog / release-notes template — a single scrolling page for a fictional "open-source Git client for macOS minimalists" on an OKLCH gray ramp with a sky-blue accent, Mona Sans display + Inter body; a fixed, always-dark left intro panel (Commit wordmark logo over a faint skewed constellation line-art SVG and a radial sky→blue glow, a font-light headline with a sky-300 accent, a description, an email-signup form with a layered gradient "Get updates →" button + sky focus ring, and Documentation/GitHub/RSS social link chips that scale a pill and shift to sky-300 on hover, plus a "Brought to you by Joe Davola" credit) beside a scrolling right column of four dated changelog entries (Commit message suggestions / Project configuration files / Dark mode support / Commit v0.1.0), each with a rounded-xl product-screenshot card with an inset ring, a date stamp + gutter tick, a font-display title, prose, and an "[sparkle] Improvements" list, divided from the left panel by a 6×8 dotted-seam SVG rule; the original's compiled Tailwind v4 stylesheet and class-driven markup are preserved for fidelity while the proprietary Next.js + next-themes runtime is replaced by a small vanilla-JS shim reimplementing the same behaviours — a sun/moon theme toggle that flips class="dark" on <html>, persists to localStorage, and respects prefers-color-scheme via an inline no-flash boot script, plus the decorative email form; Inter + Mona Sans fonts, the four changelog screenshots, and the favicon all vendored locally, fully offline |
HTML, CSS, vanilla JS, Inter, Mona Sans |
| compass | Pixel-faithful clone of the Tailwind Plus "Compass" online-course / personal-website template — a 29-page editorial reading experience (a course overview home, 20 lesson article pages sharing one article layout, an interviews grid, 6 individual interview detail pages, and a resources page) for a fictional self-help course on a light OKLCH gray ramp with self-hosted Inter Variable + Geist Mono; a fixed left course sidebar listing four chapters of lessons (active lesson aria-current=page), a sticky frosted top bar with breadcrumb + Course/Interviews/Resources/Account nav, masked hero-background band, and prose articles with light/dark diagram images, Shiki code blocks, and a right "On this page" scroll-spy TOC; the original's compiled Tailwind v4 stylesheet and class-driven markup are preserved for fidelity while the proprietary Headless UI + Next.js runtime is replaced by a small vanilla-JS shim reimplementing the same behaviours — sidebar collapse (data-sidebar-collapsed), mobile menu, Account dropdown menu (Settings/Support/Sign out), IntersectionObserver TOC scroll-spy, hover/focus data-* states, and native <video> playback with an off-screen mini-player dock; Inter + Geist Mono fonts, all imagery and lesson/interview video vendored locally, fully offline |
HTML, CSS, vanilla JS, Inter, Geist Mono |
| cyber-serif-template | "Cyber Serif" classical-tech template built same-to-same from a superdesign reference (live host blocked by egress, so grounded in the detailed prose spec) — a deep-black #050505 / emerald #10b981 / #EBEBEB system pairing vendored Newsreader serif display (300-weight, -0.04em tracking, leading 0.9, one italic emerald word), Inter body, and Space Grotesk 10px/0.2em uppercase technical labels, with glassmorphism (rgba white 2% + 12px blur), a fixed nav that blurs on scroll with a 360deg-rotating command-icon logo mark and 1px emerald expanding-underline links plus a pulse-glow CTA pill, a 100vh split hero with an emerald pulse-dot label and a parallax floating glass mockup (animated bar chart, latency/uptime metric cards), a 3-column spotlight-card feature grid where each card has a moving shimmer border (::after 3-color emerald gradient at 200% animating 4s) and a cursor-tracking radial spotlight (::before 600px circle following --mx/--my), an IntersectionObserver count-up benchmark table with pulsing check icons and alternating muted/emerald columns, an animated horizontal gradient-text CTA, and morphing blurred emerald background glows (8s border-radius morph) — all staggered reveal-up on cubic-bezier(0.16,1,0.3,1); fonts vendored locally, fully offline | Static HTML/CSS/JS, Newsreader, Inter, Space Grotesk |
| devtool | Pixel-faithful clone of the Magic UI "devtool" AI Agent SDK startup landing template — a dark, near-black (oklch 16.48%) page with a violet (oklch 78% .13 291) primary accent on vendored Geist Sans + Geist Mono, framed inside a 1000px column with faint full-height vertical border guides; a sticky bordered header (terminal >_ logo, nav, violet "Get Started" pill, mobile menu) and a footer with a giant ghosted "AGENT SDK" wordmark are shared across all pages. The long home page reproduces an announcement pill, a hero with floating CSS-3D cubes + a vendored company-logo row, a tabbed syntax-highlighted Swarm code panel, a 3-up use-cases row, a 6-card Features grid, a count-up Statistics band (10K+/50K+/1M+), a multi-column auto-scrolling vertical Testimonials marquee (pause-on-hover, gradient mask), a Yearly/Monthly pricing toggle with three plans (Basic/Pro/Enterprise "Most Popular"), a Community globe with orbiting avatars, a Blog teaser, and a glowing final CTA; plus a /blog articles index, three blog-post articles (how/why/introducing) with cover, author row, prose body + comparison table, and a faithful reproduction of the source's Next.js 404 at /download. BlurFade entrance reveals via IntersectionObserver, marquee/orbit/pulse keyframes ported from the original Tailwind v4 stylesheet; Geist fonts, avatars, blog covers, and company SVGs vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Geist Sans, Geist Mono |
| 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 <details> 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 |
| echo | Faithful 11-page clone of the "Echo" premium Next.js portfolio template by shadcnblocks.com — a minimal, typography-forward developer/maker portfolio on the shadcn/ui neutral monochrome theme (near-black ink on white / near-white on black), vendored variable Funnel Sans, and a floating icon-pill top nav with a GitHub-stars button and a light/dark theme toggle (localStorage-persisted, prefers-color-scheme, no-flash boot); pages are home (avatar intro, Selected work 2×2 grid, My stack icon row, About + photo tiles, Experience roles/skills two-column, Latest writing rows), projects (filter tabs All/Featured/Open Source/Personal over a 14-card grid), about (hero photo, Story, Favorite movies/cars list rows, Currently building, Latest writing), articles (4-row list), four project detail pages (cover, intro, project-stack icons, alternating image/caption showcase blocks, Highlights bullets, More projects) and three article detail pages (prose body with headings, blockquote, bullet lists, dark syntax-highlighted code block, Copy-link clipboard, Related articles); all colors driven through light/dark CSS custom-property tokens, IntersectionObserver entrance reveals, card/row/nav hover states, and a contribution-graph footer; 50 webp/svg images and Funnel Sans woff2 vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Funnel Sans |
| 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 <details> 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/shadcnblocks/hatch | Pixel-faithful clone of the shadcnblocks "Hatch" freelance product-designer portfolio template — an 18-page editorial site (home, about, services index + 4 service detail pages, work index + 6 case-study detail pages, contact, and the source's 404/subscribe/book routes) on a white/near-black palette with a signature red-orange CTA (#fb001a) and a native light/dark theme toggle (localStorage + prefers-color-scheme, no-flash boot); Castoro serif display, Inter body, IBM Plex Mono eyebrows and Caveat all self-hosted; a red promo bar, a sticky blur header with desktop nav, theme toggle, "Book a call" CTA and a slide-in mobile hamburger menu, a serif hero with a trust-avatar row, a 3-column work grid with gradient "View project" hover overlays and image-zoom, a "calm process" arrow list, a four-card services teaser, a two-tier pricing block ($1,500 one-time / $2,000-a-month subscription with a "Most Popular" badge), case-study detail pages (role/timeline/focus meta, cover, Challenge/What I Did prose, gallery, more-work grid), service detail pages (deliverable groups, starting price, recent work), an about timeline, and a contact page with details + message form; IntersectionObserver scroll-reveal entrance animations, full hover states, fonts and all imagery vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Castoro, Inter, IBM Plex Mono, Caveat |
| emerald-ai | Pixel-faithful clone of Shipixen's "Emerald AI" landing page template — a single long-scroll dark-first AI-SaaS marketing page on a near-black gray-950 canvas with glassy violet→fuchsia gradient accents and a teal/emerald glow, Rubik + Roboto Serif typography, and a full light/dark theme toggle driven by CSS custom-property tokens (localStorage-persisted, no-flash boot, dark default); a top trust strip, a sticky blur header with nav, theme toggle and mobile hamburger menu, a split hero (Product-of-the-Day badge, gradient headline, Buy/Learn CTAs, $350-off pricing pill, avatar-stack social proof, glassy product panel), alternating feature sections with media, glowy full-width feature/CTA banners, a 4.9/5 rating band, a masonry testimonial wall, a six-card bento feature grid, an aria-expanded FAQ accordion with animated height + chevron rotation, and a multi-column footer; IntersectionObserver scroll-reveal entrances and hover states throughout, all images and avatars vendored locally, no build step, fully offline in both light and dark mode |
HTML, CSS, vanilla JS, Rubik, Roboto Serif |
| premium/shipxen/gnomie-ai | Same-to-same clone of Shipixen's "Gnomie AI" garden-design landing-page template (a Page UI demo) — a single long-scroll SaaS marketing page for a fictional AI garden-design tool on a magenta/pink (#e52679) + lime-green (#84cc16) accent system over white, with Montserrat display headings and Hind body and a working light/dark theme toggle (CSS custom-property tokens, localStorage-persisted, honors prefers-color-scheme); a sticky blur header (gnome logo, Features/Docs nav, sun/moon theme toggle, lime "Try Gnomie for free" CTA, mobile hamburger), a green-tinted hero with a cactus emoji, plain two-line headline and a dark app-screenshot media frame inside a pink→orange→lime gradient border, a rotating auto-advancing "Made with Gnomie" user-card strip, two alternating feature/benefit sections with icon feature lists and a pink bonus card, a four-card "Your garden, reimagined" before/after case-study grid with image-zoom hover, two stacked-avatar "110k+ happy gardeners" CTA banners, a six-card "Gardeners Love Gnomie" testimonial grid, a two-tier pricing block (Casual $25/mo·$250/yr, Enthusiast $39/mo·$399/yr) with a Monthly/Annually toggle that swaps prices, a ten-item FAQ accordion (chevron rotate + height animation, open question turns pink) on a pink panel, and a multi-column Shipixen footer; IntersectionObserver scroll-reveal entrances and hover states throughout, all picsum imagery and avatars vendored locally, no build step, fully offline in both light and dark mode | HTML, CSS, vanilla JS, Montserrat, Hind |
| emerald-glass-system | "Obsidian" glassmorphism design-system showcase — a monochrome black/zinc page with vibrant emerald (#34D399) highlights, vendored Inter, a floating blur(20px) glass pill nav, a 92vh dark hero with a 22vw CREATE backdrop word and a vertical stack of glass stat cards, a light feature grid with a dark System Analysis card animating progress bars, a #18181B workflow block with numbered glass steps and a 3D-rotated code mockup with a bouncing Deployed tag, a 3-tier bento pricing grid, and a black editorial footer; grain overlays on every dark surface, reveal-on-scroll motion, fully offline | HTML, CSS, vanilla JS, Inter |
| enterprise-admin-saas-landing | "Sentra" corporate-professional enterprise admin / security SaaS landing page built same-to-same from a superdesign reference — a strict 40px-grid white/slate layout in vendored Satoshi with a #2563eb primary, a fixed 64px glass nav (rgba white + 12px backdrop blur), a 72px hero over a radial-masked 40px grid with a pulsing-green SOC2 status pill and dual CTAs, a simulated browser window with a 256px sidebar dashboard (system-status header, 3-up stat cards, sticky-header audit-log table with colored status badges and blue hover rows), a 6-card module grid that lifts to white-with-shadow on hover, a dark #020617 stats band with concentric-ring decor and IntersectionObserver count-up KPIs (ease-out-quartic, 2 decimals for percentages), a split security section with cert checklist and clickable glass-morphism policy toggles plus an overlapping slate-800 "Threat blocked" card, a chevron accordion FAQ, a dark rounded CTA panel, and a 6-column footer with a pulsing system-status dot — all fadeInUp on scroll; Satoshi vendored locally, fully offline | HTML, CSS, vanilla JS, Satoshi |
| disruptor-brutalist-template | "Disruptor" neo-brutalist style-guide template recreated from a superdesign reference — a strictly limited Volt-green (#CCFF00) / black (#000) / dark-grey (#121212) / white industrial system on vendored Ranchers (up-to-180px all-caps headlines, leading 0.85, 8px solid text-shadow) + Space Mono technical labels + Plus Jakarta Sans body + Archivo numerals, with only hard 4px/8px black borders and solid 8px offset "neo-shadows" (no blur, no gradients), brutalist press-into-shadow buttons, tilted sticker badges, a fused white-input/black-button email form, a rotated-sticker social-proof bar, a split black-old-way vs volt-better-way comparison grid, white process-blueprint cards with white neo-shadows + 3%-opacity Ranchers watermark numerals + rotated volt STEP tags, a fixed 200px right-edge multi-strip vertical-rl blueprint sidebar, a live Archivo countdown timer, IntersectionObserver reveals, and infinite CSS marquees; fonts vendored, all imagery inline SVG, fully offline | Static HTML/CSS/JS, Ranchers, Space Mono, Plus Jakarta Sans, Archivo |
| editorial-naturalism-design-system | "Studio/Nord" high-contrast dark-mode editorial design system blending Digital Naturalism with brutalist technicality — a stone-black #0C0A09 base with an acid-lime #D4F268 accent, warm-charcoal surfaces, a fixed 4% fractal-noise overlay in overlay-blend, vendored Newsreader (200/300/400 + italic) serif display + Instrument Sans UI type, a glass pill nav that blurs on scroll, a 5:7 hero with an italic lime accent word and a 10rem rounded-top arch image carrying a 6deg floating lime sticky-note and a frosted Fig. No catalog label, a radial-gradient serrated postage-stamp section divider, a folder-tab bento panel (rotated -2/-1deg tabs, active tab lime + scaled, 40px 3% grid) that swaps content on click, a 3:4 grayscale-to-color showcase grid with one Y-offset card, a rotate(2deg) to 0 lime sticky-note CTA, and a giant Newsreader footer wordmark; IntersectionObserver reveal-up motion on cubic-bezier(.4,0,.2,1), fonts + procedural abstract imagery vendored locally, fully offline | HTML, CSS, vanilla JS, Newsreader, Instrument Sans |
| finorio-saas-landing | Pixel-faithful clone of the "Finorio" finance / money-management SaaS template (7 pages: home, features, pricing, contact, login, register, forget-password) — a light lavender (#c6bdfa/#8c71f6) / off-white (#f9f8fb) palette on the vendored "Stack Sans Text" rounded geometric font, a fixed floating white pill navbar, a phone-mockup hero with App Store / Google Play badges and a 500k+/4.5 stats bar, a 2×2 soft-gradient feature-card grid (balance card + CSS bar chart), alternating image/text experience rows, a Monthly/Annually pricing toggle (Annually $0.00/$5.59/$9.59 ↔ Monthly $0.00/$6.99/$11.99) with three plan cards and a featured-column comparison table, a testimonial grid with avatars + amber stars, a +/- FAQ accordion, a lavender CTA panel with angled phone mockups, a four-column footer, plus a password eye toggle on the auth pages, a mobile hamburger menu, and IntersectionObserver fade-and-rise scroll reveals; font, webp imagery, and inline logo/badge SVGs vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Stack Sans Text |
| flux-editorial-saas-landing | Pixel-faithful high-contrast editorial B2C SaaS landing page for "Flux" rebuilt same-to-same from a superdesign reference — brutalist-lite aesthetic with massive Anton display type, Satoshi body, a #FFE17C golden-yellow accent over white/charcoal, a 40px grid background, a 15-degree rotated yellow highlight bar behind the hero keyword, an abstract browser-UI mockup with a properties panel, a charcoal/dark-gray problem-vs-solution split, a bento feature grid with animated pulse blocks + code snippet + avatar stack, a sticky 1:2 how-it-works flow with giant numerals, alternating light/dark testimonial cards, and a yellow final CTA with a 26vw ghost wordmark; Anton + Satoshi vendored locally, fully offline | HTML, CSS, vanilla JS, Anton, Satoshi |
| forest-sage-organic-store | "Verde" earthy editorial organic-grocery storefront template — a high-contrast Forest (#01472e) / Sage (#ccd5ae) / Olive / Cream "Forest and Sage" palette, vendored Anton + Inter, a fixed blur-pill nav with a white cart badge, a 23vw ANTON hero with per-letter rise-reveal and three floating organic SVG produce cards (3rem radius, float + scroll parallax), a forest marquee strip, a 5rem-rounded olive shop section with a 15vw heading, a rotating circular CTA, and a 3-column product grid with image-scale hover + blur-reveal "Quick Add" overlays, an editorial story band, and a 12-column forest footer with an underline-only newsletter input — all reveal-up on IntersectionObserver with a (0.16,1,0.3,1) motion signature and a fixed 4% SVG noise overlay; fully offline | HTML, CSS, vanilla JS, Anton, Inter |
| front-centre | Pixel-faithful clone of Shipixen's (Page UI) "Front Centre" landing page template — a single-page marketing site for a fictional front-end learning platform, clean and playful with a soft cream/pale-yellow hero on white, bold Roboto display headings over Roboto Mono body copy, cyan primary #06b6d4 and yellow secondary #eab308 accents, and a full light/dark theme toggle (honors prefers-color-scheme, localStorage-persisted, no-flash boot); an announcement bar, a shield-logo navbar with theme toggle, a centered hero (laurel Product-of-the-Day badge, "$50 off" note, avatar-stack + 5-star social proof) over a gradient-framed dark app screenshot with floating UI widget cards, a pale-cyan "used by the best" brand-icon band, alternating check-bullet feature rows, a yellow-wash "interactive projects" section, a 2×2 courses grid with autoplay looping muted videos, a "12000+ developers" band, a 3-column masonry testimonial wall with verified-tick quote cards, a sign-up CTA, a Radix-style FAQ accordion (chevron rotation + height animation), and the Shipixen marketing footer; IntersectionObserver scroll-reveal entrances and hover lift/darken states throughout, all assets vendored locally, no build step, fully offline in both light and dark mode |
HTML, CSS, vanilla JS, Roboto, Roboto Mono |
| gen-z-neobrutalist-landing | "flok" expressive Gen-Z neo-brutalist app landing page built same-to-same from a superdesign reference — a saturated tri-color system (Acid #ccff00 / Electric Purple #7000ff / Hot Pink #ff0099 / #0a0a0a ink) on Space Grotesk + DM Sans (vendored), a fully-rounded white blur nav pill with hard 6px black shadow, an acid-green hero with two blur(70px) decorative blobs, a purple→pink gradient headline, dual brutalist-shadow CTAs and a 3°-tilted brutalist phone mockup (8px frame, 3rem radius, tilted feed posts + acid action tab) ringed by five independently floating emoji stickers, a -2° rotated black/white-bordered scrolling marquee, a 12-column 7/5/12-span bento grid (gray card with a giant 📍 popping out, black neon card, full-width pink card with an animated bar-chart mini-dashboard) with ±1.5° card rotations, a 3-up rotated testimonial grid, a one-open-at-a-time brutalist FAQ accordion (icon rotates 45°), a hot-pink giant CTA with 20%-opacity 💣/🦄 stickers, and a white footer with a 30vw 5%-opacity "flok" ghost wordmark; signature cubic-bezier(0.175,0.885,0.32,1.275) bounce on every hover, float/wobble/pop-in keyframes, IntersectionObserver reveals, fully offline | HTML, CSS, vanilla JS, Space Grotesk, DM Sans |
| heavyweight-brutalist-store | "HEAVYWEIGHT®" industrial brutalist gear-store template rebuilt same-to-same from a reference — a Concrete (#f2f2f2) / Ink (#0a0a0a) palette with a single red (#dc2626) accent for live status, vendored Anton + Space Grotesk, a persistent 4%-opacity animated fractalNoise grain overlay, a mix-blend-difference fixed header with an Est. 2024 — NYC sub-label and a right-shifted vertical nav, a 64px floating white cart button with a red count badge that pulses on add, an asymmetric 100vh hero (42% low-set text-9xl HEAVY/DUTY/GEAR headline + 65% off-cropped grayscale image with a -90deg "Collection 004" label), a snap-x drag-scroll Essentials strip of 3:4 cards with hover-fade secondary images and detail badges, a sticky-left 12-column Construction info grid with border-l-2 architecture specs and 4:5/1:1 macro images, a broken/staggered 12-column Live Inventory grid with strike-through out-of-stock sizes and a JS live-stock ticker, a rotated 3-column masonry social-proof wall, and a deep-ink 6-column footer under a 10vw ghost HEAVY wordmark — grayscale-to-color hover, line-through link hovers, and IntersectionObserver reveals throughout; fonts + procedural imagery vendored, fully offline | HTML, CSS, vanilla JS, Anton, Space Grotesk |
| hive | Pixel-faithful clone of the Shadcnblocks "Hive" premium template — a 22-page monochrome branding-agency site (home, studio/about, services + 4 service details, work/projects + 12 project details, contact, careers) on the neutral shadcn palette (#fff/#0a0a0a/#f5f5f5/#e5e5e5) with Inter + Instrument Serif; a sticky blur header (hamburger → fullscreen centered overlay menu, flower logo mark, "Work with Hive" pill, a live-clock pill, and a sun/moon theme toggle persisted to localStorage with a no-flash boot script), full light AND dark themes driven entirely by CSS custom properties, IntersectionObserver fade-and-rise scroll reveals, image hover-zoom, a project-grid category filter, a multi/single-select pill contact form, and a shared dark footer; all 90+ webp project/team/testimonial images and fonts vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter, Instrument Serif |
| premium/tailwindcss/keynote | Pixel-faithful clone of the Tailwind Plus "Keynote" conference landing template (the fictional "DeceptiConf" event — "A design conference for the dark side") — a single long-scroll page on a soft indigo-50 field with a blurred diagonal blue/teal brand glow bleeding behind the hero and schedule, DM Sans display + Inter body + a monospace accent for dates/times, and a blue-600/blue-900 ink palette; a flex-wrap header (two-tone chevron DeceptiConf logo, centered mono "04-06 of April, 2022 · Los Angeles, CA" row, blue "Get your tickets" button), a hero with a 4-up stats row (Speakers 18 · People Attending 2,091 · Staples Center · Los Angeles), a Speakers section whose left day-tab group (Opening Day / Speakers & Workshops / Interviews) swaps a panel of six notched ticket-stub portrait cards (SVG clip-path, offset blue-300 border frame, scale-up-on-hover image) per day, a Schedule section rendered as three day columns on desktop and a swappable day-tab list on mobile (talk name, title, mono time slot, hairline dividers, a Lunch row), a 6-logo sponsors cloud (Transistor/Tuple/StaticKit/Mirage/Laravel/Statamic), an indigo newsletter card with a blurred glow + email pill, and a footer; the proprietary Headless UI + Next.js runtime is replaced by a small vanilla-JS shim reimplementing both accessible tab groups (arrow-key navigation, aria-selected) plus CSS hover states; Inter + DM Sans fonts, 18 speaker photos, sponsor SVGs, and background glow JPEGs all vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter, DM Sans |
| 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 |
| premium/shadcnblocks/kinto | Pixel-faithful clone of the shadcnblocks "Kinto" journaling-app marketing template — a 14-page warm editorial site (home, about, pricing, blog index + 6 posts, changelog, login, signup, privacy, terms) in a cream/paper light mode and near-black dark mode with a gold accent, vendored DM Serif Display (italic accent words) / DM Sans / JetBrains Mono fonts; a floating pill header with a persisted, prefers-color-scheme-aware light/dark theme toggle and mobile menu, a hero with a floating insight card and phone mockup, stat rows and recurring-theme/emotional-tone charts, a dashboard mockup, a "story so far" 11,975+ counter block, a testimonial wall, a two-plan pricing comparison on a permanent dark band, a numbered FAQ, split-screen auth pages with a serif pull-quote, a year-watermarked changelog timeline, blog articles with mono margin-notes, and long-form legal pages; IntersectionObserver scroll reveals and hover states throughout, all fonts and images vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, DM Serif Display, DM Sans, JetBrains Mono |
| lumina-neobrutalist-saas-landing | Pixel-faithful neo-brutalist SaaS landing page for "Lumina" with hard-offset black shadows, Cabinet Grotesk + Satoshi type, a browser-mockup dashboard, an infinite brand marquee, and press-down push buttons | HTML, CSS, vanilla JS, Cabinet Grotesk, Satoshi |
| lumina-portfolio-template | Premium editorial portfolio template rebuilt same-to-same from a superdesign reference — a navy #171e19 / sage #b7c6c2 design system with cyan/taupe/charcoal supports, vendored Anton + Plus Jakarta Sans, a mix-blend-difference fixed nav, an 18vw Anton hero with a sage text-outline second line and floating 120px-blur ambient orbs, a white asymmetric 2-column masonry "Selected Works" grid with 96px hover-reveal "View" discs and image scale-1.1, a navy featured section with a cyan -48px offset square behind a grayscale image, a #fafafa 12-column capabilities list with hover-extending line prefixes, a charcoal testimonial carousel with a 30rem ghost quote mark, and a navy "Let's Create" footer; IntersectionObserver reveals, cubic-bezier(0.16,1,0.3,1) easing, fonts + procedural SVG imagery vendored, fully offline | HTML, CSS, vanilla JS, Anton, Plus Jakarta Sans |
| premium/shadcnblocks/lumen | Pixel-faithful clone of the shadcnblocks "Lumen" SaaS marketing template (shadcn/ui + Tailwind v4) — a 20-page site (home, about, pricing, blog index + 10 posts, faq, signin, signup, contact [the source's 404], terms, privacy) on the shadcn neutral OKLCH design system with soft pastel aurora gradients, Inter + IBM Plex Mono, and a built-in light and dark theme (sun/moon navbar toggle persisted to localStorage, prefers-color-scheme-aware, no-flash boot); a shared sticky blur header (Lumen wordmark, Features dropdown, theme toggle, Sign in, Get started, mobile hamburger) and a four-column footer with app-store badges; the home page reproduces an aurora hero with a dashboard mock, a logo marquee, a 6-card feature grid, alternating feature-showcase rows, a testimonial trio, a single-open FAQ accordion, and a Pro-Access CTA band; pricing adds two plan cards with a monthly/annual toggle and a full Free/Pro/Business/Enterprise comparison table, about adds a photo collage + stat strip + benefits showcase + "Why we began" story, blog adds a featured post, category filter tabs, and a card grid with pagination, and signin/signup are full-bleed split layouts with a vivid aurora panel; IntersectionObserver scroll reveals, hover states, accordion + marquee animation; all imagery, logos, and blog/author photos vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Inter, IBM Plex Mono |
| premium/shadcnblocks/metafi | Same-to-same clone of Shadcnblocks' "Metafi" fintech payments SaaS template — a 14-page marketing site (home, features, integrations, about, pricing, blog index + post, contact, login, signup, careers, privacy, terms, cookie policy) on the shadcn/ui design system with Tailwind v4-style OKLCH color tokens and the Inter typeface; a sticky backdrop-blur header and a dark bg-primary footer injected by shared JS, a working light/dark theme toggle (no-flash boot, localStorage persistence, honors prefers-color-scheme), a hero with a dashboard mockup and grayscale logo strip, a bordered feature grid, integration cards, a masonry testimonial wall, a single-open FAQ accordion, a blog card grid, a monthly/yearly pricing toggle that swaps prices, auth cards with social buttons, and long-form legal prose; IntersectionObserver scroll reveals, hover states, and a mobile hamburger menu; all fonts via CDN and imagery vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Inter |
| premium/shadcnblocks/mainline | Pixel-faithful clone of the "Mainline" open-source Next.js template by shadcnblocks (built with shadcn/ui + Tailwind 4) — an 8-page SaaS / product-management marketing site (home, about, pricing, FAQ, contact, login, signup, privacy) on the shadcn neutral OKLCH design system with a warm gold/tan primary, Inter + DM Sans, and a built-in light and dark theme (sun/moon navbar toggle persisted to localStorage, prefers-color-scheme-aware, no-flash boot); a shared floating dark-pill navbar (logo wordmark, hover/click Features dropdown, theme toggle, Login, GitHub, mobile hamburger) and a "Start your free trial today" CTA footer with a giant faint "mainline" watermark; the home page reproduces a split hero with a browser-mockup screenshot and dashed feature list, a grayscale logo cloud, a tabbed "Made for modern product teams" feature-card section, a resource-allocation block, a "Trusted by product builders" testimonial carousel, Free/Startup/Enterprise pricing tiles with a billed-annually switch, and grouped FAQ accordions; pricing adds a full Usage/Features/Support comparison table, about adds stat tiles + image collage + investors row, contact adds an inquiries form, login/signup are centered auth cards; IntersectionObserver scroll reveals, hover states, accordion height/chevron animation; all 38 images, the logo, and fonts vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Inter, DM Sans |
| midnight-editorial-template | "Midnight" dark brutalist-editorial fashion-studio template — high-contrast white-on-#050505 with a #0a0a0a footer, vendored Bricolage Grotesque (Clash Display stand-in) + Inter, orange/blue blur(120px) mix-blend-screen light leaks, a mix-blend-mode:difference fixed nav with a hover-fill contact pill, a 15vw FORM/MATTER hero overlapping a 4:5 grayscale portrait, a 4-up bordered stats grid with staggered reveals, two 12-column sticky-numeral narrative blocks with translate-on-hover Explore arrows, a 21:9 rAF parallax gallery, a two-up 4:3 hover gallery with fading black overlays and rise-up captions, and a footer with a giant clipped ghost wordmark + massive email CTA — all reveal-up on IntersectionObserver with a (0.22,1,0.36,1) easing; fonts and grayscale editorial imagery vendored locally, fully offline |
HTML, CSS, vanilla JS, Bricolage Grotesque, Inter |
| premium/shipxen/minimum-via | Same-to-same clone of Shipixen's "Minimum Via" landing-page template — a single quiet, minimalist agency/service marketing page on a near-white canvas pairing a "Roboto Slab" slab-serif display face with an Inter sans body, with a working light and dark theme (CSS custom-property tokens, sun/moon header toggle persisted to localStorage, prefers-color-scheme-aware, no-flash boot); a sticky blur header (logo, search + theme-toggle icon buttons, Install button), a centered hero ("Plain language. Great results." + lead + Hire us button + a 5-star avatar-stack proof row), a two-column "All you ever needed" service grid on a grey panel, a full-width product/dashboard showcase frame, a centered "Hire us for your next project" CTA, a three-card team row with grayscale-to-color photo hover, a "Work with the best" logo strip, a masonry testimonial wall, a "Simple can be extraordinary" closing CTA, a three-item FAQ accordion (chevron rotate + height animation), and a multi-column Shipixen footer; hover states throughout, images/avatars/dashboard vendored locally, fonts via Google Fonts, no build step, fully offline in both light and dark mode | HTML, CSS, vanilla JS, Roboto Slab, Inter |
| mobile | Pixel-faithful clone of the Magic UI "Mobile" app-landing template (the "Cal AI" demo) — a single-page mobile-app marketing site for a fictional AI scheduling app on a clean white canvas with a coral-red (oklch ~#fa5341) accent, self-hosted Geist Sans / Geist Mono, and tight -0.05em headline tracking; a centered hero (coral app-icon, "Smart scheduling powered by AI." H1, App Store badge) over a scroll-driven two-row horizontal iPhone-mockup marquee with edge fade masks, alternating sticky feature rows, a bento benefits block, an Embla-style benefits carousel with prev/next arrows that disable at the ends, a 3×2 coral-icon features grid, a four-column vertical testimonial marquee (alternating directions, pause-on-hover), Basic $0 / Pro $12 pricing, a height-animated FAQ accordion with chevron rotate, and a floating-tweet CTA above a minimal footer; scroll-parallax + IntersectionObserver reveals, Geist fonts, device PNGs and avatars vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist Sans, Geist Mono |
| 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 |
| 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 <details> 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 | 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 <details> 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 |
| 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/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 |
| 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 |
| nextmerce-saas-ecommerce | Pixel-faithful clone of the NextMerce SaaS e-commerce storefront template, rebuilt same-to-same as an 18-page static site — airy modern white/navy (#1C274C) design with an indigo-blue (#3C50E0) primary, rounded cards and soft shadows; home (hero carousel, category circles, new arrivals, promo banners, best sellers, countdown CTA, testimonials, newsletter), shop with/without sidebar, category, popular, product-details (gallery + tabs + recently-viewed carousel), cart, checkout, wishlist, blog (grid / grid-with-sidebar / details / details-with-sidebar), contact, sign in, sign up, mail-success and a 404, sharing a sticky header with nav dropdowns, a slide-in mini-cart, quick-view modal, quantity steppers, tabs and hover/entrance interactions; Swiper-powered carousels, fonts/icons/imagery vendored locally, fully offline | HTML, CSS, vanilla JS, Swiper |
| oatmeal-saas-kit | Pixel-faithful clone of the Tailwind Plus "Oatmeal" SaaS marketing kit (olive + Instrument Serif theme) — a 13-page site (home ×3, about ×3, pricing ×3, privacy-policy ×2, 404 ×2) for a fictional customer-support inbox product on a soft olive/cream OKLCH palette with an elegant Instrument Serif display face over Inter; a shared centered "Oatmeal." nav (Pricing · About · Docs · Log in · black "Get started" pill) and a four-column footer with a "Stay in the loop" email capture are consistent across every page; the original's compiled Tailwind v4 stylesheet and class-driven markup are preserved for fidelity while the proprietary @tailwindplus/elements module is replaced by a small vanilla-JS shim that reimplements the same command/commandfor behaviors — mobile-menu <dialog>, FAQ disclosures (plus↔minus icon swap), pricing Monthly/Yearly tabs, and a click-to-copy npm install snippet — plus an IntersectionObserver reveal helper; Inter + Instrument Serif fonts, logos, avatars, and screenshot imagery all vendored locally, fully offline |
HTML, CSS, vanilla JS, Inter, Instrument Serif |
| obsidian-elite-template | "Modern Obsidian" monochrome editorial template — a strict #080808-to-#FFFFFF palette with a 135deg silver gradient, an SVG fractal-noise overlay at 0.05 opacity, fluid 92vw layouts, vendored DM Serif Display (italic) + Geist Mono + Inter, a glass-pill nav with bordered links + white Join button, a frosted-glass hero (4rem radius) with an italic silver-gradient "the obsessed." headline and a 3-column monospace metadata bar, an editorial serif HH/MM/SS countdown with slash separators, a frosted-glass beta-capture form with a silver-btn and a "#0x" position success state, a mono stats/urgency row, a 4-up bento grid (hover-lit borders) including a 2x2 grayscale member-registry card, a centered value-prop statement, a 2-col border-left testimonial grid, a massive serif CTA, and a pill-shaped floating mobile bottom nav that reveals after the hero; cubic-bezier(0.16,1,0.3,1) slide-up reveals throughout, fully offline | HTML, CSS, vanilla JS, DM Serif Display, Geist Mono, Inter |
| organic-intelligence-wave | "Organic Intelligence" editorial-tech wave template rebuilt same-to-same from a superdesign reference — a warm cream #fcfbf9 / charcoal #171717 / indigo #4338ca palette on vendored Playfair Display (italic emphasis) + Inter + JetBrains Mono, a mix-blend-difference fixed header with a pulsing "System Online" pill, a 100vh hero with a 30s drifting indigo/purple blur-mesh and a giant serif "Design with intelligence" headline, a signature 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 |
Pixel-faithful clone of the Tailwind Plus "Pocket" mobile-app marketing template — a 3-page site (home, login, register) for a tongue-in-cheek stock-trading app on a neutral-gray scale with a cyan (#00b7d7) accent and self-hosted Inter Variable; the home page reproduces the full Pocket layout built around a reusable iPhone PhoneFrame SVG: a hero with an in-app chart AppDemo over a concentric-circle backdrop, an "As featured in" eight-logo news cloud, a dark primary-features section whose 3 tabs auto-rotate and cross-fade the phone's app screens (invite form / stocks list / buy shares) — a snap carousel with dots on mobile — a bordered 3×2 secondary-features icon grid, a dark "Get your first tips today" CTA, an animated 3-column reviews marquee of 14 cards with cyan stars, a Monthly/Annually pricing toggle over Starter $0 / Investor $7 / VIP $199 (dark featured) plan cards, and a 3-column FAQ; the proprietary Next.js + Headless UI + Framer Motion runtime is replaced by a small vanilla-JS shim reimplementing the mobile-nav popover, auto-rotating feature tabs, pricing toggle, marquee, and IntersectionObserver reveals, plus centered-card login/register pages; Inter font, phone-frame SVG, news-logo SVGs, and QR code all vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Inter | |
| premium/magic-ui/portfolio | Pixel-faithful clone of the Magic UI portfolio template (the open-source dillionverma/portfolio) — an 8-page personal developer-portfolio site: a single long-scroll home (hero with avatar, About, a 6-role Work Experience accordion, Education, a dark Skills pill row, a 2-column autoplay-video Projects grid, a ~21-entry Hackathons timeline, and a Get in Touch CTA), a paginated Blog index (7 posts across 2 pages), and 7 markdown blog-post pages; on the light #fff / #0a0a0a + dark #121212 dual-theme token set with the Geist variable font over a masked dotted-grid background, a fixed bottom floating pill dock (Home, Blog, GitHub, LinkedIn, X, YouTube + light/dark toggle), staggered blur-fade entrance animations via IntersectionObserver, click-to-expand resume cards, and localStorage theme persistence; Geist font, avatar/company/hackathon imagery, and project demo videos all vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Geist |
| plasma | Pixel-faithful clone of the shadcnblocks.com "Plasma" shadcn/ui template — a 15-page dark-first SaaS / developer-tool site (home, product, pricing, about, changelog, download, sign in, sign up, a Fumadocs-style docs hub + six docs sub-pages: installation, core-concepts, ai-prompts, file-systems, crm-csv, cli) for a fictional local-first automation engine, on a near-black indigo canvas (#000002) with a signature purple→magenta "plasma" gradient (#735fe9 → #ce47eb) used in hero headlines, the glowing footer CTA band, primary buttons and chart accents, Inter throughout; a dismissible promo banner, sticky blurred header with a Radix-style "Products" dropdown (chevron rotate), a theme toggle, and shared footer CTA band are reused across the marketing pages; the auth pages use a split card with a gradient noise-textured artwork panel + testimonial and a form with Google sign-in and password eye-toggles; the docs use a three-column shell (collapsible sidebar, ⌘K search, prose with copy-button code blocks, card grids, tabs, accordions, API tables, prev/next pager, and an "On this page" TOC); every color is driven through shadcn light/dark theme tokens with a localStorage-persisted no-flash toggle, IntersectionObserver scroll-entrance reveals, dropdown/accordion/tab interactions, fonts + imagery + logos vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter |
| primer | Pixel-faithful clone of the Tailwind Plus "Primer" info-product / book-course landing template — a single long-scroll page for a fictional icon-design book + video course ("Everything Starts as a Square" by Mira Lindehoff) on a white/slate canvas with an electric blue (#155DFC) accent, Cabinet Grotesk display + Inter body; a dark book-cover hero over a full-width slate-50 band with a 5-star testimonial and a blue angled blade, a blue-check "what you'll learn" intro, a sticky numbered section-tab nav (01–05) that tracks the active section on scroll with a gliding glow + underline, a "See more" table-of-contents expand, gradient screencast cards, illustrated resource cards (Figma / macOS-teardown / Discord), a full-bleed blue "Get the free sample chapters" banner with a generated square/circle glyph grid + email form, Essential ($15) / Complete ($229 elevated) pricing cards, a 3-column testimonials masonry, an author card with an overlapping circular photo over a grid watermark, and a mobile dropdown menu; IntersectionObserver scroll-entrance reveals, hover states, fonts + imagery + SVGs vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Cabinet Grotesk, Inter |
| 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 |
| protocol | Pixel-faithful clone of the Tailwind Plus "Protocol" API-documentation template — a 12-page developer-docs site (Introduction home, Quickstart, SDKs, Authentication, Pagination, Errors, Webhooks guides, plus Contacts/Conversations/Messages/Groups/Attachments API-resource pages) for a fictional messaging API, on an OKLCH zinc ramp with an emerald accent and a masked emerald→lime hero grid; a fixed left sidebar nav (Guides + Resources) with a sliding active-link highlight pill, a sticky frosted top bar (Command-K search pill, theme toggle, Sign in), centered prose content, and two-column resource pages with sticky dark tabbed code panels (cURL/JavaScript/Python/PHP Request + Response); the original's compiled Tailwind v4 stylesheet and class-driven markup are preserved for fidelity while the proprietary Headless UI + Next.js + Framer-Motion runtime is replaced by a small vanilla-JS shim reimplementing the same behaviours — localStorage dark-mode toggle, mobile nav drawer, Command-K search modal, sidebar scroll-spy highlight, code-panel tabs, copy-button, and a "Was this page helpful?" toggle; all four code-language variants captured per panel, fonts/icons vendored locally, fully offline |
HTML, CSS, vanilla JS |
| premium/tailwindcss/radiant | Pixel-faithful clone of the Tailwind Plus "Radiant" SaaS / startup marketing template — a 16-page site (marketing home, pricing, company/about, blog index, login, and 11 individual blog post articles) for a fictional B2B sales-intelligence product, on a signature warm-yellow→pink→violet gradient (#fff1be → #ee87cb → #b060ff) framed inside a rounded-4xl panel, with the Switzer display face, "plus-mark" hairline grid decorations on the nav/footer, dark contrast bento sections, plan cards + feature-comparison table, a testimonial + FAQ, and team/investor grids; the original's compiled Tailwind v4 stylesheet and class-driven markup are preserved for fidelity while the proprietary Headless UI + Next.js + Framer Motion runtime is replaced by a small vanilla-JS shim reimplementing the mobile-nav disclosure, IntersectionObserver scroll-reveals, and hover/focus data-* states; Switzer 400/500/600/700 fonts, logos, portraits, map tiles, app/feature screenshots, and blog imagery all vendored locally, fully offline |
HTML, CSS, vanilla JS, Switzer |
| raw-form-design-system | "Studio/Raw" brutalist e-commerce design system rebuilt same-to-same from a reference — warm-palette Swiss brutalism (#E4E2DD base, #DB4A2B accent) with vendored Clash Display + Satoshi, animated multiply-blend gradient blobs, an 18vw RAW/FORM. typographic hero, slide-from-left fill CTA buttons, 12vw OUTERWEAR/OBJECTS category dividers, a borderless 3/4 product grid with a Full Archive tile, a Designed for Movement campaign block, and a dark footer with a 10% 2024 watermark | HTML, Tailwind, vanilla JS, Lucide |
| realmagic-ticker-scroll | "Real Magic" Coca-Cola-flavored horizontal ticker-tape scroll built with GSAP ScrollTrigger — one continuous sentence ("In every bottle, discover the undeniable Real Magic of sharing pure Refreshment that brings us Together") laid out in a single nowrap flex line on a flat #f40009 red stage, read sideways as the pinned viewport scrubs the line horizontally (travel = scrollWidth − vw, end +=travel×1.15, scrub 0.6). Heavy Anton uppercase words alternate with faint italic Instrument-Serif connectives and outlined-stroke accent words (Magic/Together), with inline currentColor SVG glyphs (bottle, rising carbonation bubbles, signature ribbon swoosh, droplet, clinking bottles, heart full-stop) embedded like punctuation with variable per-item margins; idle looping glyph micro-motion, accent depth parallax, a cream scroll-progress bar, grain + vignette overlays, and an "Open happiness." outro after the pin releases. GSAP + fonts vendored locally, fully offline | HTML, CSS, vanilla JS, GSAP, ScrollTrigger, Anton, Instrument Serif |
| red-sun-editorial-template | "Red Sun" Coral & Ink editorial AI-code-generation template built from a detailed design spec — a high-contrast Coral (#EF4623) / Ink (#2D3B42) / Soft Peach (#FDF1EE) palette on vendored Instrument Serif + Manrope, a glass-on-scroll fixed nav with a 3°→12° rotating logo mark, a centered serif hero (italic coral second line) with ambient 110px coral blur blobs, a two-column value-prop bento with a dark floating "UI Simulator" mockup window (traffic dots, shimmering skeletons, glass "Code generated" status bar and looping mono code tags), a 48px-radius three-column features bento (large watermark-icon card, dark accent card, hover-flip standard cards), a 64px-rounded dot-grid coral CTA, and a five-column ink footer; every entry + hover uses cubic-bezier(0.16,1,0.3,1) with a 2° fade-up rotation, fully offline | HTML, CSS, vanilla JS, Instrument Serif, Manrope |
| relative | Pixel-faithful clone of the "Relative" shadcn/ui SaaS productivity-app marketing template (sold on shadcnblocks.com; live demo on Vercel) — a 9-page site (home, about, pricing, FAQ, contact, login, signup, terms of service, 404) rebuilt as plain static HTML/CSS/vanilla JS with all colors driven by shadcn/ui HSL design tokens so the whole site recolors between light and dark mode; a dismissible "Purchase this theme" banner, a sticky blur header with a lucide-boxes "Relative" logo, a Features dropdown mega-menu, theme toggle (sun/moon, localStorage-persisted, no-flash boot, honors prefers-color-scheme), and a mobile slide-in menu; the home page reproduces a centered "Say Goodbye to Task Overload" hero with a dashboard mockup, a grayscale partner-logo strip, "Smart productivity with AI" 3-card grid, a "Stay agile with adaptive workflows" image+rows split, an "Optimize every aspect of your day" mockup, a 4-step numbered "Accelerate your planning journey", a 6-card testimonials grid, a 3-tier pricing teaser (Basic $19 / Business $29 featured / Enterprise $49), and a FAQ accordion; the pricing page adds a Monthly/Yearly billing toggle and a Core Tools / Productivity Insights / Workflow Automation comparison table, plus centered auth cards (Google sign-in), a contact form with info blocks, and a long-form terms page; IntersectionObserver scroll-reveals, hover states, fonts via system sans, and all images/SVGs vendored locally, no build step, fully offline | HTML, CSS, vanilla JS |
| saas | Pixel-faithful clone of the Magic UI "acme.ai" SaaS startup landing template — a 5-page light-theme marketing site (long-scroll home, blog index, blog article, login, signup) for a fictional AI product on a white / OKLCH-neutral canvas with a single bold red accent (oklch(57.7% .245 27.325)), self-hosted Inter Variable, and rounded shadowed cards; a sticky backdrop-blur header (logo, Features/Solutions/Blog nav, Login + red "Get Started for Free" CTA, mobile slide-in sheet), an announcement-pill hero with a dashboard mockup + pulsing red play-button lightbox, a marquee logo cloud (Netflix/Uber/Instagram/Google/Amazon/Microsoft/Spotify/YouTube), 3 problem cards, a 4-up solution grid, a 3-step "how it works", a prev/next testimonial-highlight carousel, a 4-tab feature switcher, a 3-column vertically-marqueeing testimonial wall with avatars + stars, a Monthly/Yearly pricing switch with Basic/Pro(popular)/Enterprise cards, a FAQ accordion, a latest-articles card, and a pink CTA band; IntersectionObserver scroll reveals, hover states, and all fonts/images/avatars vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Inter |
| salient | Pixel-faithful clone of the Tailwind Plus "Salient" SaaS marketing template (showcased as the fictional "TaxPal" accounting product) — a 3-page light, friendly, rounded marketing site (home, login, register) on a slate + blue-600 palette with self-hosted Inter (body) + Lexend (display) variable fonts; the home page reproduces the full Salient layout: a centered hero with a hand-drawn SVG squiggle under "made simple", a six-logo cloud, an auto-rotating primary-features tab group (Payroll / Claim expenses / VAT handling / Reporting) whose browser-window screenshot bleeds off the right edge, a secondary-features tab group (Reporting / Inventory / Contacts), full-bleed angled blue gradient CTA bands, a three-column testimonials masonry, a dark pricing block (price-first cards, borderless sides + blue featured middle), and a three-column FAQ; the proprietary Headless UI + Next.js runtime is replaced by a small vanilla-JS shim reimplementing the mobile-nav popover and both feature tab groups, plus split-screen auth pages with a blue gradient panel; Inter + Lexend fonts, screenshots, avatars, logo SVGs, and gradient backgrounds all vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter, Lexend |
| scalar | Pixel-faithful clone of the shadcnblocks "Scalar" shadcn/ui CMS template — a 29-page developer-first headless-CMS marketing + docs site (home, about, roadmap, faq, blog index + 8 blog posts, docs overview + 10 fumadocs-style doc pages, contact, login, signup, privacy-policy, terms-of-service) on a monochrome OKLCH neutral ramp with a single blue accent (oklch(57% .2328 264)), Inter + IBM Plex Mono; a dismissible promo bar and sticky blur header (logo, Product ▾ dropdown, nav, GitHub stars, sun/moon theme toggle, Log In, Start Free Trial), a hero with a content-table mockup, feature/code/logo-cloud/testimonial sections, a shared dark "Start free. Scale confidently." Open-Source-vs-Cloud CTA, a footer with social icons + "All systems operational" and a giant faint "Scalar" watermark; a 3-column docs layout (sidebar tree / prose / "On this page" scroll-spy TOC + prev-next pager), filter-tab blog & roadmap, a category-tabbed FAQ accordion, working light/dark themes (token-driven, prefers-color-scheme + localStorage), mobile hamburger, IntersectionObserver reveals; Inter + IBM Plex Mono fonts and all imagery vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Inter, IBM Plex Mono |
| screenshot-two | Same-to-same clone of Shipixen's "Screenshot Two" landing-page template — a single-page screenshot-API marketing site on a sky-blue (#0ea5e9) / indigo (#6366f1) accent system over white, with DM Serif Display headings and DM Sans body; a floating blur header (Features/Docs/Page UI nav, search, light/dark theme toggle, Get Shipixen CTA, mobile hamburger), a centered hero with a browser mockup and a Product-Hunt "1st" laurel badge, an avatar+star social-proof row with floating widget cards, three alternating image-left/image-right feature sections with checkmark sub-features, a sky-blue CTA band with a stacked-avatar "99+ happy developers" proof, an autoplay video "Automate and Elevate" section, a masonry testimonial grid with verified handles, a Radix-style FAQ accordion (chevron rotate + height animation), and a multi-column footer; IntersectionObserver scroll reveals, working light/dark theme toggle (localStorage + prefers-color-scheme), all fonts/images/video/avatars vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, DM Serif Display, DM Sans |
| season-04-brutalist-store | "Season 04 / Studio Raw" high-fashion brutalist storefront built same-to-same from a reference — beige (#E3E2DE) + brownish-black (#1B0E0D) with burnt-red (#C72A09) and acid neon-green (#31EF07) micro-interactions, a persistent fractalNoise multiply grain overlay, vendored Clash Grotesk + General Sans + Space Mono, a mix-blend-difference sticky nav, a 100vh dark hero with a 60%-opacity grayscale image and a 13.5vw split-indented RAW / FORM 04 headline, a 12-col uppercase manifesto with brown-highlighted phrases, 12vw OUTERWEAR/OBJECTS ribbon dividers, an asymmetric offset product grid with neon Quick View badges and burnt-orange hover underlines, and a dark-newsletter footer under a 22vw ghost RAW title; high-contrast grayscale imagery + fonts vendored, fully offline | HTML, CSS, vanilla JS |
| softly-wellness | "Softly" — a warm, mobile-first digital-wellness landing page recreated same-to-same from a reference design: grain overlay, pastel blurred blobs, Outfit + Reenie Beanie type, float/reveal-on-scroll animations, three phone mockups, horizontal scenario scroll, and a FAQ accordion; fully self-contained with vendored Tailwind, fonts, and inline lucide icons | HTML, Tailwind CSS, Vanilla JS |
| premium/shadcnblocks/sonic | Pixel-faithful clone of the shadcnblocks "Sonic" premium Next.js speaker / audio product template, rebuilt same-to-same as a 15-page static site (home, product, specifications, about, pricing, contact, blog index + 6 blog posts, terms-of-service, privacy-policy) — a minimal monochrome black/white/grey design on the vendored SF Pro Display typeface with a light + dark theme system (CSS custom-property tokens, prefers-color-scheme, a header sun/moon toggle with a circular startViewTransition clip-path mask, persisted to localStorage and a no-flash boot script); a dismissible promo banner, a sticky blur header (SONIC wordmark, nav, theme toggle, "Buy now" pill, slide-in mobile drawer), large centered display headlines, rounded 24px product photography, pill CTAs, a home FAQ accordion, stats band, testimonials grid, a sticky-image spec sheet, a product pricing trio with a featured center card, a "Write us" contact form, a 6-card blog grid, long-form article + legal pages, a shared text-only "Get your perfect speaker now!" CTA band, and a footer with a giant ghost "SONIC" wordmark; IntersectionObserver scroll-reveal entrances, SF Pro Display font + product/blog webp imagery vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, SF Pro Display |
| premium/shipxen/specta | Pixel-faithful clone of the "Specta" landing-page template (Page UI, shown in the Shipixen demo gallery) — a single long-scroll dark-first marketing page for a fictional AI video-editing SaaS on a near-black slate (rgb(3,7,18)) canvas with a pink (#ec4899) → indigo (#6366f1) brand spectrum, Syne display headings + Inter body, and a working light/dark theme system (CSS custom-property tokens, persisted to localStorage, dark shipped as default); a sticky blur nav with a sun/moon toggle and mobile hamburger menu, a centered hero with a gradient-clip headline, an avatar-stack proof and a gradient-framed autoplay product video with floating testimonial popovers, an infinite logo/star ticker marquee (pause-on-hover), three alternating feature sections (Create / Import / Manage) with eyebrow labels, icon feature lists, pink CTAs and vendored backdrop media panels, an "Insert ads and earn money" 2×2 gradient-card grid, a magenta-glow testimonial panel with a six-card grid, a final CTA, and a multi-column Shipixen footer; IntersectionObserver scroll-reveal entrances and hover states throughout, fonts via Google Fonts and all backdrops/avatars/video vendored locally, no build step, fully offline in both light and dark mode |
HTML, CSS, vanilla JS, Syne, Inter |
| stacking-cards-portfolio | A calm editorial portfolio template whose core experiment is the "stacking cards" scroll effect — five project cards (Lumen, Atlas Type, Harbor, Solène, Field Notes) each position:sticky pinning at an increasing top offset so the deck fans downward, while a scroll-linked JS scrub shrinks (scale 1→0.94), dims (brightness 1→0.82) and darkens (cover opacity 0→0.5, easeOutCubic) each buried card as the next slides over it like a dealt deck; warm #ECE9E2 paper over near-black ink with a single terracotta #C8553D accent, Instrument Serif display + Inter UI, an SVG paper-grain overlay, a glass pill nav, breathing-rings / glyph-specimen / abstract-chart / layered-magazine / generative-grid CSS-and-SVG card art (no photos), and a dark ink contact footer; fonts vendored locally, fully offline, honors prefers-reduced-motion. Built same-to-same to a superdesign reference (host blocked by the build network, so reproduced from its canonical editorial-portfolio pattern + the seed prompt) |
HTML, CSS, vanilla JS, SVG, Instrument Serif, Inter |
| startup | Pixel-faithful clone of the Magic UI "Startup" landing-page template — a 3-page dark SaaS marketing site (home, sign in, sign up) on a pure-black OKLCH palette (--background:oklch(0% 0 0), white --primary) with self-hosted Inter Variable; a dismissible Product-Hunt-style top bar, a sticky header that gains a blurred bordered background on scroll (Log in / white Sign up pill + a mobile hamburger drawer with Features/Pricing/Careers/Contact), a centered hero with a shimmer "✨ Introducing Magic UI Template" pill, a gradient-clipped 96px headline, a perspective-tilted dashboard hero image (hero-dark.png) with a --color-one blurred color-glow and a bottom background-fade overlay, a grayscale logo marquee (Google/Microsoft/GitHub/Uber/Notion) with edge masks + pause-on-hover, an Annual/Monthly pricing toggle with four tiers (Basic $10 / Premium $20 highlighted with amber glow / Enterprise $50 / Ultimate $80), a filled-heart CTA, and a Product/Community/Legal footer; staggered fade-in/fade-up entrance animations, Inter WOFF2 + hero images + company SVGs vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Inter |
| sticky-content-switch | Scroll-driven "sticky content switch" editorial template — a warm paper (#f4f1ea) / near-black (#0e0e0c) two-column section on vendored Anton + Inter with a burnt-orange (#c4622d) accent, where the left column is position:sticky and vertically pinned while six 100vh image panels scroll past on the right; an IntersectionObserver with a -50%/-50% rootMargin band fires exactly when each image's midpoint crosses screen center, crossfading + slide-swapping the pinned heading (index, kicker, title, body, meta) to match the active frame, a transform:scaleY accent progress rail with growing ticks, a rAF parallax that scales each image 1.08→1.0 toward center plus grayscale-to-color on active, a per-letter hero rise-reveal, and a ghosted-wordmark outro; six themed procedural SVG images + fonts vendored, fully offline, responsive stacked feed under 900px, respects prefers-reduced-motion | HTML, CSS, vanilla JS, Anton, Inter |
| premium/shadcnblocks/streamline | Faithful same-to-same clone of the shadcnblocks "Streamline" SaaS landing template — an 11-page, theme-dependent (light + dark) marketing site for a fictional issue-tracking product on a warm off-white (#EEECE7) canvas with near-black ink, Inter Tight display headings + Inter body, and shadcn HSL design tokens; a dismissible announcement bar, a sticky nav with a Product dropdown and a persisted light/dark theme toggle, a hero with a dashboard-mockup carousel, a logo marquee, stat cards, a bento feature grid, a feature-tab switcher, a testimonial carousel, Free/Startup/Enterprise pricing with a billed-annually toggle, a two-column FAQ accordion, and a dark CTA, plus about, pricing (with a feature-comparison table), contact, faq (sidebar + grouped accordions), login, signup, terms, privacy, and a 404 page; IntersectionObserver scroll-reveal entrances, accordions, carousels, tabs, and all hover states ported from the source, fonts via Google Fonts and all images/logos/favicon vendored locally, no build step, fully offline | HTML, CSS, vanilla JS, Inter, Inter Tight |
| studio | Pixel-faithful clone of the Tailwind Plus "Studio" agency template — a 12-page marketing site (home, about, our work + 3 case-study details, our process, blog + 3 article details, contact) for a fictional Danish development studio on a light editorial canvas with the Mona Sans variable typeface, a signature animated rounded-square "grid pattern" backdrop, and massive tight-tracking display headings; a shared rounded white page sheet over a black body, a header whose "Toggle navigation" hamburger expands a full-width black panel into a 2×2 link grid (Our Work / About Us / Our Process / Blog) + offices + socials (icon morphs hamburger↔X, page sheet pushes down), and a footer with a "Sign up for our newsletter" form are consistent across every page; the original's compiled Tailwind v4 stylesheet and class-driven markup are preserved for fidelity while the proprietary Framer Motion + Headless UI + Next.js runtime is replaced by a small vanilla-JS shim reimplementing the nav flyout and the IntersectionObserver FadeIn scroll-reveal entrances; Mona Sans font, client logos, team photos, and case-study imagery all vendored locally, fully offline | HTML, CSS, vanilla JS, Mona Sans |
| super-design-industrial-system | "Super Design" warm-industrial design-system template built same-to-same from a superdesign reference — a #EBEBE8 warm-gray base with #18181B foreground and a single #0066FF electric-blue accent, vendored Inter (400/700/900) + Playfair Display italic, a fixed full-page 12-column structural grid of 0.1-opacity hairlines, a 4%-opacity fractal-noise overlay, a sticky 80px blur-backed header with a serif+bold "SuperDESIGN" logo, a split hero pairing a Building/digital/STRUCTURES headline (solid + serif-italic + -webkit-text-stroke) with a 20px-framed grayscale image and a glassmorphism SYSTEM STATUS card with animated progress bars, an 18s blue-star marquee alternating stroke-sans and serif-italic, a 4-row interactive project list with clip-path image reveals + a cursor-following VIEW disc, a scroll-parallax philosophy statement over a 34vw watermark, a 3-column technical journal, and a massive #18181B footer with a 20vw background marquee and a green System Operational pulse; cubic-bezier(0.16,1,0.3,1) easing throughout, fonts + procedural grayscale SVG imagery vendored, fully offline | HTML, CSS, vanilla JS, Inter, Playfair Display |
| super-travel-luxury-landing | "Super Travel" luxury editorial travel landing page — a warm off-white (#fdf8f3), dusty-rose-accented (#e4a4bd) single page on League Spartan, with a glassmorphic fixed nav, a ~15vw "LUXURY / journeys" hero pairing an italic accent word with a grayscale-to-color villa card and a 4s-bouncing circular "01" concierge badge, a 3-column bordered "Art of Service" grid that floods rose on hover, a staggered "Exquisite Portfolio" with offset cases and a 96px "View Case" hover disc, a by-invitation membership block, and a multi-column footer — all reveal-up on IntersectionObserver with weighted cubic-bezier motion; fonts + Unsplash imagery vendored, fully offline | HTML, CSS, vanilla JS |
| superdesign-architectural-type | "Superdesign — Architectural Type System" invite/waitlist template rebuilt same-to-same from a superdesign reference — a strict monochrome Swiss-brutalist system on pure #000/#FFF with a single indigo #6366f1 accent, vendored Inter Tight 900 + Inter + JetBrains Mono, a global 5%-opacity fractal-noise overlay, a 0.5px-hairline "grid matrix" built from per-side borders (no doubled lines), a 72px sticky blur nav (SUPERDESIGN • BETA_V.01 with 40px circular X/GitHub icon buttons + a GET ACCESS pill), a 2×2 hero grid spelling SU/PER/DE/SIGN in clamp(5rem,18vw,24vw) edge-pinned type that masks up on load with a 120ms cubic-bezier(0.16,1,0.3,1) stagger, a 4-column command bar (borderless email input + white→indigo JOIN button + a live tabular-nums HH:MM:SS countdown with 20%-opacity separators + a +FREE_ACCESS/+NO_CREDIT_CARD/+CANCEL_ANYTIME label stack), a 3-card 400px bento with mono SYSTEM_0n tags and 0.2→1 opacity geometric shapes (a 45°→90° rotating diamond on a 700ms cubic-bezier(0.4,0,0.2,1), concentric squares, a dot matrix) plus a #FFFFFF05 hover wash, and a footer status strip with a pulsing indigo dot; zero radius (except the two pill/circle controls), no shadows or gradients, fully offline | HTML, CSS, vanilla JS, Inter Tight, Inter, JetBrains Mono |
| superdesign-crimson-craft | "Dark Luxury" high-ticket service landing page rebuilt same-to-same from a superdesign reference (host blocked from the build sandbox, so built from the detailed written spec) — a #121212 off-black, crimson #e11d48 single page for an exotic-car restoration studio on Poppins + a tight Cal-Sans-style display grotesk, with an 80px blur(16px) glass header carrying a dual-line Get-Quote button, a 95vh hero (faded car backdrop, pulsing "only 3 slots" urgency badge, overlapping avatar proof stack, arrow-up-right white CTA), a 4-column trust bar with crimson-on-hover icons + reveal tooltips, an asymmetric sticky-left services grid with a comparison table and 40px-rounded cards (crimson featured + native <details> "included" accordions), a drag-scroll horizontal portfolio of 500px before/after transformation cards (grayscale/contrast/brightness left half, glass ROI badge on hover), a 3-column italic-quote testimonial grid with grayscale-to-color square avatars, and a crimson-gradient 3rem-radius final CTA with black/white buttons plus a pulsing green floating availability pill — IntersectionObserver reveal-up with cubic-bezier(.4,0,.2,1); Poppins + Space Grotesk and procedural crimson car/avatar SVGs vendored, fully offline |
HTML, CSS, vanilla JS, SVG, Poppins, Space Grotesk |
| superdesign-neo-brutalist-acid | Neo-Brutalist "Acid" store template built from a superdesign spec — a paper #F8F4E8 / ink #09090B / acid yellow-green #D2E823 palette with vendored Dela Gothic One + Space Grotesk + Space Mono, a 3% feTurbulence noise overlay, a 0.2-lerp mix-blend-difference custom cursor that scales 2.5x over links, a backdrop-blur(24px) sticky pill nav, a 20s linear acid marquee band, a 12-column 8rem glitch-on-hover hero (±2px keyframe jitter) with a -2deg sticker badge and a floating ±10px asset card over a 32px-radius image, a bento category grid (dark 2x2 mix-blend-overlay card + radial-dot 1x1 cards) that translates 4px and drops its hard shadow on hover, a "New Drops" arrow-scrolled 320px product rail with a grayscale Sold Out state, and an inverted #09090B footer with a transparent-input newsletter; hard 4/8px zero-blur shadows and press-down buttons throughout, procedural acid SVG imagery generated locally, fully offline | HTML, CSS, vanilla JS, Dela Gothic One, Space Grotesk, Space Mono |
| superdesign-cinematic-agency | "Superdesign" dark cinematic creative-agency landing rebuilt same-to-same from a reference — near-black #050505 base, vendored Aspekta 300/500/700/900, a mix-blend-difference nav, a perspective:2000px 3D rolodex cube hero tumbling on the X-axis behind a giant SUPERDESIGN wordmark, a Case Studies bento grid (macOS traffic-light featured panel + grayscale-on-hover sub-projects), a #0B0216 three-tier pricing block with a #7C3AED blur(100px) glow and a white featured Growth card, a startups banner, a #1A0B2E glass price calculator with a live purple-filled range slider + monthly/yearly toggle, and a massive LET'S BUILD THE IMPOSSIBLE. editorial footer | HTML, CSS, vanilla JS, Aspekta |
| superdesign-design-on-reality | Pixel-faithful poster-modernist "Design on Reality. Not Mockups." landing page recreated same-to-same — cream #E3E2DE base with a single cobalt #1351AA accent, a framed 1600px center column, a strict 12-column grid with a sticky label sidebar down every section, hairline #C7C7C7 dividers, zero radius / zero shadows, oversized General Sans display type, and zero-radius poster buttons with linear color-swap hovers | HTML, CSS, General Sans |
| superdesign-editorial-grid | Editorial-tech "Superdesign" template built same-to-same from a detailed spec — muted #f7f6f2 paper background, #1c1c1c ink and a forest-green #3d7068 accent, a trio of vendored fonts (Playfair Display serif headers, Space Grotesk body, Space Mono labels), a fixed structural grid (1px verticals at 25/50/75% + a 40px square grid radially masked to fade at the edges), a floating-to-fixed backdrop-blur nav, a 9vw uppercase serif hero with italic #b4b4b4 key words, a hover-to-white 3-column stat grid, a scroll-synced word-by-word "manifesto" opacity reveal, a click-to-expand 01/02/03 workflow with a sticky grayscale-multiply card and a #3b82f6 scan-line bar, pill use-case tabs over a 240px ghost-glyph card, and a bottom-bordered Request Access form — all 1px borders, no shadows, ≤2px radius, easing cubic-bezier(0.16,1,0.3,1) | HTML, CSS, vanilla JS, Playfair Display, Space Grotesk, Space Mono |
| superdesign-editorial-manifesto | "ÆON" Modern Editorial Manifesto launch page rebuilt same-to-same from a superdesign reference — a premium editorial layout in deep charcoal #0a0a0c / warm cream #e8e6e1 / gold #d4c5a2 on vendored variable Fraunces (high-contrast serif) + Manrope, a fixed mix-blend-difference nav with serif brand + tiny volume/issue meta, a 13–15vw three-line Fraunces hero (italic / light-gold / right-aligned) with per-line clip-rise reveals and a vertical-rl side label, a 48px serif intro paragraph with gold-italic accents, a sticky two-column essay with a 40px gold-left-border pull-quote, a hover-lift vertical narrative principle list (white/5 tint, title→gold over 500ms), a cream #e8e6e1 inverted manifesto grid with 120px ghosted serif numerals, gradient-clip editorial testimonials, a backdrop-blur CTA card with a square white→gold button, a 9vw final statement, and a hairline footer; an animated SVG turbulence grain overlay (mix-blend overlay), IntersectionObserver reveals on cubic-bezier(0.16,1,0.3,1), fonts vendored, fully offline | HTML, CSS, vanilla JS, Fraunces, Manrope |
| superdesign-invite-waitlist | Pixel-faithful "Cinematic Editorial" invite-only waitlist page recreated same-to-same from a superdesign reference — a matte-charcoal #181818 base with warm-beige #EBDCC4 text, muted-sage labels, and a coral-rust #DC9F85 accent, vendored Clash Grotesk + General Sans, a fixed 3%-opacity fractal-noise overlay, an absolute minimal nav (SD—PROTOCOL 01 / INVITE ONLY) with a 1px umber spacer line, an 11.5vw stacked SUPER/DESIGN headline doubled with a 1px text-stroke outline offset 4px for depth, a 12-column bottom grid pairing an exclusivity statement + Batch 003 status dot with a unified email-capture form (4px corners, 1px borders, no gradients/shadows), and a 64px rotating SVG text-path "WAITING LIST" badge | HTML, CSS, vanilla JS, Clash Grotesk, General Sans |
| superdesign-midnight-editorial | "Midnight Editorial" dark creative-agency landing for the fictional studio Superdesign, rebuilt same-to-same from a reference — a near-black #050505 canvas with a single coral #FF6B50 accent, a fixed top nav + floating glass bottom dock with lucide icons, a full-viewport 13vw /design typographic hero with grayscale-to-color team avatars and a coral-underline email, a "Start faster. Earn sooner." dark card paired with an indigo→violet gradient browser-mockup card, a staggered four-project Selected Work gallery (NEBULA/QUANTUM/ECHO/FLUX) with opacity-to-color hover and coral arrow buttons, and a 10vw LET'S TALK. footer with lift-on-hover social circles; Inter variable font and art-directed imagery vendored, fully offline |
HTML, CSS, vanilla JS, Inter, Lucide |
| superdesign-modern-atmospheric | "Modern Atmospheric" vibe-design landing for the fictional AI tool Superdesign — a deep-slate #0f172a hero with drifting indigo/purple/pink glow blobs and a radial-masked grid, a Lora-serif gradient-italic "Design at the speed of thought" headline with a blinking typing cursor, a glass nav pill, a white "vibe" command-box with a blur-lg indigo→pink outer glow + paperclip/arrow-up bar, a floating glass Frameworks/Integrations bar with a hover-color marquee, a light #f8f9fa scroll-spy feature section (sticky sidebar with active black dot, alternating dark code blocks + grayscale SVG blueprints), a slate-900 glass-strong masonry testimonial grid, and a smooth-height FAQ accordion; vendored Inter + Lora + Space Grotesk | HTML, CSS, vanilla JS, Inter, Lora, Space Grotesk |
| superdesign-modern-obsidian | "Obsidian" elite private-beta waitlist / design system rebuilt same-to-same from a SuperDesign reference — a strictly monochrome Modern-Obsidian aesthetic (#080808 obsidian base, #FFFFFF, #E2E8F0 silver, 135° silver gradient) pairing DM Serif Display italics with Geist Mono technical labels and Inter body, all on a 92vw fluid layout with an SVG fractal-noise overlay; a glass nav pill + live status dot, a clamp(42px,10vw,140px) "Access is not given. It is earned." hero with a silver-gradient italic span, an editorial serif countdown timer with /-separators, a frosted-glass beta capture form, a silver-fill progress urgency strip, a 1/2/4-col hairline bento grid (with a 2×2 hover Member Registry card), a thesis block, border-left testimonials with grayscale avatars, and a giant-watermark footer; plus a floating pill mobile bottom nav that slides up after the hero — fonts + avatars vendored locally, fully offline | HTML, CSS, vanilla JS, DM Serif Display, Geist Mono, Inter |
| superdesign-obsidian-lime | "Obsidian & Lime" futuristic glassmorphism landing for the fictional AI design tool Superdesign, rebuilt same-to-same from a reference — a max-w-[1800px] floating rounded-shell on #0a0a0a with a 60px grid + fractal-noise overlay and blurred lime/emerald glow spheres, a serif-italic lime-gradient "Speed" hero with underline squiggle and glass app-preview mockup, a Neural Engine 3.0 / Atomic Tokens / 10x / Global CDN bento grid, a light #e5e5e5 methodology section with a circular portrait + glass "Sarah Jenkins, CTO" testimonial, a SUPER-watermark footer, and a spring-smoothed scroll-progress bar; vendored Space Grotesk + JetBrains Mono | HTML, vanilla CSS, vanilla JS |
| superdesign-red-noir-landing | Pixel-faithful "Red Noir" Superdesign AI landing page recreated 1:1 from a reference — #ef233c-on-black palette with vendored Manrope + Inter, twin box-shadow parallax starfields, a faint masked grid, a conic-gradient shiny CTA and a spinning "Get Access" sweep, gradient-clipped hero headline with a hand-drawn underline, a 4-card bento feature grid, a full-bleed red testimonial banner, 3-tier pricing with a featured Pro card, a waitlist CTA, and a giant outlined SUPERDESIGN footer wordmark | React, TanStack Start, TypeScript, Tailwind, lucide-react |
| superdesign-studio-editorial | Typography-first black-and-white editorial creative-studio template recreated from a reference — pure #000/#FFF palette with #525252 metadata, vendored Inter + JetBrains Mono, a 32px mix-blend-difference custom cursor that lerp-follows and scales 2.5x on hover, a mix-blend-difference fixed nav with a rotating plus toggle and full-screen clip-path menu, a 12vw "Design Studio" hero with staggered per-letter slide-up reveals, a paused-on-hover asymmetrical-radius project marquee (5/7 grayscale-to-color cards), a centered intro statement, a staggered two-column 4:3 project grid with hover overlays + arrow-up-right badges and mono metadata rows, and a dark #0A0A0A footer with a giant ghosted "sd" watermark; cubic-bezier(0.16,1,0.3,1) easing throughout, fully self-contained offline | HTML, CSS, vanilla JS, Inter, JetBrains Mono |
| superdesign-technical-system | Pixel-faithful "Superdesign — The AI Design Reviewer" template landing page built on a Technical-Minimalist blueprint design system: a Paper (#F7F7F5) / Forest (#1A3C2B) / Grid hairline palette, Space Grotesk + JetBrains Mono, a full-page mosaic grid background, fixed indexed nav, a luminosity-blended wireframe hero, a 1px-gap 2×2 bento feature grid, an animated SVG network-topology graph, monospaced testimonial cards, and an L-corner-marked "Tell your CTO" form CTA; zero shadows, fully square corners, fonts + hero image vendored locally | HTML, CSS, Space Grotesk, JetBrains Mono |
| synapse-design-system | "Synapse" futuristic vantablack (#030303) design-system landing built same-to-same from a spec — violet (#8B5CF6) + cyan (#06B6D4) neon accents, vendored Instrument Serif + Inter, three floating blurred ambient orbs, a 672px glass nav pill, a massive centered serif hero with a shimmering gradient last word and staggered load entrances, a Shiny Border Button with a 4s spinning conic-gradient border, a 40s infinite metrics ticker, a 6-card reveal-on-scroll feature grid with violet/cyan hover glows, a syntax-highlighted synapse.config.ts IDE block with a copy button, and an emerald "All Systems Operational" pulsing-dot footer; cubic-bezier(0.23,1,0.32,1) motion throughout, fully offline | HTML, CSS, vanilla JS, Instrument Serif, Inter |
| premium/tailwindcss/syntax | Pixel-faithful clone of the Tailwind Plus "Syntax" Markdoc software-documentation template — a 20-page docs site (Getting started home + 19 docs/* article pages across Introduction, Core Concepts, Advanced Guides, API Reference, and Contributing nav sections) for a fictional caching library "CacheAdvance" on a slate ramp with a sky accent, self-hosted Inter (body) + Lexend (display) fonts; a full-width dark slate-900 hero with a gradient "Never miss the cache again." headline, Get started / View on GitHub buttons, a skewed dot-grid SVG with cyan/indigo blur glows, and a syntax-highlighted cache-advance.config.js code panel sits above a classic three-zone docs shell — a sticky header (Command-K search pill, theme listbox, GitHub icon), a fixed left sidebar nav with a sky-500 active-link dot + sliding section highlight, centered prose content with gradient quick-link cards and amber callouts, and a sticky "On this page" scroll-spy TOC; the original's compiled Tailwind v4 stylesheet and class-driven markup are preserved for fidelity while the proprietary Next.js + Headless UI + Framer Motion runtime is replaced by a small vanilla-JS shim reimplementing the same behaviours — Light/Dark/System theme listbox with localStorage + no-flash boot, Command-K search modal, mobile nav slide-over, sidebar + TOC scroll-spy, prev/next pager; Inter + Lexend fonts and decorative blur PNGs vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Inter, Lexend |
| terroir-tasting-room | "Terroir" dark minimalist editorial luxury wine tasting-room landing page rebuilt from a superdesign reference — a #121212/#EDEAE4 palette with Sage/Sienna/Burgundy earth accents, a global baseFrequency-0.65 SVG grain overlay at 5%, vendored Cormorant Garamond + Manrope, a centered-logo blur header, an asymmetrical 96px serif hero with a 24px-indented sage italic and a bouncing arrow, a 4-column hover-reveal Flavor Wall (mix-blend-overlay images, 8px text slide), a 50/50 Staff-Pick spotlight, a live 4/6 sage capacity Case Builder with circular ± controls, a single-hairline Guest/Member split, a grayscale-to-color How It's Made grid, and a 4-column footer; all reveal-up on IntersectionObserver (800ms/20px), fonts + procedural imagery vendored, fully offline | HTML, CSS, vanilla JS, SVG, Cormorant Garamond, Manrope |
| transmit | Pixel-faithful clone of the Tailwind Plus "Transmit" podcast template (showcased as the fictional show "Their Side," hosted by Eric Gordon / Wes Mantooth) — a 6-page site (home episode index + 5 episode detail pages) on a clean light slate-50/white canvas with self-hosted Satoshi (400/500/700) + a mono meta face, a pink-500 action accent, and a signature blue→violet→pink (#4989E8 → #6159DA → #FF54AD) gradient audio-waveform SVG strip masked across the top of the main column; a fixed left sidebar (square "THEIR SIDE" cover card, show title + blurb, About with violet/pink marker + line-clamp "Show more", Listen provider icons, vertical writing-mode "Hosted by" rail) is shared on every page, and episode pages add a large round play button beside the title with Topics/Sponsors/Links prose marked by colored dot bullets; the proprietary Next.js + React-Aria runtime is replaced by a small vanilla-JS shim reimplementing the sticky bottom audio player (real HTML5 <audio> with play/pause, rewind/forward 10s, scrub slider, mono time output, playback-rate cycle, mute) and the About toggle; Satoshi fonts and cover art vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Satoshi |
| vertical-clip-text-slide | A single-screen motion study of a vertical text-clip, letter-by-letter slide-down — each glyph of a giant Space Grotesk headline ("MOTION / IN EVERY / LETTER.") is wrapped in an overflow-hidden vertical clip column and pours down from above (translateY(-110%)→0) with an opacity + blur(6px)→0 settle, staggered 70ms per letter continuously across all lines on a cubic-bezier(.22,1,.36,1) expo-out, then auto-loops with a 2.2s hold and a Replay button; near-black #0b0b0c canvas with off-white #f4f2ec type, JetBrains Mono chrome, a warm #e8552d accent, a 4% fractal-noise grain overlay, and a reduced-motion fallback; fonts vendored, fully offline | HTML, CSS, vanilla JS, Space Grotesk, JetBrains Mono |
| 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 |
| premium/shadcnblocks/zippay | Pixel-faithful clone of shadcnblocks' "Zippay" fintech / spend-management SaaS marketing template — a 13-page site (home, about, feature1, feature2, integrations, pricing, faq, contact, login, signup, blog, privacy, terms) on a crisp white/light-gray canvas with a vivid emerald-green brand accent and deep forest-green hero / CTA / footer panels, Inter type, and a shadcn / Tailwind v4 OKLCH theme that works in light and dark mode (CSS custom-property tokens, persisted via localStorage, honoring prefers-color-scheme, no-flash boot); a sticky header (Zippay cross logo, Product dropdown → Feature 1 / Feature 2, nav, sun/moon theme toggle, Sign In, Get Started, mobile hamburger), a repeated "A Better Way to Manage Your Money" forest CTA band, and a four-column forest footer are shared across every page; a hero dashboard-balance card, icon feature grids, image/text split sections, a phone-mockup feature band, a testimonial grid, a 3-tier pricing table with a highlighted Pro plan + a green-dot comparison accordion, an 8-card FAQ grid, a forest full-panel login/signup with Google/Twitter OAuth, a blog index with featured post + category filter + pagination, and long-form legal pages; IntersectionObserver scroll-reveal entrances, hover lifts, and accordion expand throughout; Inter from CDN, all images/icons/fonts vendored locally, no build step, fully offline |
HTML, CSS, vanilla JS, Inter |