2 cases built from this template

Same prompt, different [VARIABLES]. Click one to preview it above.

About this template

A single-page launch site for one indie game, painted rather than built. The first screen is full-bleed hand-painted key art — a silhouetted traveler with a lantern over a dusk valley — with the game's title set into the painting like a masthead, a quiet ember light drifting across the scene. Scrolling walks the visitor through the pitch: three feature beats, each on its own painted scene that drifts with the pointer and the scroll; an honest trailer placeholder (a painted poster frame and a drawn play glyph, with a caption saying no video ships); a world-map teaser with glowing location chips naming invented places; then the release window — a season label only, never a date — above a row of drawn, deliberately generic store buttons; and the conversion close: an email capture that saves locally and says so, beside the wishlist buttons. The look is locked: deep violet-black dusk, one ember-orange accent, warm parchment text, Cinzel's inscription-cut display over Alegreya's bookish body, visible brushwork everywhere and no screenshots, no pixel art, no glass. Motion is slow weather: a four-second settle on the key art, parallax drift on the scenes, pulsing map dots — all with static fallbacks under prefers-reduced-motion and pointer parallax on fine pointers only. Every painting comes from one painter's dusk world with figures only as distant silhouettes and no readable text anywhere. Swap game, studio, world and release window in one content file; the second demo case turns the same page into a cozy lantern-keeping tale.

The template prompt

The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Indie Game Launch Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A single-page launch site for an invented indie game: a full-bleed hand-painted key-art hero with the title set into the painting, three parallax feature beats, an honest trailer placeholder, a painted world-map teaser with glowing location chips, a season-only release window with drawn generic store buttons, and a client-side wishlist/newsletter close.

- Audience: Indie game studios and solo developers launching one atmospheric game, and the agencies building their reveal pages.
- Goal: Sell the mood in one painting, prove the concept in three beats, ground it in a world, and close on a wishlist — while staying honest that this demo sends nothing and ships no video.
- Tone: Hushed and literary, like a note pinned inside a lantern: short evocative lines, warm and slightly solemn; the trailer and store rows speak plainly about being placeholders.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: tailwindcss (MIT), motion (MIT), lucide-react (ISC), @fontsource/cinzel (OFL), @fontsource/alegreya (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest indie-game-launch-page -- --template react-ts; add [email protected], postcss and autoprefixer as dev dependencies; add motion, lucide-react, @fontsource/cinzel and @fontsource/alegreya as dependencies.
  - vite.config.ts: base './', build.sourcemap false, build output dist/.
  - tailwind.config.js: extend colors dusk #141019, duskraised #1E1822, ashline #3A2F33, ember #E86A33, emberdeep #B34A22, parchment #F2E6D4, ashrose #A89599; fontFamily display 'Cinzel' and sans 'Alegreya'; radius: panel 6px and pill 999px.
  - postcss.config.js: tailwindcss + autoprefixer.
  - src/components/ParallaxScene.tsx: wraps a painting in an overflow-hidden frame (6px radius); the img is scaled 1.12 and translated ±2.5% toward the pointer (lerped rAF, enabled only via a matchMedia('(pointer:fine)') check) and ±4% with the section's scroll progress (Motion useScroll + useTransform); both transforms stop under prefers-reduced-motion, where the painting renders at scale 1.02 static.
  - src/components/EmberMotes.tsx: twelve 3px ember dots rising slowly across the hero — positions and durations from a fixed constant array (8–14s loops, alternating delays), pure CSS keyframes, aria-hidden, disabled under prefers-reduced-motion.
  - Store buttons are drawn generic in code: a duskraised pill, a lucide icon (store, gamepad-2, tag), and the literal labels 'Store A', 'Store B', 'Store C' with an ashrose caption 'generic buttons for the demo — no real storefronts'; they anchor to #wishlist, never to external URLs.
  - The trailer block is a placeholder: the poster painting under a 72px ember circle with a lucide play glyph, the caption 'TRAILER — PLACEHOLDER' and the subline 'A painted placeholder; no video ships with this demo.'; clicking nudges the glyph 2px and does nothing else; there is no <video> element anywhere.
  - src/lib/motion.ts: reveal variants (opacity 0→1, y 26→0, 800ms cubic-bezier(0.16,1,0.3,1), 110ms stagger, whileInView once) with useReducedMotion falling back to plain 200ms fades.
  - Keep every user-facing string (game, studio, world name, release window, hero lines, three beats, map chips, form copy) in src/content.ts; sections read from it so values swap in one place.
  - index.html: <title>[GAME] — a hand-painted adventure by [STUDIO]</title> plus a drawn-in-code favicon.svg (an ember dot on the dusk ground); no other meta work.

## Variables
- [GAME] — Game title (default: "Emberveil"). The invented game's name — set into the key art as the masthead, the page title and the wishlist copy.
- [STUDIO] — Studio name (default: "Hollowmoor Games"). The invented studio credited under the title, in the release section and footer.
- [WORLD] — World name (default: "the Ashen Vale"). The invented world the map teaser and copy describe ('the fires went out in [WORLD]').
- [WINDOW] — Release window (default: "the ember season"). A season-style label only — 'coming in [WINDOW]' — never a date, month-number pair or year.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/indie-game-launch-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.

Join Pro early access →

DESIGN.md

The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.

---
name: "Indie Game Launch Page"
colors:
  dusk: "#141019"
  dusk_raised: "#1E1822"
  ash_line: "#3A2F33"
  ember: "#E86A33"
  ember_deep: "#B34A22"
  parchment: "#F2E6D4"
  ash_rose: "#A89599"
typography:
  display_masthead_beat_titles_release_window_inscription_cut_serif_with_a_slightly_runic_character_tracked_wide: { family: "Cinzel", weights: [600, 700] }
  text_body_captions_form_labels_bookish_serif_italics_for_flavor_lines: { family: "Alegreya", weights: [400, 500] }
spacing: "Breathing room between set pieces: sections py-32 (128px) desktop / py-20 mobile; content max-w-5xl px-6/px-10; paintings bleed full-bleed or sit in 6px frames with 32px gutters; beats alternate sides with 96px between rows."
radius: "Softly worn: 6px on framed scenes, panels and inputs; 999px pills on CTAs and chips; key art bleeds edge-to-edge at 0 radius."
---

# Indie Game Launch Page — Design System

Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.

## Colors
- **Dusk** `#141019` — Page ground everywhere — deep violet-black night, never pure #000.
- **Dusk raised** `#1E1822` — Panels, form fields, store buttons, footer band.
- **Ash line** `#3A2F33` — Hairlines, borders, rules — structure instead of shadows.
- **Ember** `#E86A33` — The one accent: CTAs, map dots, play glyph, beat numbers, links, ember motes.
- **Ember deep** `#B34A22` — Pressed and hover-deep states on ember.
- **Parchment** `#F2E6D4` — Primary text — warm candle-lit off-white for the masthead, headings and body.
- **Ash rose** `#A89599` — Secondary text: captions, meta lines, placeholder honesty notes.

## Typography
- **Display — masthead, beat titles, release window (inscription-cut serif with a slightly runic character, tracked wide)** — Cinzel (OFL), weights 600/700. Self-host the font files.
- **Text — body, captions, form labels (bookish serif; italics for flavor lines)** — Alegreya (OFL), weights 400/500. Self-host the font files.

## Spacing & shape
- Spacing: Breathing room between set pieces: sections py-32 (128px) desktop / py-20 mobile; content max-w-5xl px-6/px-10; paintings bleed full-bleed or sit in 6px frames with 32px gutters; beats alternate sides with 96px between rows.
- Radius: Softly worn: 6px on framed scenes, panels and inputs; 999px pills on CTAs and chips; key art bleeds edge-to-edge at 0 radius.

## Motion
- Hero: the key art settles from scale 1.04→1 over 4s on load, then parallaxes at 0.1 of scroll; the masthead fades up 500ms after; twelve ember motes rise on 8–14s loops.
- Beat scenes: each painting drifts ±2.5% toward the pointer (fine pointers only, lerped) and ±4% with scroll, inside its overflow-hidden frame.
- Map chips: each location dot pulses scale 1→1.3 on a 3s loop, staggered; hovering a chip brightens its label to parchment.
- Trailer placeholder: the ember circle and play glyph breathe subtly (scale 1→1.04, 4s); a click nudges the glyph 2px — deliberately nothing more.
- Reveals: sections and beats fade up (y 26→0, 800ms cubic-bezier(0.16,1,0.3,1)) with 110ms stagger via Motion whileInView, once.
- Wishlist form: the ember button presses to emberdeep; the saved note fades in 300ms.
- prefers-reduced-motion: the key art is static, parallax and drift off, motes and pulses stop, every reveal becomes a plain 200ms opacity fade.

## Imagery
One painter, one dusk: hand-painted oil-painting-style illustrations — deep violet-indigo nights warmed by ember-orange light sources, visible expressive brushwork and palette-knife texture, soft glows, atmospheric haze, painterly edges. Figures appear only as distant silhouettes with no readable faces. No readable text, no logos, no watermarks anywhere in the paintings. Six pieces are generated by VibeFather and downloaded into public/images.

## Tone
Hushed and literary, like a note pinned inside a lantern: short evocative lines, warm and slightly solemn; the trailer and store rows speak plainly about being placeholders.

---
— Prompt by VibeFather · https://vibefather.ai/t/indie-game-launch-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown