Peony

Pyrotechnics studio — a live canvas fireworks engine you fire by clicking the sky + generated shell diagrams.

Live demo  ·  Build notes  ·  More templates

Use this template — copy the source into a new project:

npx degit bswxyz/peony my-app

A pyrotechnic-design studio site whose hero is a live canvas fireworks engine — shells rise, decelerate and burst into gravity-bound sparks with fading trails, and you can click the sky to launch one. Part of the Parable design showcase.

---

The concept

Peony is a fictional fireworks-design studio — hand-timed shells, music-synced shows, an obsessive safety record. You can't photograph what makes a show a show (the rise, the pause, the break), so the hero runs one instead. Voice is theatrical but precise: a crew that measures applause in the silence after the last shell and cares most about a different number — zero incidents.

Design system

• The sky is always night; the page flips. The hero canvas sits on a fixed deep-indigo→black sky regardless of theme (fireworks need dark), while the rest of the page tokens flip on :root[data-theme]: midnight #0a0a14 ↔ dusk-paper #f3eee6, with a magenta accent and a gold second accent (both graded for contrast).
• Type: Cinzel (a ceremonial Roman capital) · Inter (body) · Space Mono (shell counts, durations, technical meta).
• Signature technique: a vanilla canvas 2D particle engine — shells + radial bursts, with trails made by fading the previous frame and additive ('lighter') blending so overlaps bloom. Named ease cubic-bezier(.2,.9,.25,1) (a rising-then-hanging shell).
• Voice: theatrical, exact, a little pyromaniac-poetic.

Stack

• Plain HTML / CSS / vanilla JS. No framework, no build step, no libraries. The fireworks are a few hundred lines of canvas 2D; the shell-catalogue diagrams are generated inline SVG.

Running it locally

git clone https://github.com/bswxyz/peony
cd peony
python3 -m http.server 8000      # or: npx serve .

Structure

index.html          semantic sections; .js gate for progressive enhancement
styles.css          design tokens (both themes) in :root at the top
main.js             fireworks engine, shell diagrams, theme toggle, counters, reveals, demo form
guide/index.html    the "how it was built" write-up (self-contained, styled to match)
.nojekyll           serve files as-is on GitHub Pages

Demo vs. real — what a production version would need

An intentionally-scoped demo. This is a concept, not a licensed pyrotechnics operator — do not recreate anything here. What's mocked:

• The studio, shows, prices and stats are fictional. No real inventory, no real bookings.
• No commerce or scheduling. A real studio needs a CRM, calendar/availability, deposits and contracts, permit-tracking and insurance docs.
• The booking form has no backend. It validates and confirms in-place but stores nothing — wire it to an endpoint (Formspree / a serverless function / an email service) before real use.
• No analytics, no CMS. Copy is hand-edited HTML.

What's real and reusable as-is: the canvas fireworks engine (with its DPR cap, airborne-shell limit, IntersectionObserver pause and reduced-motion still-frames), the generated SVG shell diagrams, the full light/dark theming, and the responsive / reduced-motion / keyboard layer.

License

MIT. Design & build by Parable.