Concept: the river finishes the firework
The central idea came from a simple visual rule: nothing in the sky is complete until it appears in the water. HANABI stages a fictional 68th annual festival at the Kurose River in Natsukawa. Its writing treats the event as inherited civic memory—complete with a named firemaker, timed movements, lantern numbers, train information, and overheard fragments. That density matters. It lets the interactive spectacle feel like part of a lived place.
The composition moves between three materials: indigo night, fibrous festival paper, and vermilion stall cloth. Oversized Shippori Mincho carries the ceremonial voice; the lighter, tightly tracked Zen Kaku Gothic New handles navigation, labels, and precise information. The page alternates spectacle and restraint so the canvas remains the emotional peak.
Visual technique
Firework physics and scheduling
main.js defines Rocket, Spark, and Ember particles. Launches accelerate into an ignition flash; sparks apply drag, gravity, lifespan, and colour-shifting cores. burst() varies velocity, angular distribution, and secondary behaviour for peony, willow, chrysanthemum, and crossette forms. Crossettes split into four late-life children; willows carry persistent gold embers.
The animation loop tick() drives both printed score and sky. Every twelve seconds it activates the next #schedule item and launches its named family. Keyboard or pointer activation triggers that exact shape. The Grand Finale dispatches a spatially composed eight-shell barrage.
The doubled sky
drawWater() clips below the 58% waterline. Every live spark gets an inverted, compressed river coordinate, then breaks into current-offset bands. Velocity widens each shimmer and opacity follows remaining life. keepWish() extends the metaphor: a manual launch briefly inscribes one of six wishes at its reflected coordinate, while the opening river vow appears between current lines.
Atmosphere without image files
Every other visual lives in styles.css: layered gradients form the bank and moving currents; varied silhouettes build a yukata-clad crowd; lanterns sway on delayed transforms. Repeated radial grain, ticket perforation, and a generated barcode add material detail. Staggered arrive, shoreRise, riverVow, and lantern animations form one ceremonial load moment. Reduced-motion mode collapses decorative animation and lowers particle counts.
Palette & type tokens
#171A2E
#FFB36B
#D95648
#F2E4CB
Display: Shippori Mincho, weights 400–700, with close tracking at monumental sizes. Body and interface: Zen Kaku Gothic New, mostly 400 and 700, with wide uppercase letterspacing for small navigational text. Sky colours are deliberately excluded from the static palette; cyan, rose, green, and gold belong only to the fireworks.
Reproduce this
Ask an AI agent for a “single-page nocturnal cultural experience with a physics-driven canvas as its narrative engine.” Specify four visually distinct particle behaviours, a reflection computed from every live particle, and content that directly controls the simulation. Require all surrounding scenery to be CSS or inline SVG, then name a strict three-colour UI palette so particle colour retains its surprise.
Build a Japanese river festival as an editorial journey through indigo night, vermilion cloth, and warm paper. Make the program operate the sky, make the water answer every burst, and write enough precise local detail that the place feels inherited rather than invented.