How 'The Tempest - Mariner's Repertory Five-Act Staging' Renders Signature Technique With Zero Image Assets

AIThis post was created with the assistance of artificial intelligence (AI).

The Tempest - Mariner's Repertory Five-Act Staging — Code-Driven Stagecraft — Room 29 of 175: “The Tempest – Mariner’s Repertory Five-Act Staging” — visit the live site.

Imagine a web experience that transforms your browser into an immersive theatrical stage, where each scroll reveals a different act of a timeless drama. This design, crafted entirely through code, uses the browser itself as a stage, complete with a layered curtain, dynamic lighting, and atmospheric effects—all without relying on external images. Conceived by an AI-driven process, it showcases how digital storytelling can evoke the grandeur of live theatre purely through technical ingenuity, making the browser a living set that reacts and adapts to the unfolding narrative.

Before you orderOffer from Amazon

Get art and craft supplies delivered free with Prime

Fast, free delivery on millions of items
Prime Video, Amazon Music and more included
Member-only deals all year

Start your free Prime trial Free trial for eligible customers · Cancel anytime

As an affiliate, we earn on qualifying purchases.

The site’s palette is carefully chosen to evoke the mood of a classic theatre, with deep blacks, crimson velvet, and warm golden accents. Typography plays a crucial role, combining self-hosted serif fonts for headlines and a spectral typeface for body text, creating a theatrical hierarchy. The signature interaction hinges on code-driven lighting and stagecraft; animated SVG curtains ripple and sway, CSS gradients shape the proscenium and stage, and lighting effects are manipulated dynamically via CSS classes. The storm sequence is animated through a canvas element that paints rain and lightning, while subtle rigging movements are simulated by adjusting CSS variables based on user interaction, making the entire scene feel alive and responsive. This approach exemplifies how meticulous CSS and SVG craftsmanship can craft a rich, theatrical environment entirely through code, with no reliance on external imagery.

Live view of The Tempest - Mariner's Repertory Five-Act Staging — The room as it renders live — open it in your browser.

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 29 of 175, “tempest”):
THE TEMPEST — a repertory theatre’s staging, presented as a five-act site. Aesthetic: proscenium stage; darkness, velvet, limelight. Palette: stage black, crimson velvet #7a1522, limelight #ffe9c4, gold braid. Fonts: dm-serif-display (playbill display), spectral (body). SIGNATURE: the page IS a stage — a layered SVG velvet curtain sways and RISES on entry; each act changes theatrical lighting (moving spotlights, gobo leaf patterns); Act III is the storm: canvas rain, lightning flashes that invert the palette for a frame, headline type that shakes and scatters like blown rigging. Playbill dramatis personae, quotes that enter like actors (staggered from the wings). Unforgettable: curtain-rise and the storm.

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/tempest/

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.

The project follows a straightforward three-pass pipeline: initial build, rigorous critique, and final art-direction certification. First, the site is constructed with careful attention to semantic HTML, self-hosted fonts, and accessibility features like focus states and reduced-motion fallbacks. Next, it undergoes a critical review to fine-tune the interactions—ensuring the lighting, curtain movement, and storm effects behave as part of the staging rather than mere decoration. Finally, the art director approves the scene compositions and timing, aligning the technical effects with the dramaturgical narrative outlined in the detailed production guide. This systematic process ensures the site remains both expressive and technically disciplined, showcasing how code can serve the theatrical imagination.

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

Experience the full staging at the live site. Dive into the details of this digital theatre and explore all 175 creative variations at the project hub. Discover how AI and code turn the browser into a stage where every scroll unfolds a new act of storytelling.

Visit the live room → · Browse all 175 rooms

Previously in Wing II

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.