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

# Fireworks Show Maker

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

## Brief
Build an original single-page fireworks composition tool for [BRAND], defaulting to Nightloom Studio. The opening view is a polished editor surrounding a live Canvas 2D waterfront performance for [SHOW_TITLE] above the fictional [CITY_NAME] skyline. Visitors arrange shell type, color, timing, track, and burst position, then play the sequence with synchronized synthesized sound and share it in a URL hash.

- Audience: Write the interface and any helper copy for [AUDIENCE], by default celebration designers and creative coders. It should feel approachable to a first-time visitor while retaining the precision of a compact timeline editor.
- Goal: Let a visitor understand the scene immediately, edit the supplied starter show without instructions or sign-in, preview a reproducible performance with sound, and copy a link that restores the same show entirely on the client.
- Tone: Nocturnal, precise, and quietly festive: a pro-tool interface with luminous color rather than a cartoon arcade. Use concise US English, concrete control labels, and no marketing sections.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Vanilla CSS
- Libraries: React 18 and React DOM (MIT), Vite 5 (MIT), lucide-react (ISC), @fontsource/sora (OFL-1.1), @fontsource/inter (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:
  - Configure Vite with base: './', minification enabled, and source maps disabled; the production entry must be dist/index.html.
  - Keep all interface copy, variable defaults, shell definitions, named colors, and starter events in src/content.ts; rewrite variable-dependent copy when values change and never leave default-brand text behind.
  - Use React for editor state and dialogs, but keep particle arrays and animation timing in refs so the component tree does not rerender for every particle or frame.
  - Use two stacked Canvas 2D layers: a cached skyline/water layer redrawn only on resize and a dynamic launch/particle/reflection layer driven by requestAnimationFrame with a fixed 1/60-second simulation step and at most five catch-up steps.
  - Derive all random variation from a stable seed based on the event id and particle index so playback, seeking, and shared links reproduce the same geometry.
  - Generate launches, low bursts, and crackles at runtime with the Web Audio API; create or resume AudioContext only after an explicit user gesture and do not bundle audio files.
  - Serialize versioned show data as base64url-encoded UTF-8 JSON under the #show= URL hash; validate imported data, cap shows at 60 events, and never send show data over the network.
  - Self-host Sora, Inter, and IBM Plex Mono through the listed Fontsource packages and create ASSETS.md with package paths, source URLs, authors, and licenses for the fonts and icons.

## Variables
- [BRAND] — Studio or project name (default: "Nightloom Studio"). An invented name used in the header, document title, and small brand mark label.
- [SHOW_TITLE] — Show title (default: "Harbor Afterglow"). A short original celebration title shown above the canvas and stored in shared shows.
- [CITY_NAME] — Fictional skyline name (default: "Port Aurelia"). An invented waterfront place, never a real city or landmark.
- [AUDIENCE] — Audience (default: "celebration designers and creative coders"). Used to adapt helper copy while retaining the same editing workflow.
- [SHOW_DURATION] — Show duration in seconds (default: "24"). A numeric duration from 12 to 60; scale starter-event times proportionally when it changes.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/fireworks-show-maker 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
- Midnight `#080B14` — Application background and the deepest canvas sky
- Panel `#101624` — Library, inspector, timeline, and transport surfaces
- Raised `#171F31` — Selected controls, event blocks, and dialog surface
- Line `#293249` — One-pixel separators, ruler marks, and input borders
- Ink `#F4F6FC` — Primary labels, headings, and Pearl shells
- Muted `#99A5BC` — Secondary labels and inactive icons
- Violet `#9D8CFF` — Primary action, selection outline, playhead, and Violet shells
- Solar `#FFCA6B` — Solar shells and warm building windows
- Coral `#FF6F91` — Coral shells and destructive-action hover only
- Lagoon `#64D9FF` — Lagoon shells and cool water reflections
- Mint `#75E6B2` — Mint shells and ready-state indicator

### Typography
- Brand, show title, dialog title, and major control labels: Sora (OFL), weights 500/600/700
- Buttons, shell descriptions, fields, and general interface text: Inter (OFL), weights 400/500/600
- Timecodes, ruler ticks, track labels, coordinates, and keyboard hints: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use a 4px base unit. Header height is 64px with 18px horizontal padding; panel padding is 16px; control gaps are 8px; section gaps are 12px. Shell rows are 64px high, inputs 36px on desktop and at least 44px on touch screens, and the timeline is 220px high on desktop.
- Radius: Use 6px for panels and dialogs, 4px for buttons, inputs, shell rows, and timeline events, and 2px for small swatches. Reserve fully round shapes for status dots, toggle knobs, and the canvas position marker; avoid floating pill cards.
- Motion: Start a muted ambient preview after 600ms so the first screen becomes a living show without audio; any edit pauses it. The primary Play with sound action restarts at zero, enables audio, and plays the actual timeline.
- Motion: Launch shells along a slightly curved 0.9–1.2 second trajectory, then simulate burst particles with gravity of 0.055 canvas-heights per second squared, velocity drag of 0.985 per 60Hz step, and 1.4–3.2 second lifetimes according to shell type.
- Motion: Draw each particle's previous six positions as a fading tapered trail and mirror live bursts into the bottom 22% water band with low-alpha, vertically stretched streaks; do not use a prerecorded animation.
- Motion: Keep interface transitions between 120 and 160ms with opacity and at most 4px translation. The playhead and dragged events follow input directly without easing; toasts enter and exit over 160ms.
- Motion: When prefers-reduced-motion is set, do not autoplay. Render a representative static tableau at 22 seconds, remove interface transitions and ambient twinkling, and use half the particles with shorter trails only after explicit playback.
- Imagery: Use no photographs or generated bitmap images. Draw the original skyline, water, shell previews, position marker, and a small four-ray brand spark entirely with Canvas 2D, CSS, and inline SVG. The skyline is an invented cluster of varied rectangular towers, setbacks, rooftop antennas, scattered warm windows, and haze; include no identifiable landmark. Use Lucide only for familiar interface icons. There are no people, mascots, external illustrations, or audio files.

## Pages & Sections
### [BRAND] — [SHOW_TITLE] (`index.html`)
1. **Application header** — Left: an original four-ray spark SVG and [BRAND] in Sora 600 at 16px, with a small Mint ready dot and the label LOCAL SHOW BUILDER in IBM Plex Mono 10px. Center: [SHOW_TITLE] with a muted 'Starter show' badge until the first edit, then 'Edited'. Right: a keyboard hint 'Space to play / pause' on wide screens and a Violet Share show button with a Share2 icon. Set the plain document title to [BRAND] — [SHOW_TITLE] and use the same spark as the favicon.
   Layout: A 64px full-width bar on Midnight with a bottom Line border, three grid columns, and 18px horizontal padding. Keep the brand left-aligned and Share show at the far right. Below 700px, reduce height to 56px, hide the center title and keyboard hint, and keep the brand and a labeled Share button; do not collapse into an icon-only control.
   Motion: The Edited badge crossfades over 120ms. Share show has a 120ms background and border-color hover transition, with a visible 2px Ink focus ring.
2. **Shell library and color dock** — Heading: 'Shell library', with helper text 'Pick a shell, then add it at the playhead.' Provide five selectable rows: Peony — 'Even radial bloom · 84 sparks'; Ring — 'Clean halo with an inner echo · 68 sparks'; Willow — 'Long falling golden trails · 64 sparks'; Comet — 'Five staggered mini-blooms · 45 sparks'; Crackle — 'Flickering stars with tiny pops · 60 sparks'. Each row has a code-drawn miniature, name, and short description. Below, 'Burst color' contains six labeled swatches: Solar #FFCA6B, Coral #FF6F91, Lagoon #64D9FF, Violet #9D8CFF, Mint #75E6B2, Pearl #F4F6FC. A full-width 'Add at playhead' button uses the Plus icon. Footer note: 'Select an event to move its burst on the canvas.' Include the optional [CREDIT] link unobtrusively at the bottom.
   Layout: On desktop this 220px-wide Panel column spans the full workspace height at the far left, with right and bottom Line borders, 16px padding, and vertically stacked shell rows. Selected shell rows use a Raised fill and 2px Violet left rule. Swatches form a 3×2 grid with visible color names in tooltips and accessible labels. On mobile, place this section after the timeline as a 176px-high horizontal shell rail; keep the color dock and Add button in a second row, hide descriptions, and allow internal horizontal scrolling without page overflow.
   Motion: Selecting a shell or color updates the miniature and future-event defaults immediately. Clicking Add at playhead creates and selects an event at the current time, Track 1, size 1.0, and burst position 50% × 34%, then pulses the new timeline block once for 160ms.
3. **Skyline stage and transport** — Overlay the stage's upper-left with [SHOW_TITLE] in Sora 600 at 24px and '[CITY_NAME] · [SHOW_DURATION] SECONDS' in IBM Plex Mono 11px. Upper-right status reads 'MUTED PREVIEW', 'PLAYING', 'PAUSED', or 'READY'. Fill the scene with a deep #050713-to-#111A33 sky, faint stars, two layers of atmospheric haze, an original dark skyline at roughly 72% height, and a water band below. Every shell launches from the lower city edge to its normalized burst coordinate. Peony distributes particles evenly around a sphere-like 2D bloom; Ring uses a crisp outer halo plus a smaller delayed ring; Willow uses slower gold particles with strong downward trails; Comet makes five small blooms at 90ms offsets; Crackle gives particles an end-of-life white flicker and synchronized tiny pops. Clicking the canvas moves the selected event's burst, updates its x/y fields, and shows a fine crosshair marker. Transport controls are Play with sound, Pause, Restart, sound on/off, Loop, and a live '00:00.0 / 00:24.0' timecode derived from the real duration. Space toggles playback whenever focus is not in a field.
   Layout: On desktop the stage occupies the center column of the first workspace row and is the dominant visual, with no card gap around it. The canvas fills all available space; the title and status sit in safe translucent-gradient zones rather than separate cards. A 64px transport bar sits along its bottom on rgba(8,11,20,0.88) with a top Line border. At 1440×900 the overall workspace below the header is 836px high, using a 220px / minmax(0,1fr) / 280px column grid and a minmax(360px,1fr) / 220px row grid; the library spans both rows, the timeline spans the center and right columns, and the stage remains at least 360px high. On mobile, place the stage first with a 330px canvas and a 64px transport; use a 20px show title, a two-row control layout if needed, and keep every transport button at least 44px high.
   Motion: Cap device pixel ratio at 1.75 on desktop and 1.5 on mobile, with at most 1400 live particles on desktop and 650 on mobile. Reduce per-shell particle counts if average frame rate falls below 45fps, preserving event timing. Pause freezes simulation time, Restart clears particles and seeks to zero, and Loop restarts without page reload. Never start audible playback automatically; if Web Audio is unavailable, retain visual playback and show 'Sound is not available in this browser.'
4. **Selected shell inspector** — Heading: 'Shell settings'. With an event selected, show its shell type and colored preview, then five compact type buttons, the same six named color swatches, Track select with options Track 1 / Track 2 / Track 3, Time in seconds from 0 to [SHOW_DURATION] in 0.1 steps, Burst size from 0.7 to 1.4 in 0.1 steps, and Horizontal position from 8% to 92% and Vertical position from 16% to 62% as paired range-and-number controls. Bottom actions are Duplicate with a Copy icon and Delete with a Trash2 icon. With no selection, show 'Select a shell on the timeline to edit it.' plus the current next-event shell and color rather than an empty panel.
   Layout: A 280px Panel column at the right of the stage with a left Line border and 16px padding. Use 12px field groups, 11px uppercase mono labels, 36px inputs, and bottom actions in two equal columns. Below 1100px, hide the permanent right column and open the same inspector as a modal bottom sheet when an event is selected or an 'Edit shell' button is pressed; the sheet has a visible close button, max-height 72svh, internal scrolling, focus trapping, and a dimmed backdrop. On mobile it must not cover the stage until the user explicitly opens it.
   Motion: Inspector edits update the selected timeline event and its next rendered preview immediately. Numeric fields commit on change and clamp to their ranges; Delete removes without a confirmation but offers a five-second Undo toast, while Duplicate inserts a copy 0.5 seconds later on the same track, clamped to the show duration.
5. **Three-track show timeline** — Header row: 'Show timeline', a live event count ('10 shells' for the default), 'Snap 0.1s', and helper text 'Drag to retime · Arrow keys to nudge'. Use three fixed lanes labeled Track 1, Track 2, and Track 3. Store starter-event times as fractions of [SHOW_DURATION]; for the 24-second default, render Track 1: 1.0s Comet Solar at 50% × 42%, 6.0s Peony Coral at 28% × 36%, 14.0s Ring Lagoon at 70% × 32%, 20.0s Peony Solar at 50% × 28%; Track 2: 3.0s Peony Violet at 72% × 38%, 10.0s Willow Solar at 42% × 30%, 17.0s Crackle Mint at 62% × 36%, 21.5s Peony Coral at 34% × 30%; Track 3: 8.0s Ring Lagoon at 55% × 40%, 21.0s Willow Solar at 78% × 26%. Every block displays its time, shell name, and color, with a Violet selected outline. Clicking the ruler seeks; clicking a block selects it and opens its inspector. Drag horizontally to retime and vertically to change tracks. Left/right arrows nudge 0.1s, Shift+arrow nudges 1s, up/down changes track, and Delete removes the focused event.
   Layout: On desktop the timeline occupies the second row across the center and right columns. A 44px header sits above a 76px-wide fixed track-label gutter and a scrollable ruler/lane area. Ruler ticks appear every 0.5 seconds with numbered major ticks every 2 seconds for the default duration; choose an equally legible interval for other durations. Lane rows are equal height with subtle horizontal separators, and event blocks are 76px wide unless space requires a narrower minimum of 46px. The playhead is a 2px Violet line with a small triangular handle. On mobile the timeline follows the stage at 210px high; keep the ruler and three lanes internally scrollable together, use a 58px label gutter, and provide one-finger event dragging plus native horizontal scrolling on empty ruler space.
   Motion: Clamp event times between zero and the duration and tracks between one and three, snapping to 0.1 seconds except while Alt is held. Seeking reconstructs the exact particle state from the seed rather than replaying accumulated wall-clock frames. During playback the ruler auto-scrolls only when the playhead exits its visible region; never steal scrolling while the user is dragging.
6. **Share dialog and feedback** — Share show opens a dialog titled 'Share this show' with the text 'This link contains the timeline, shell settings, and burst positions. No account or upload needed.' Include a readonly full-URL field and a primary Copy link button. The shared payload is version 1 and includes show title, city, duration, and all event settings; it does not require a server or include analytics. A successful copy changes the button to 'Link copied' with a check icon for two seconds. Invalid or oversized hash data loads the untouched starter show and displays 'That show link could not be read. The starter show is still here.' Use the same toast system for Undo, sound fallback, and clipboard fallback.
   Layout: Center a 480px-max-width Raised dialog with 20px padding, a Line border, 6px radius, a close X button, and a dark translucent backdrop on desktop. On mobile use a bottom sheet with 16px padding and safe-area inset. Give it role=dialog, aria-modal=true, an accessible title, focus trapping, Escape close, and focus return to Share show. Toasts sit above the transport at bottom-center on desktop and above the safe-area inset on mobile without covering timeline controls.
   Motion: Update the hash with history.replaceState, copy through the Clipboard API when available, and provide a selection-based local fallback. Dialogs fade with 4px vertical movement over 140ms; reduced-motion mode makes them immediate. Preserve the shared show when reloading and never clear a valid hash during ordinary playback.

## Assets
- icon: Use locally bundled lucide-react icons for Play, Pause, RotateCcw, Volume2, VolumeX, Repeat2, Share2, Plus, Copy, Trash2, X, Check, MousePointer2, and Undo2. Draw the original four-ray brand spark and shell-type miniatures as inline SVG/Canvas geometry. Do not import third-party logos or unique icon artwork.
- font: Self-host Sora weights 500, 600, and 700 through @fontsource/sora (OFL-1.1); import only the required woff2 subsets through the package and record package path, source URL, author, and license in ASSETS.md.
- font: Self-host Inter weights 400, 500, and 600 through @fontsource/inter (OFL-1.1); import only the required woff2 subsets through the package and record package path, source URL, author, and license in ASSETS.md.
- font: Self-host IBM Plex Mono weights 400 and 500 through @fontsource/ibm-plex-mono (OFL-1.1); import only the required woff2 subsets through the package and record package path, source URL, author, and license in ASSETS.md.
- image: No image files are used. Generate the skyline, water, particles, reflections, shell thumbnails, and brand spark in code. Create ASSETS.md noting that there are no external image, video, or recorded-audio assets, and list the font and icon package credits.

## Don'ts
- Do not add a backend, accounts, database, API routes, remote forms, analytics, third-party APIs, or a sharing service; all editing, audio, persistence in the URL, and preview behavior must work as static client-side files.
- Do not use CDN scripts, CDN styles, Google Fonts URLs, hotlinked assets, placeholder-image services, external audio, or remote fonts. Bundle dependencies locally, self-host Fontsource fonts, and use relative asset paths with Vite base './'.
- Do not use stock or generated photographs, recorded fireworks, music, video, third-party illustrations, or recognizable logos. All scene visuals must be original code-drawn geometry and all sound must be synthesized locally with Web Audio.
- Do not depict real city names, identifiable landmarks, commercial fireworks brands, packaging, slogans, real people's likenesses, anime or game characters, mascots, or signature illustrations. Keep [CITY_NAME] fictional.
- Do not copy reference or restricted-library source, add commercial fonts, or add a physics, animation, audio, or state library; use only the declared stack and hand-written Canvas 2D simulation and Web Audio synthesis.
- Do not hard-code copy, filenames, shell schedules, timecodes, or helper text that becomes wrong when variables change. Keep copy and starter content in src/content.ts and scale starter timing and labels to [SHOW_DURATION].
- Do not create marketing sections, metadata beyond a plain title and favicon, Open Graph tags, JSON-LD, sitemap code, or extra routes. The only page is index.html; #show= is show data, not a router.
- Do not autoplay audible sound or create AudioContext before a user gesture. Do not throw when audio, clipboard, or hash decoding is unavailable; retain the visual editor and provide the specified accessible fallback.
- Do not allow unbounded particles, device pixel ratio, event counts, or malformed hash values. Enforce the stated caps and validation, keep dist/ below 20 MB, emit no source maps, and do not copy src/ into dist/.
- Do not ship a desktop-only editor, icon-only unlabeled controls, color-only shell labels, keyboard traps, horizontal page overflow, or canvas-only positioning. Support 1440×900 and 390×844, 44px touch targets, keyboard event editing, visible focus, and reduced motion with zero console errors.
- Do not mention VibeFather in the rendered site except through the optional [CREDIT] link, and do not use VibeFather or any real brand as a variable default.

---
— Prompt by VibeFather · https://vibefather.ai/t/fireworks-show-maker · 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.