# VibeFather > Vibe coding website templates with live demos. Every site was built by an AI agent from one prompt — copy it into Claude Code, Codex or Cursor and get the same site. - Most prompts and every DESIGN.md are free for personal and non-commercial use (CC BY-NC 4.0); commercial use needs a Pro license; Pro templates publish the brief, stack and variables, and the full prompt is for Pro members. Source code and commercial licenses are paid. Every live demo is built from exactly the published prompt, with nothing added. - Plain-text prompt for any template: https://vibefather.ai/templates/.md - CLI: `npx vibefather add ` writes prompt.md and DESIGN.md into your project. - MCP: https://mcp.vibefather.ai (tools: search_templates, get_template, get_prompt, get_design_md, list_tags) - Supported AI coding tools: Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI, Lovable, Bolt, v0, Replit. Setup per tool: https://vibefather.ai/for/ - Every template is original; inspiration is credited on each page. - Operated by Cyber Koi Limited (Hong Kong SAR). Contact: lyp592789970@gmail.com ## Lumen Index — Dark Template Library Landing Page with Demo Wall Near-black template-library landing with an auto-scrolling wall of browser demos and one acid-lime accent. - Page: https://vibefather.ai/templates/lumen-index - Prompt (plain text): https://vibefather.ai/templates/lumen-index.md - Live demo: https://demo.vibefather.ai/d245c2f7-0367-41fa-a644-980928f7aac8/index.html - Stack: Vite 5 + React 18 + TypeScript + Tailwind CSS 3.4 via PostCSS + motion + lucide-react - Tags: Landing Page, Product Launches, Waitlists & Signups, Indie Hackers, Startup Founders, Aurora, Dark, Marquee, Scroll Animation, React, Tailwind CSS, Motion, Developer Tools Lumen Index is a single-page landing template for a library or marketplace of website templates, prompts or developer resources. The hero opens on a headline about vibe-coding templates. Below it is a wall of browser-frame cards in four rows that scroll sideways in alternating directions. Each card is a small invented website drawn in CSS and SVG: a ceramics shop, a fintech dashboard, a Swiss-style portfolio, a docs site, a pixel game. There are no screenshots or bitmaps, and the whole build stays small and sharp at any size. Below the hero, a three-step explainer (Pick, Copy, Ship) uses mono step labels and hairline dividers. Next comes a trending grid with type filters and copy-prompt buttons, then a browse-by-type list with large mono counts that shows preview thumbnails when you hover a row. After that are a tabbed code panel with CLI, MCP and Skill snippets, an early-access block with a spots meter and a mailto button, an FAQ accordion, and a dense footer. The colours are a near-black neutral base, hairline borders and one acid-lime accent. The lime appears only on calls to action, step numerals and the blinking caret in the code panel. A faint, low-saturation glow in green, teal and amber sits behind the hero and nowhere else. There are no glass cards, no blue-purple gradients and no emoji. Headings name what each section covers, which helps search engines. The template suits developer tools, prompt libraries, UI kit stores, component catalogs and any product that has a lot of visual examples to show. To adapt it, set the brand, the CLI slug, the contact email and the two spot numbers. Swap the twelve mini-site recipes for your own product categories, and rewrite the FAQ. It builds with Vite, React and Tailwind into a static folder you can host anywhere. ## Quietwave — Interactive Science Explainer Scrollytelling Template with Canvas Wave Simulation and Quiz A calm, science-magazine scrollytelling explainer with a live canvas wave, a phase slider and a quiz. - Page: https://vibefather.ai/templates/quietwave - Prompt (plain text): https://vibefather.ai/templates/quietwave.md - Live demo: https://demo.vibefather.ai/ba1f1e05-30e6-4ecf-9d7a-c4b6ae82366a/index.html - Stack: Vite 5 + vanilla TypeScript + Plain CSS - Tags: Interactive Explainer, Teaching & Explaining, Educators, Students, Minimal, Editorial, Drag & Physics, Micro-interactions, Scroll Animation, Plain HTML, Education Quietwave is a single-page interactive explainer about how noise-cancelling headphones work, laid out like a feature in a printed science magazine. It opens with a large serif headline and a slowly drifting sound wave. Then it walks the reader through four chapters: what a sound wave is, how an opposite wave cancels it, what sits inside an earcup, and why some noise still gets through. It closes with a four-question quiz that gives instant feedback. It suits science writers, teachers, museum and outreach teams, hardware startups explaining their technology, and anyone who wants to teach one idea well instead of listing features. Everything is drawn in code. The waves are Canvas 2D, the earcup cut-away and the frequency chart are inline SVG, and the site uses no photos, audio or microphone access, so there are no image licenses to track. The design uses warm off-white paper, deep ink text, hairline rules, figure numbers and italic captions. Two accents carry meaning: teal is always the noise and coral is always the anti-noise. In the scrollytelling chapters a sticky figure changes state as each text step scrolls into view. The phase lab lets the reader drag the coral wave or a slider from 0° to 360° and watch the summed line flatten at 180°, with a live readout of how loud the result is. The earcup diagram builds up one part at a time, with numbered callouts and leader lines. In reduced-motion mode the waves stay still and the steps switch without animation, and every control still works. To adapt it, change the publication name, the device, the noise source, the reader and the issue label. All copy lives in one content file, and the diagram keeps the same four-part sense, compute, play and check structure. ## Coinslot — Pixel-Art Arcade Landing Page with Playable Hero Game and CRT Scanlines Pixel-art arcade landing page for a game studio, with a playable runner in the hero and a local high-score board. - Page: https://vibefather.ai/templates/coinslot - Prompt (plain text): https://vibefather.ai/templates/coinslot.md - Live demo: https://demo.vibefather.ai/884b18c2-d036-476f-8c99-65397e86221e/index.html - Stack: Vite 5 + vanilla TypeScript + Hand-written vanilla CSS - Tags: Browser Game, Landing Page, Product Launches, Fun & Play, Indie Hackers, Creators, Retro, Pixel Art, Dark, Text Animation, Marquee, Micro-interactions, Plain HTML, Gaming Coinslot is a single-page landing template for a small game studio, and the page is itself a small game. The hero is an arcade cabinet drawn in CSS. Its screen holds a canvas runner: a hooded pixel courier with a lantern runs across night rooftops, jumping chimneys and ducking low-flying moths while the speed slowly rises. Visitors play with Space and the arrow keys on desktop, or with taps, swipes and two large on-screen buttons on phones. The control hints change to match whichever input they last used. Next to the cabinet is a top-five high-score board with three-letter initials entry. Scores are saved in localStorage, the board can be reset, and the best score also appears in the ticker below. The template suits indie studios, game jams, retro arcade bars, pixel artists and any small team that wants its front page to be played as well as read. The look is a deep navy-black screen with one hot magenta accent, phosphor green for success states and amber for scores. Borders and buttons have stepped pixel corners and hard offset shadows, and buttons press down when clicked. The CRT treatment covers scanlines, a soft vignette, slight screen curvature, a faint flicker and a slow rolling band. Every animated part switches off when the visitor has reduced motion turned on. Below the hero are a scrolling ticker of game titles, a grid of cartridge-shaped game cards with code-drawn label art, a studio section with stat counters and a short manifesto, and a newsletter sign-up. The form only checks the email in the browser and then shows a confetti "1UP" message. All sprites and illustrations are drawn in code, so there are no image files to license. To adapt it, change the brand, the hero game's name, the studio pitch, the home city and the newsletter name in one content file. Then swap the game list and the pixel grids.