The prompt book is open to the rain cue.
The Tempest Design guide

Production bible / site 29 of 50

A Stage That Opens

The Tempest is built as a repertory house, not a promotional page. The browser becomes the room: a velvet curtain rises, the fixed header behaves like a house rail, and each act changes the quality of light. The content is written as a real production packet, with dates, cue numbers, cast notes, prop observations, and weather reports from an invented Mariner's Repertory crew.

Visual Techniques

The curtain is a layered inline SVG in index.html. Gradients make the crimson folds, feTurbulence roughens the velvet, and the curtainSway, velvetLeft, and velvetRight keyframes keep it breathing before main.js adds curtain-raised. The proscenium is code too: CSS rails, fly lines, footlights, and a raked stage floor built from gradients and transforms.

Lighting is driven by .ambient, .limelight, and .gobo in styles.css. The function updateAct() watches the five act sections and changes body[data-act], so Act II gets leaf-gobo intrigue, Act III turns cold and wet, and Act V returns to a clean front light. setActiveNav() marks the current act for keyboard and screen-reader users.

The final pass adds a cue-rope interaction. summonWhisper() in main.js listens to the rope button plus any data-cue navigation target, then reveals .stage-whisper and wakes .follow-spot. Pointer movement updates --spot-x and --spot-y, turning the existing limelight variables into a small follow-spot that feels operated from the booth.

Act III is the signature interruption. resizeRain() scales #rain-canvas for device pixel ratio, drawRain() paints capped diagonal strokes and gust sheets, and flashLightning() adds .lightning plus a branching CSS bolt. The data-scatter routine splits the headline into spans; riggingShake then jerks each letter as if the title has been caught in rope.

Palette & Type

The palette stays narrow but not timid: stage black #12090b, blackout #050405, crimson velvet #7a1522, limelight #ffe9c4, and gold braid #caa45b. Storm passages borrow cold blue-white highlights while the page keeps enough warm paper color for readable body text.

The type system uses self-hosted dm-serif-display for playbill scale and spectral for body copy, labels, and ledgers. Headlines are oversized with tight line-height and balanced wrapping. Labels use uppercase Spectral with generous tracking, like cue tape on the edge of a booth script.

  • DisplayDM Serif Display
  • BodySpectral
  • AccentGold braid

Reproduce This

Prompt an AI agent to build a static repertory-theatre site where the browser is the stage. Ask for a five-act structure, an opening curtain made from layered inline SVG, scroll-reactive theatrical lighting, visible stagecraft notes, and one code-driven storm scene using canvas rain, lightning, shaken headline type, and moving rigging.

Require self-hosted serif fonts, no external assets, semantic landmarks, focus-visible states, reduced-motion fallbacks, and screenshot iteration at 390px, 834px, and 1440px. The key creative instruction is dramaturgical: every effect must behave like part of the staging. The curtain reveals the production, the gobo marks intrigue, the storm overwhelms the page, and the finale restores ceremony.