Skip to content
VibeFather
Sign up free

2 cases built from this template

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

About this template

Paper Lantern Festival Page is a single-page interactive ritual built around an illustrated river at night. A visitor writes a wish, watches a sheet of paper fold into a glowing lantern, and releases it into a sky of gentle ambient lights. The personal gallery keeps each released wish on the same device, with controls to launch it again or remove it.

The scene is drawn entirely with Canvas 2D, SVG, and CSS. Deep indigo hills, slow mist, warm paper panels, river reflections, and a seeded field of lanterns create depth without image downloads or a 3D engine. A compact wind control changes horizontal drift; pointer parallax moves the landscape by only a few pixels. The three-step composer remains an ordinary DOM interface beside the scene on desktop and below it on mobile, so the central ritual is never pointer-only.

This template suits creators, designers, educators, community projects, and anyone building a reflective digital event or small interactive gift. Variables cover the project name, festival title, welcome headline, fictional river, audience, and wish themes. The alternate case turns the same interaction into a harbor gathering about friendship, courage, and homecomings. All supporting copy and ambient wishes are specified as editable content rather than scattered through components.

The build uses Vite, React, TypeScript, vanilla CSS, and locally bundled fonts and icons. Wish storage is validated, versioned localStorage with a clear local-only disclosure; there is no public feed or pretense of live visitors. Fixed lantern counts, capped pixel density, keyboard-operable controls, and a complete reduced-motion mode keep the static site practical. No generated images are required, and nothing needs a backend, account, external API, analytics service, or remote asset host.

The template prompt

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

# Paper Lantern Festival Page

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

## Brief
Build [BRAND], an original single-page paper-lantern festival called [FESTIVAL_NAME] above the fictional [RIVER_NAME]. The welcome headline is [HEADLINE], written for [AUDIENCE], with original ambient wishes shaped by [WISH_THEMES]. A full-width living Canvas 2D river scene carries the first screen. Beside it, a three-step DOM composer lets each visitor write a private wish, fold an SVG paper lantern, and release it into the animated sky. Released wishes persist in a personal local gallery with Release again and Remove actions. Use only procedural Canvas 2D, local SVG, CSS, and original copy; do not reproduce an existing event or lantern website.

- Audience: Write the welcome, wish prompts, helper text, and ambient wishes for [AUDIENCE]. The experience should feel understandable to a first-time visitor without instructions or an account. Keep the core write-fold-release workflow available through ordinary labeled buttons and fields on desktop, touch screens, and keyboards; canvas movement and pointer parallax are decorative enhancements, never required input.
- Goal: Within five seconds, show a richly layered night river, many warm lanterns, and an obvious place to write a wish. Make the transition from text to folded paper to released light feel coherent and rewarding, then make the saved wish easy to find after a reload. Preserve the draft through folding, keep up to 24 released wishes locally, and deliver the entire experience as static files with no external data request.
- Tone: Tender, quiet, secular, and lightly poetic rather than mystical or sentimental. Use concise US English and concrete interaction feedback. Treat lanterns as original paper-craft objects, not as sacred symbols or a claim of cultural authenticity. Never promise that a wish will come true. Be explicit that ambient wishes are invented, visitor wishes stay in the current browser, and there is no live public feed.

## Stack
- Framework: Vite 6 + React 18 + TypeScript
- Styling: Vanilla CSS with custom properties
- Libraries: react and react-dom (MIT), vite (MIT), typescript (Apache-2.0), lucide-react (ISC), @fontsource/fraunces (OFL-1.1), @fontsource/manrope (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create package.json with scripts dev = vite, build = tsc --noEmit && vite build, and preview = vite preview. Configure vite.config.ts with base './', build.outDir 'dist', build.sourcemap false, build.target 'es2020', and minification enabled. Use one index.html entry, no router, and no backend.
  - Organize the project as src/content.ts for variable values, all visible copy, and the twelve ambient wishes; src/types.ts for lantern and saved-wish records; src/lib/random.ts for seeded generation; src/lib/storage.ts for validated persistence; src/components/FestivalCanvas.tsx for rendering and simulation; src/components/WishComposer.tsx for the ritual and SVG folding preview; src/components/LanternGallery.tsx; src/App.tsx for shared state; and src/styles.css for tokens and responsive rules. When variables change, rewrite every dependent wish, label, storage namespace, and instruction to fit the new values; leave no default-brand or default-festival remnants.
  - Self-host Fraunces 400, 500, and 600, Manrope 400, 500, 600, and 700, and IBM Plex Mono 400 and 500 through the listed Fontsource Latin packages. Set lang en, a plain document title '[BRAND] — [FESTIVAL_NAME]', theme-color #070C18, and an original local favicon.svg showing the same simple six-panel lantern geometry used in the scene. No font CDN or remote favicon.
  - Represent each scene lantern with id, kind ambient or personal, wishId when personal, normalized x and y, depth from 0.35 to 1, scale from 0.55 to 1.18, phase, sway, rotation, cycle, and releaseAge. Represent each saved wish with id, text, ordinal, and paperTone only; do not store a timestamp, location, visitor identity, or analytics data. Keep the composer draft in React state and active per-frame lantern data in refs.
  - Use a local mulberry32 generator seeded 291129 for the initial scene. Create 42 ambient lanterns at desktop widths and 24 at widths below 760px. Distribute normalized x from 0.04 to 0.96 and y from 0.09 to 0.68, with depth and scale ranges above, phase from 0 to 2π, and sway from 0.6 to 1.4. Assign the twelve default wishes cyclically but never paint their paragraphs onto the canvas. Add 96 faint stars with the same stable seed, rejecting any star within 44 CSS pixels of the moon center.
  - Render in this order: sky gradient; 96 stars and a plain moon; two far hill layers; two translucent mist bands; distant shoreline; river gradient and fine current lines; lantern reflection streaks; ambient lanterns sorted by depth; active personal lanterns and release trails; then near-bank silhouettes and a small unoccupied wooden dock. Use a horizon at 64% of canvas height, moon center at 18% × 19% with radius 30 CSS pixels, and water occupying the bottom 36%. Keep all text and controls in DOM rather than painting labels into the canvas.
  - Draw each lantern from original geometry at a 28 × 42 CSS-pixel base size multiplied by depth and scale: a shallow curved top shoulder, gently tapered six-panel body, darker open base, four fine vertical paper ribs, a warm inner gradient, a soft radial halo, and no writing, emblem, character, or religious symbol. Use Paper cream #F7EAC8 and Lantern amber #F6B85F for the paper, Lantern core #FFE6A3 for the center, and Copper line #8A6848 at low opacity for ribs. Limit halo radius to 2.2 times lantern width so text and silhouettes remain crisp. Mirror each lantern over water as three short low-alpha vertical streaks rather than a sharp duplicate.
  - Run a fixed 1/60-second simulation with at most three catch-up steps, rendered through requestAnimationFrame at a maximum of 30 frames per second during ambient drift and 60 frames per second for the 1.4-second personal release. Ambient vertical speed is 4 + depth × 7 CSS pixels per second upward. Horizontal velocity is wind × (3 + depth × 5) + sin(elapsed × 0.35 + phase) × sway × 1.8 pixels per second. Rotation is sin(elapsed × 0.5 + phase) × 0.055 radians and brightness varies by at most 7%. Wrap an ambient lantern to just below the river horizon when it exits the top or side, incrementing cycle and deriving its replacement x deterministically from id and cycle; never allocate random values every frame.
  - The wind range input has integer values 0, 1, and 2 labeled Still, Gentle, and Brisk, defaulting to Gentle. Map these to wind multipliers 0, 1, and 1.85. Pause ambient motion freezes simulation time without clearing lanterns; Resume continues from the same positions. Hide the canvas motion when document.hidden and resume without a large delta. Cap device pixel ratio at 1.75 desktop and 1.5 mobile, use ResizeObserver without resetting wishes or ambient positions, and clean up observers, listeners, and animation frames.
  - Implement subtle pointer parallax only on devices with a fine pointer: stars move at most 2 CSS pixels, far hills 4, mist 7, and near bank/dock 10 opposite the normalized pointer position, eased over 200ms. Personal lanterns do not follow the pointer. Disable parallax for touch and reduced motion, never use scroll-jacking or a custom cursor, and do not make ambient lanterns required click targets.
  - Model the composer as a finite state machine: write, folded, releasing, released. Write requires a trimmed wish of 3–120 UTF-16 characters and keeps the exact user text intact. Fold my lantern enters folded and plays the SVG sequence once. Back to wish returns to write without losing text. Release lantern enters releasing, creates one personal lantern at normalized x 0.48 and y 0.78, and saves exactly one gallery record. After 1.4 seconds it enters released and joins normal upward simulation. Write another clears only the composer; the gallery remains. Release again in the gallery creates a personal lantern for the existing wishId at x 0.48 and y 0.78 without adding a duplicate record.
  - Build the folding preview as a local inline SVG with a 160 × 160 viewBox and six named polygon groups. Start with a flat 104 × 104 diamond and four visible crease lines; over 1100ms fold the four corners inward at 0–420ms, close the side panels at 300–760ms, raise the base and illuminate the center at 680–1100ms. Finish on the same six-panel lantern silhouette used on canvas. Use transforms and opacity only, with no 3D library and no text on the paper. Under reduced motion, show the completed lantern immediately.
  - During releasing, draw a short amber trail and interpolate the personal lantern from y 0.78 to y 0.60 with easeOutCubic over 1.4 seconds while scale moves from 0.72 to 1. Afterward, apply the normal personal ascent speed of 9 + depth × 5 CSS pixels per second and the same wind rule. A personal lantern that leaves the viewport stays saved but becomes visually dormant; Release again resets its scene position. Reduced-motion release skips travel and trail, places the lantern immediately at y 0.58, announces success, and leaves the scene static.
  - Persist released wishes in localStorage under a versioned key derived from a lowercase hyphenated slug of [BRAND] plus '-lantern-wishes-v1'. Store at most 24 records in release order, assigning ordinals sequentially from 1 and storing no real dates. At 24 records, disable Release lantern for a new wish and show 'Your gallery holds 24 wishes. Remove one before releasing another.'; Release again remains available because it adds no record. Validate restored JSON for version, id, 3–120 character text, ordinal, and allowed paperTone; discard malformed records and recover silently from unavailable storage with an inline 'This browser could not save your gallery; this session still works.' message. Remove requires one inline confirmation, renumbers surviving records sequentially in release order, hides active personal lanterns with that wishId, and never contacts a server.
  - Use semantic DOM controls for the entire ritual: labeled textarea, three wish-prompt buttons, step buttons, native wind range, Pause or Resume, gallery Release again and Remove, and a Reset scene button that resets only camera/parallax and wind, not saved wishes. The canvas has an accessible summary naming [FESTIVAL_NAME], the current wind, and the number of released personal lanterns; it is not the only way to perform any action. Use visible focus, aria-current on the active composer step, aria-live polite for fold/release/save feedback, and do not announce animation frames.
  - For prefers-reduced-motion, render the initial stars, hills, river, and all lanterns as a complete static tableau; do not run ambient ascent, flicker, parallax, folding travel, release trails, or autonomous UI movement. Preserve write, fold, release, gallery, wind-label, and removal functions with immediate state changes. Listen for preference changes and stop or restart rendering appropriately without losing state.
  - Write ASSETS.md at the project root covering the original procedural scene and lantern geometry, original SVG folding preview and favicon, Lucide ISC, and all three Fontsource packages with OFL-1.1 licenses. Keep every runtime request local and dist/ below 20 MB. No generated, stock, downloaded, or placeholder image files are required for this template.

## Variables
- [BRAND] — Project name (default: "Avelume"). An invented short name for the wordmark, document title, footer, and local-storage namespace; never a real event or organization.
- [FESTIVAL_NAME] — Festival title (default: "The Stillwater Ascent"). A short invented gathering title used in the eyebrow, canvas description, gallery introduction, and footer.
- [HEADLINE] — Welcome headline (default: "Let your wish find the sky."). A clear five-to-nine-word invitation; adapt the supporting sentence if its meaning changes.
- [RIVER_NAME] — Fictional river or inlet (default: "River Elian"). An invented waterfront place used in the welcome and festival note; never a real landmark.
- [AUDIENCE] — Audience (default: "dreamers, friends, and quiet night wanderers"). A plain-language phrase used to shape the welcome, wish prompts, and guide copy.
- [WISH_THEMES] — Wish themes (default: "hope, gratitude, and new beginnings"). Three broad themes used to rewrite the twelve ambient wishes and three prompt suggestions without predictions or advice.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/paper-lantern-festival-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.

## Design
### Colors
- Night ink `#070C18` — Page background, deepest sky, and modal scrims.
- River indigo `#0D1830` — Sky transition, header, and primary raised surfaces.
- Composer navy `#111D33` — Wish composer, gallery cards, and control surfaces.
- Mist teal `#24424B` — Far hills, atmospheric bands, and quiet scenic depth.
- Paper cream `#F7EAC8` — Primary text, lantern paper, and warm highlights.
- Muted blue `#AAB6CB` — Secondary copy and inactive controls with readable contrast.
- Lantern amber `#F6B85F` — Primary action, active steps, focus rings, and lantern edges.
- Lantern core `#FFE6A3` — Lantern illumination and tiny warm glints only.
- Copper line `#8A6848` — Paper ribs, warm dividers, and secondary ornamental rules.
- Amber ink `#261808` — Text on Lantern amber buttons.
- Water glint `#7EA4B8` — Fine current lines and cool river reflections.
- Night line `#2A3850` — Borders, input outlines, stepper tracks, and card separators.

### Typography
- Wordmark, welcome H1, festival note, gallery title, and released-wish text: Fraunces (OFL), weights 400/500/600
- Body, composer, buttons, fields, gallery actions, and status messages: Manrope (OFL), weights 400/500/600/700
- Step numbers, wind labels, wish counts, and small privacy labels: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use an 8px base unit. The desktop shell is max-width 1600px with 24px side padding; header is 68px high. The desktop festival hero is height calc(100svh - 92px), minimum 680px and maximum 840px, with 48–56px overlay padding. The composer is 380px wide with 24px padding and 16px group gaps. Gallery and ritual sections use a 1280px inner shell, 96px desktop and 64px mobile vertical padding. At 390 × 844 use a 56px header, 16px side padding, a 430px scene, a normal-flow composer below it, and single-column gallery cards. All interactive targets are at least 44 by 44px, and page content never causes horizontal overflow.
- Radius: Use 20px for the festival stage, 16px for the composer and gallery cards, 10px for fields and primary buttons, 8px for small controls, and 999px only for the three-step indicator and compact scene-status pills. Use 1px Night line borders and restrained shadows. The scene and paper lanterns supply the organic curves; avoid nesting every control inside a rounded floating card.
- Motion: Render the complete landscape, first ambient lantern field, headline, and write form immediately, with no splash, loading gate, or blocking intro. Ambient lanterns drift only after the first painted tableau is visible.
- Motion: Lantern ascent, wind sway, tiny rotation, and 7% brightness variation follow the exact fixed-step simulation. Pointer parallax is limited to 2, 4, 7, and 10 CSS pixels by layer and never moves interface panels.
- Motion: The folding preview is one coherent 1100ms sequence: corners, side panels, base, then inner light. It does not loop, bounce, or require the user to drag paper.
- Motion: Personal release uses a 1400ms easeOutCubic rise from the dock with a short fading trail, then joins the same wind and ascent system. Composer success crossfades over 180ms without shifting the panel width.
- Motion: Wish prompts, wind settings, buttons, and gallery actions use 120–180ms color, opacity, or at most 4px movement transitions. Reduced motion removes ambient drift, flicker, parallax, folding travel, release travel, and nonessential transforms while retaining immediate state feedback.
- Imagery: The high-craft procedural Canvas 2D river festival is the visual anchor; use no photographs, generated bitmap images, downloaded landscapes, paper textures, video, or external lantern art. Layer an indigo sky, 96 stable stars, a plain moon, teal hill silhouettes, translucent mist, fine water currents, warm six-panel lanterns, soft halos, broken reflections, and an unoccupied dock. The SVG folding preview and favicon reuse the same original paper geometry. No people, faces, mascots, sacred emblems, recognizable landmarks, real event signage, or branded lantern imagery.

## Pages & Sections
### [BRAND] — [FESTIVAL_NAME] (`index.html`)
1. **Content model and exact default wishes** — Keep every visible string and all ambient wishes in src/content.ts. Default festival eyebrow is '[FESTIVAL_NAME] · [RIVER_NAME]'; H1 is '[HEADLINE]'; welcome body is 'A small imagined festival for [AUDIENCE]. Write one private wish, fold it into light, and let it drift above the water.' The theme line is 'Twelve imagined wishes inspired by [WISH_THEMES]. Yours stays only in this browser.' Default ambient wishes in order are: 01 'May I notice the good while it is here.'; 02 'For the courage to begin before I feel ready.'; 03 'A little more time with the people I love.'; 04 'May the next chapter feel like my own.'; 05 'For softer days after a difficult year.'; 06 'May I make something worth sharing.'; 07 'A safe journey home for someone dear.'; 08 'For gratitude that outlasts the moment.'; 09 'May I forgive myself for taking time.'; 10 'For work that leaves the world a little kinder.'; 11 'May an old friendship find its way back.'; 12 'For a home filled with unhurried mornings.' The three composer prompt buttons are 'A fresh start', 'Someone I miss', and 'A little courage'; activating one inserts respectively 'May I welcome a fresh start with an open heart.', 'May someone I miss feel how often they are in my thoughts.', or 'May I find a little courage for the next small step.' The visitor can edit inserted text before folding. For alternate variables, rewrite all twelve wishes and three prompt suggestions around the supplied WISH_THEMES and AUDIENCE at similar lengths; do not retain these default texts.
   Layout: This section defines the content model rather than a separate visible marketing block. Each ambient record supplies id and text only; no author, location, timestamp, or simulated visitor name. Personal wishes use the visitor's exact trimmed text. The paperTone cycles through cream, honey, and pale apricot using ordinal modulo 3 while staying inside the declared warm palette.
   Motion: Ambient wishes are not displayed as moving text on the canvas. Announce completed fold, release, save, relaunch, and removal actions once through a polite status region, never individual animation frames.
2. **Header and festival welcome** — Header left contains the original six-panel lantern SVG mark and [BRAND] in Fraunces 500 at 23px. Header right contains anchor links Festival and Your lanterns, plus a small outlined How it works button that moves to the ritual notes without opening a modal. The festival welcome overlays the upper-left of the scene and contains the eyebrow, H1, body, and theme line exactly as defined above. Do not add accounts, pricing, testimonials, a newsletter, a public counter, or a separate marketing hero before the interactive scene.
   Layout: The header spans the shell with a bottom Night line border. On desktop the welcome occupies at most 520px at left 56px and top 48px within the hero, with 16px text-group gaps and H1 at clamp(48px, 4.5vw, 72px) with 0.98 line height. On mobile the header keeps brand and Your lanterns visible and hides only the Festival and How it works links; the welcome sits left 20px, right 20px, and top 24px over a darkening sky scrim with H1 at 40px and the body limited to three lines. The theme line moves below the scene on mobile if space is tight; never cover it with the composer.
   Motion: Welcome copy is present at first paint. Only links, buttons, and focus rings animate; no headline reveal, floating text, typewriter effect, or moving eyebrow.
3. **Living river stage and scene controls** — The full-bleed canvas illustrates [FESTIVAL_NAME] above [RIVER_NAME], using the exact renderer and lantern counts from Setup. A small upper-center pill reads 'AN IMAGINED FESTIVAL · LOCAL ONLY'; do not call ambient lanterns live visitors. Bottom-left controls are a labeled Wind range with Still, Gentle, and Brisk and a Pause motion or Resume motion button. Bottom-right contains a RotateCcw Reset scene button and the quiet caption 'Procedural paper, water, wind & light'. The canvas accessible description summarizes the scene and directs users to the labeled wind controls and wish composer. Ambient lanterns create atmosphere but are not buttons and expose no fake public feed.
   Layout: On desktop the canvas fills the entire rounded festival hero behind the welcome and composer, with dark left and right readability scrims that leave the central sky visible. Scene controls occupy 48px-high solid Night-ink-at-88% strips at the bottom corners, clear of the dock. On mobile the canvas is 430px high, the center pill shortens to 'IMAGINED · LOCAL ONLY', the wind and pause controls form one bottom row, Reset scene remains labeled, and the procedural caption is omitted. Set touch-action pan-y on the canvas so vertical page scrolling remains natural; no dragging is needed.
   Motion: Implement the exact seeded drift, wind, pause, release, parallax, frame caps, and reduced-motion behavior from Setup. Wind changes affect velocity without jumping positions. Pause and preference changes never reset the gallery or draft. Avoid layout movement when control labels change.
4. **Three-step wish composer** — The composer title is 'Make a little light' with the privacy line 'Your wish is stored only in this browser.' A three-item stepper reads 01 Write, 02 Fold, 03 Release. In write state show label 'Your wish', a 120-character textarea with placeholder 'What would you like to send into the night?', live '{n}/120' count, and the three prompt buttons from the content model. Primary button Fold my lantern is disabled until the trimmed wish has at least three characters; helper reads '3–120 characters · nothing is uploaded'. In folded state show the completed SVG lantern, the exact wish in a readable cream paper excerpt, Back to wish, and primary Release lantern. In releasing state disable duplicate submission and show 'Folding the light into the sky…'. In released state show Check icon, 'Your wish is drifting.', the wish excerpt, primary View my lanterns linking to the gallery, and secondary Write another. Do not clear the textarea until Write another.
   Layout: On desktop the 380px composer sits right 40px and top 40px within the hero, using Composer navy at 96% opacity, a 1px Night line border, 20px radius, and 24px padding. The stepper is a single three-column row with a fine track and amber active number. Textarea is 112px high; prompt buttons wrap without overflow; primary actions are full width and 48px high. The folding SVG is 160px square centered above the wish excerpt. On mobile the composer leaves the canvas overlay and follows it in normal flow at full width with 20px padding, no negative margin, and no fixed height. Every field and action remains at least 44px high.
   Motion: Use the finite state machine, 1100ms fold, 1400ms release, and reduced-motion alternatives from Setup. The stepper updates with aria-current rather than color alone. Success uses a 180ms opacity transition, never a confetti burst, toast library, automatic scroll, or automatic second lantern.
5. **Personal lantern gallery** — Section eyebrow is 'YOUR LANTERNS'; title is 'Wishes you have set afloat.' The local-only note reads 'Saved on this device, not online. Clearing browser storage will remove them.' Empty state contains a small unlit six-panel SVG, 'No wishes released yet.', and a Write a wish anchor back to the composer. Nonempty gallery cards show 'LANTERN {ordinal padded to two digits}', the full wish in Fraunces 400, a small paperTone lantern thumbnail, Release again with Send icon, and Remove with Trash2 icon. Remove first changes to an inline 'Remove this wish?' with Keep it and Remove actions. Release again announces 'This wish is drifting again' and does not duplicate or reorder the card. Show a count of '1 saved wish' or '{n} saved wishes'; never show dates, locations, or public viewer counts.
   Layout: The section sits on Night ink within the 1280px inner shell. Its header is a two-column title/count row with the privacy note below. Cards form a three-column grid at 1200px and above, two columns at tablet, and one column on mobile, with 16px gaps. Each card uses Composer navy, 16px radius, 20px padding, a 72px lantern illustration column beside flexible wish text, and a bottom hairline action row. Long wishes wrap naturally without truncation or fixed-height clipping; the grid uses align-items start. Empty state spans the grid with 48px padding and a centered action.
   Motion: Release again uses the standard personal release without scrolling away from the gallery. Removal collapses the card over 160ms only when reduced motion is off; focus moves to the next card's Release again button or the empty-state action. Saving and errors use inline text rather than layout-shifting toasts.
6. **Ritual notes and footer** — A compact editorial band titled 'A wish, in three small movements' presents: 01 Write — 'Choose a prompt or begin with your own words. There is no account and no public submission.'; 02 Fold — 'Watch six paper panels close around the light. You can return and edit before release.'; 03 Release — 'Send the lantern above [RIVER_NAME], adjust the wind, then find the wish waiting in your gallery.' Beside it, a quiet note titled 'Private by design' reads 'The other wishes are invented for this imagined festival. Your words never leave this browser, and no one can see them here unless you show them.' Footer contains [BRAND], 'An imagined gathering shaped by [WISH_THEMES].', 'No public feed · no account · no uploaded wishes', and the optional [CREDIT] link. No copyright year.
   Layout: The ritual band uses a 5/7 grid: title and privacy note on the left, three numbered steps on the right separated by horizontal hairlines. On mobile it becomes one column with steps after the privacy note. Footer is a quiet flex row with top Night line border, 24px vertical padding, and 13px Muted blue text, stacked with 12px gaps on mobile. Anchor targets have scroll-margin-top 24px and no extra route.
   Motion: The section and footer are static except for 120ms link color changes. Smooth anchor scrolling is allowed only when reduced motion is not requested; otherwise jump immediately. No scroll-triggered scene pinning or reveal dependency can hide this content.

## Assets
- image: Use no external or generated image files. Author the river, hills, mist, moon, stars, dock, water currents, six-panel lanterns, halos, reflections, folding preview, brand mark, and favicon entirely with local Canvas 2D, SVG, and CSS from the declared original geometry. Record this original procedural authorship in ASSETS.md; no downloaded maps, textures, photographs, or placeholder images.
- icon: Bundle lucide-react locally for Check, Send, Trash2, RotateCcw, Pause, Play, Wind, ArrowDown, ArrowUp, and PenLine at 18–20px with currentColor. Use only familiar utility meanings; do not import brand, event, religious, or third-party lantern icons. Record Lucide's ISC license in ASSETS.md.
- font: Install and self-host @fontsource/fraunces, importing only Latin woff2 files for weights 400, 500, and 600. Record package path, source, author, and OFL-1.1 license in ASSETS.md; no font CDN.
- font: Install and self-host @fontsource/manrope, importing only Latin woff2 files for weights 400, 500, 600, and 700. Record package path, source, author, and OFL-1.1 license in ASSETS.md; no font CDN.
- font: Install and self-host @fontsource/ibm-plex-mono, importing only Latin woff2 files for weights 400 and 500. Record package path, source, author, and OFL-1.1 license in ASSETS.md; no font CDN.

## Don'ts
- Do not copy, trace, recolor, or closely imitate an existing lantern festival, event website, wish wall, or interactive lantern experience, including its code, prompt text, layout composition, illustrations, icons, copy, slogans, names, logos, mascots, or signature animation assets. The procedural scene and interaction here must remain original.
- Do not use real festival names, logos, branded lanterns, real people's likenesses, licensed characters, recognizable landmark skylines, culturally specific sacred symbols, religious iconography, or claims of cultural authenticity. Keep the river and event fictional and the paper craft generic.
- Do not copy wishes, ceremony copy, illustrations, textures, code, or animation assets from another source. The twelve ambient wishes, prompt suggestions, interface copy, and alternate-theme content must be newly written and kept in the content module.
- Do not present ambient lanterns as live visitors, wishes as public submissions, or the gallery as an online community. Never promise that wishes come true. Keep the imagined-festival and local-only disclosures visible and never request a name, email, location, account, or social profile.
- No backend, server code, API routes, database, authentication, remote form submission, analytics, third-party API, runtime fetch, tracking pixel, social widget, or public sharing service. Saved wishes stay in validated localStorage and contain only the declared id, text, ordinal, and paperTone fields.
- No CDN scripts or styles, Google Fonts URLs, hotlinked assets, externally hosted icons, placeholder-image services, Unsplash, Pexels, Pixabay, Google Images, or assets with unclear, noncommercial, or share-alike licenses. Use Vite base './', relative paths, locally bundled packages, and self-hosted Fontsource fonts.
- Do not add image generation, photographs, video, WebGL, Three.js, a canvas helper library, a state-management library, an animation framework, a router, or an external physics service. Native Canvas 2D, SVG, CSS, React state, and the declared packages are sufficient.
- Do not hard-code default brand, festival, headline, river, audience, wish themes, ambient wishes, prompt suggestions, or storage namespace outside src/content.ts. Alternate values must produce coherent new copy and twelve theme-appropriate wishes with no default remnants or unresolved [VARIABLE] placeholders.
- Do not bypass the write-fold-release state machine, allow duplicate submissions during release, save before Release lantern is activated, erase a draft when moving Back to wish, duplicate gallery records on Release again, or reset saved wishes with Reset scene. Follow the storage cap and validation rules exactly.
- Do not attach touch-action none to the canvas or page, require dragging to fold paper, make ambient lanterns mandatory click targets, use pointer-only controls, autoplay audio, scroll-jack, pin sections, use a custom cursor, or hide content behind scroll reveals. The complete ritual must work with keyboard and touch.
- Do not run unbounded lantern counts, per-frame React rendering, per-frame random or star-array allocation, uncapped device pixel ratio, animation while hidden, autonomous camera movement, or motion that ignores prefers-reduced-motion. Keep the fixed counts, frame caps, cleanup, and static reduced-motion tableau.
- Do not use excessive bloom, moving wish paragraphs, fake visitor counts, public usernames, timestamps, pricing, testimonials, newsletter forms, marketing sections, splash screens, or confetti. The festival scene and composer are the first screen and primary experience.
- Do not add extra pages, bare-directory links, SEO markup, structured data, Open Graph work, sitemap code, or metadata beyond the plain title, theme color, and original favicon. The only page is index.html and all navigation uses local anchors.
- Production npm run build must emit minified static dist/ below 20 MB with no source maps and no src/ copied into dist/. It must run without console errors at 1440 × 900 and 390 × 844, keep all tap targets at least 44px, preserve long wishes without clipping, and leave no horizontal page overflow.
- Use visible focus, semantic buttons and form labels, an accessible canvas summary, polite status messages, aria-current on steps, and selected states that do not rely on color alone. Removal confirmation and gallery focus handling must work without a pointer, and local-storage failures must not break the session.
- Never mention VibeFather in the rendered site except the optional [CREDIT] link, and never use VibeFather or a real brand as a variable default. All copy, labels, sample wishes, and accessible text must be US English.

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

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.

DESIGN.md

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

---
name: "Paper Lantern Festival Page"
colors:
  night_ink: "#070C18"
  river_indigo: "#0D1830"
  composer_navy: "#111D33"
  mist_teal: "#24424B"
  paper_cream: "#F7EAC8"
  muted_blue: "#AAB6CB"
  lantern_amber: "#F6B85F"
  lantern_core: "#FFE6A3"
  copper_line: "#8A6848"
  amber_ink: "#261808"
  water_glint: "#7EA4B8"
  night_line: "#2A3850"
typography:
  wordmark_welcome_h1_festival_note_gallery_title_and_released_wish_text: { family: "Fraunces", weights: [400, 500, 600] }
  body_composer_buttons_fields_gallery_actions_and_status_messages: { family: "Manrope", weights: [400, 500, 600, 700] }
  step_numbers_wind_labels_wish_counts_and_small_privacy_labels: { family: "IBM Plex Mono", weights: [400, 500] }
spacing: "Use an 8px base unit. The desktop shell is max-width 1600px with 24px side padding; header is 68px high. The desktop festival hero is height calc(100svh - 92px), minimum 680px and maximum 840px, with 48–56px overlay padding. The composer is 380px wide with 24px padding and 16px group gaps. Gallery and ritual sections use a 1280px inner shell, 96px desktop and 64px mobile vertical padding. At 390 × 844 use a 56px header, 16px side padding, a 430px scene, a normal-flow composer below it, and single-column gallery cards. All interactive targets are at least 44 by 44px, and page content never causes horizontal overflow."
radius: "Use 20px for the festival stage, 16px for the composer and gallery cards, 10px for fields and primary buttons, 8px for small controls, and 999px only for the three-step indicator and compact scene-status pills. Use 1px Night line borders and restrained shadows. The scene and paper lanterns supply the organic curves; avoid nesting every control inside a rounded floating card."
---

# Paper Lantern Festival 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
- **Night ink** `#070C18` — Page background, deepest sky, and modal scrims.
- **River indigo** `#0D1830` — Sky transition, header, and primary raised surfaces.
- **Composer navy** `#111D33` — Wish composer, gallery cards, and control surfaces.
- **Mist teal** `#24424B` — Far hills, atmospheric bands, and quiet scenic depth.
- **Paper cream** `#F7EAC8` — Primary text, lantern paper, and warm highlights.
- **Muted blue** `#AAB6CB` — Secondary copy and inactive controls with readable contrast.
- **Lantern amber** `#F6B85F` — Primary action, active steps, focus rings, and lantern edges.
- **Lantern core** `#FFE6A3` — Lantern illumination and tiny warm glints only.
- **Copper line** `#8A6848` — Paper ribs, warm dividers, and secondary ornamental rules.
- **Amber ink** `#261808` — Text on Lantern amber buttons.
- **Water glint** `#7EA4B8` — Fine current lines and cool river reflections.
- **Night line** `#2A3850` — Borders, input outlines, stepper tracks, and card separators.

## Typography
- **Wordmark, welcome H1, festival note, gallery title, and released-wish text** — Fraunces (OFL), weights 400/500/600. Self-host the font files.
- **Body, composer, buttons, fields, gallery actions, and status messages** — Manrope (OFL), weights 400/500/600/700. Self-host the font files.
- **Step numbers, wind labels, wish counts, and small privacy labels** — IBM Plex Mono (OFL), weights 400/500. Self-host the font files.

## Spacing & shape
- Spacing: Use an 8px base unit. The desktop shell is max-width 1600px with 24px side padding; header is 68px high. The desktop festival hero is height calc(100svh - 92px), minimum 680px and maximum 840px, with 48–56px overlay padding. The composer is 380px wide with 24px padding and 16px group gaps. Gallery and ritual sections use a 1280px inner shell, 96px desktop and 64px mobile vertical padding. At 390 × 844 use a 56px header, 16px side padding, a 430px scene, a normal-flow composer below it, and single-column gallery cards. All interactive targets are at least 44 by 44px, and page content never causes horizontal overflow.
- Radius: Use 20px for the festival stage, 16px for the composer and gallery cards, 10px for fields and primary buttons, 8px for small controls, and 999px only for the three-step indicator and compact scene-status pills. Use 1px Night line borders and restrained shadows. The scene and paper lanterns supply the organic curves; avoid nesting every control inside a rounded floating card.

## Motion
- Render the complete landscape, first ambient lantern field, headline, and write form immediately, with no splash, loading gate, or blocking intro. Ambient lanterns drift only after the first painted tableau is visible.
- Lantern ascent, wind sway, tiny rotation, and 7% brightness variation follow the exact fixed-step simulation. Pointer parallax is limited to 2, 4, 7, and 10 CSS pixels by layer and never moves interface panels.
- The folding preview is one coherent 1100ms sequence: corners, side panels, base, then inner light. It does not loop, bounce, or require the user to drag paper.
- Personal release uses a 1400ms easeOutCubic rise from the dock with a short fading trail, then joins the same wind and ascent system. Composer success crossfades over 180ms without shifting the panel width.
- Wish prompts, wind settings, buttons, and gallery actions use 120–180ms color, opacity, or at most 4px movement transitions. Reduced motion removes ambient drift, flicker, parallax, folding travel, release travel, and nonessential transforms while retaining immediate state feedback.

## Imagery
The high-craft procedural Canvas 2D river festival is the visual anchor; use no photographs, generated bitmap images, downloaded landscapes, paper textures, video, or external lantern art. Layer an indigo sky, 96 stable stars, a plain moon, teal hill silhouettes, translucent mist, fine water currents, warm six-panel lanterns, soft halos, broken reflections, and an unoccupied dock. The SVG folding preview and favicon reuse the same original paper geometry. No people, faces, mascots, sacred emblems, recognizable landmarks, real event signage, or branded lantern imagery.

## Tone
Tender, quiet, secular, and lightly poetic rather than mystical or sentimental. Use concise US English and concrete interaction feedback. Treat lanterns as original paper-craft objects, not as sacred symbols or a claim of cultural authenticity. Never promise that a wish will come true. Be explicit that ambient wishes are invented, visitor wishes stay in the current browser, and there is no live public feed.

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

Make it yours

  • A school or library workshop: set BRAND to your program, make AUDIENCE students and families, and choose WISH_THEMES like hopes for the year so the composer feels easy for first-time visitors.
  • A memorial or remembrance gathering: use the harbor alternate case, set FESTIVAL_NAME to the occasion, and pick WISH_THEMES around memory and homecoming while keeping the local-only wish disclosure visible.
  • A designer's seasonal greeting: set HEADLINE as a short personal message, name a fictional RIVER_NAME, and tune WISH_THEMES so released lanterns read as a small interactive gift rather than an event.
  • A neighborhood association's New Year page: set BRAND and AUDIENCE to residents, choose WISH_THEMES about the coming year, and use the wind control labels Still, Gentle and Brisk to set the mood.

Paper Lantern Festival Page: questions and answers

What happens to a wish after I release a lantern on the Paper Lantern Festival Page?

A released wish is saved in the personal gallery on the same device, stored as validated, versioned localStorage. The template keeps up to 24 released wishes locally, with Release again and Remove actions for each one. Nothing is sent to a server, there is no public feed, and the page states plainly that wishes stay in the current browser.

How do I change the festival name, river and welcome headline in this template?

The Paper Lantern Festival Page template exposes BRAND, FESTIVAL_NAME, RIVER_NAME, HEADLINE, AUDIENCE and WISH_THEMES as variables. You set them once, and every dependent wish, label, storage namespace and instruction is rewritten to match. Swapping the audience also reshapes the welcome copy, wish prompts, helper text and the ambient wishes drawn from your chosen themes.

Can visitors use the wish composer with a keyboard or screen reader instead of the canvas?

Yes. The three-step composer stays an ordinary labeled interface beside the illustrated river on desktop and below it on mobile, so write, fold and release all work through standard fields and buttons. Canvas motion and pointer parallax are decorative only, and a complete reduced-motion mode shows the finished lantern immediately instead of animating the fold.

What does the Paper Lantern Festival Page look like without any images or 3D library?

The Paper Lantern Festival Page draws its whole scene with Canvas 2D, SVG and CSS: deep indigo hills, two mist bands, a river with current lines and reflection streaks, a seeded field of lanterns, 96 faint stars and a plain moon. Lanterns are original six-panel paper shapes in cream and amber with soft halos, so the page needs no image downloads and no remote asset host.

How do I adapt the Paper Lantern Festival Page for a community project or memorial gathering?

Start from the alternate case in the template, which turns the same ritual into a harbor gathering about friendship, courage and homecomings. Set BRAND and FESTIVAL_NAME to your project, give RIVER_NAME a fitting fictional waterway, point HEADLINE and AUDIENCE at your participants, and choose WISH_THEMES that match the tone you want visitors to write in.

How do I build a paper lantern festival page with AI?

Copy the prompt from this page or run npx vibefather add paper-lantern-festival-page, replace [BRAND], [AUDIENCE], [HEADLINE] and [RIVER_NAME] with your own content, and paste it into Claude Code, Codex, Cursor or another AI coding agent. The live demos were built from exactly that text.

Which AI model built the Paper Lantern Festival Page demo?

The Stillwater wish festival case was built by Kimi K3.1 Pro in Kimi Code; the Harbor of Small Tomorrows case was built by DeepSeek V4.1 Flash in DeepSeek Harness. Each build used the published prompt with nothing added, so you can compare the models side by side.

What tech stack and pages does the Paper Lantern Festival Page template use?

Paper Lantern Festival Page is a single-page site built with React, with parallax, generative / canvas and micro-interactions. The prompt fixes the stack so every AI tool builds the same kind of project, and the result runs as a static site you can host anywhere.

Can I use the Paper Lantern Festival Page template for a client or a business?

The Paper Lantern Festival Page prompt and DESIGN.md are free for personal, non-commercial projects under CC BY-NC 4.0. Client work and commercial use need VibeFather Pro, which also includes the source code of the live demo.

Does the Paper Lantern Festival Page template work on mobile?

Yes. Every Paper Lantern Festival Page build was tested on a phone-sized screen as well as desktop before it went live, checking layout, text size and touch targets. Open the live demo on your phone, or switch the preview on this page to mobile view, to check it yourself.