Inside Room 39 of 175: The Making of “Hanabi on the Kurose — Summer Fireworks Festival”

Step into a digital festival crafted by AI ingenuity

Room 39 presents “Hanabi on the Kurose,” an AI-generated, interactive homage to a traditional Japanese river festival. Its signature feat? A dynamic, physics-driven fireworks display that responds to user interactions and environmental cues, blurring the line between animation and storytelling.

Dissecting the palette, typography, and signature interaction

The site employs a carefully curated triad of visual elements: deep indigo night as the canvas backdrop, vivid vermilion cloths, and warm paper textures, all rendered through CSS layers and inline SVGs. The color scheme hinges on a strict three-tone palette—indigo, festival red, and warm beige—that ensures fireworks burst with surprise yet harmonize within the scene. Typography is handled with two distinct fonts: Shippori Mincho, which elevates the ceremonial tone with its calligraphic weight, and Zen Kaku Gothic New for navigation and labels, providing clarity amid visual complexity. The core interaction revolves around a physics simulation that orchestrates fireworks, water, and reflections, all driven by an AI-constructed script that integrates real-time particle behaviors and environmental responses. This approach keeps the scene lively and rooted in cultural authenticity, as every burst and ripple is meticulously timed to evoke inherited civic memory rather than fabricated spectacle.

From conceptual build to critique and approval

The development process unfolds in a straightforward three-stage pipeline: initially, the AI-generated design is crafted through a combination of physics modeling and style layer integration; next, it undergoes a rigorous critique phase where nuances—such as particle behavior, water interaction, and cultural details—are refined by an art guide; finally, the piece receives certification from the overseeing creative director, ensuring the scene’s emotional resonance and technical precision. This iterative journey emphasizes clarity, cultural depth, and visual coherence, guided by the AI’s capacity to simulate intricate interactions within a curated aesthetic framework.

The full build notes live in the room’s design guide.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 39 of 175, “hanabi”):
HANABI — a Japanese summer fireworks festival over a river. Aesthetic: matsuri night; lanterns, yukata silhouettes, water. Palette: night indigo #171a2e, lantern warm #ffb36b, firework spectrum (saved for the sky). Fonts: shippori-mincho (display), zen-kaku-gothic-new (body) — pairing differs from SUMI by scale/weight/color. SIGNATURE: canvas firework physics — launch trails, burst types (peony, willow, chrysanthemum, crossette), gravity-bent sparks, and a WATER REFLECTION of every burst shimmering below; click/tap anywhere to launch; the printed festival program actually schedules bursts on a timer; grand-finale button = barrage. Paper lanterns sway; crowd silhouette foreground. Unforgettable: the river doubling the sky.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/hanabi/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Explore the full experience and beyond

Visit the live AI-crafted exhibition at this dedicated page and immerse yourself in the animated festival. For those curious about the broader collection, browse all 175 rooms at the main hub, where each experience pushes the boundaries of digital storytelling through AI-generated artistry.

Visit the live room → · Browse all 175 rooms

Previously in Wing II

• Room 37: Alpenpost Studio – Procedural Alpine Travel Posters
• Room 26: KP-9 Station — Arctic Geomagnetic Observatory
• Room 38: The Blue Hour Club — Jazz Below Canal Street

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI