The cues behind the cues.

# Research sweep

Public search prompts used to calibrate the visual field:

1. `Awwwards immersive theatre opera website scroll animation cinematic`
2. `site:awwwards.com immersive cultural website WebGL typography 2025`
3. `experimental theatre website art direction scroll aperture`

Research instruction:

> Find award-level theatre and cultural websites that use narrative scrolling, spatial navigation, masks or
> stage metaphors. Preserve only source URLs and abstract learnings about pacing, hierarchy, motion and
> material. Do not retain assets, copy, branded tokens, proprietary code or recognisable composition.

# Concept direction

> Design a Spoor S Signature website for Afterlight Opera, a fictional five-act opera staged in the seconds
> after a star goes dark. The audience is theatre programmers, cultural audiences and art directors. The page
> must draw visitors through five acts and invite them to a clearly fictional premiere without collecting data.
> Propose three radically different concepts. For each, state its thesis, signature moment, scroll beats,
> technical method, largest risk and accessible fallback. Choose the boldest concept that can remain fast,
> keyboard-usable, reduced-motion complete and visually coherent at 320, 390, 768 and 1440px. Avoid generic
> cards, acid-neon darkness, WebGL for its own sake and familiar startup aesthetics.

# Identity and copy

> Give Afterlight Opera an operatic but unexpected identity. Use midnight blue-black, mercury, bruised indigo,
> ember red and distant bone. Pair at most two self-hosted type families. Write restrained English copy as stage
> cues and libretto fragments, not marketing slogans. The central line is “The star is dark. The stage is not.”
> Name five sequential acts that travel from extinction to an unresolved afterlight. Every date, venue and event
> detail must be labelled fictional. Do not use em dashes, generic calls to action, fake testimonials, urgency,
> forms or personal data.

# Image generation · Act I

> Use case: stylized-concept
> Asset type: full-bleed website stage tableau, Act I of a five-image family
> Primary request: Create an original otherworldly theatrical tableau for “Afterlight Opera”, a fictional opera staged in the seconds after a star goes dark. This is Act I, Extinction.
> Scene/backdrop: A monumental cosmic proscenium on an empty stage. An enormous extinguished star appears as a perfectly matte black disc suspended just above a wet obsidian floor. A razor-thin mercury corona survives around it; a single ember-red seam is dying at the horizon. No visible outer-space star field.
> Subject: the dark disc, its liquid-silver corona, and mineral curtain architecture
> Style/medium: museum-grade practical opera set photographed on large-format film, sculptural surrealism, refined contemporary scenic design, physically buildable materials, cinematic but not a movie poster
> Composition/framing: 3:2 landscape, locked 35mm camera at audience eye level, rigorous near-symmetry with a slight leftward tension, central subject kept clear for responsive cropping, generous shadow negative space around the disc, full-bleed image with no graphic border
> Lighting/mood: midnight blue-black, bruised indigo shadows, mercury rim light, distant bone highlights, one restrained ember-red line; solemn, quiet, sublime
> Materials/textures: heavy velvet darkness, oxidised silver, volcanic glass, dry stage dust, faint film grain, subtle floor reflection
> Family invariants: use this exact camera height, proscenium geometry, palette, grain, material realism and visual restraint for all five acts
> Constraints: no people, no faces, no text, no letters, no logo, no watermark, no audience, no UI, no typography, no decorative frame
> Avoid: acid neon, cyan-purple gradients, generic galaxy imagery, spaceship aesthetics, fantasy concept-art clutter, glossy 3D-software look, lens-flare spectacle, excessive glow, symmetrical mandala ornament

# Image generation · Act II

> Use case: stylized-concept
> Asset type: full-bleed website stage tableau, Act II of the same five-image family
> Input image: Image 1 is the visual family reference and stage-architecture reference; preserve its locked 35mm audience-eye camera, proscenium proportions, palette, material realism and restrained film grain.
> Primary request: Create Act II, “The Residual Choir”, for Afterlight Opera. Transform only the scenery inside the same theatre into an impossible silent chorus left behind after the star extinguishes.
> Scene/backdrop: Keep the same monumental cosmic proscenium and wet obsidian floor. The black stellar disc has opened into a deep bruised-indigo void. Seven tall, weightless ribbons of oxidised mercury descend in varied arcs like frozen voices, each catching a distant bone-white edge. Fine ash hangs in narrow shafts, not as a busy particle cloud.
> Subject: the seven sculptural silver ribbons arranged as a chorus around the indigo void
> Style/medium: museum-grade practical opera set photographed on large-format film, sculptural surrealism, refined contemporary scenic design, physically buildable materials, cinematic but not a movie poster
> Composition/framing: 3:2 landscape, same locked 35mm camera at audience eye level, same proscenium geometry, near-symmetry loosened by one ribbon crossing the right foreground, central void clear for responsive cropping
> Lighting/mood: midnight blue-black, bruised indigo, mercury and distant bone; almost no ember red; hushed, ritual, breath held
> Materials/textures: heavy velvet, hammered and oxidised silver foil, volcanic glass, dry stage ash, faint film grain, controlled floor reflection
> Family invariants: match Image 1’s exact camera height, stage opening, tonal density, palette, grain and physical realism
> Constraints: no people, no faces, no text, no letters, no logo, no watermark, no audience, no UI, no typography, no decorative border
> Avoid: acid neon, cyan-purple gradients, generic galaxy imagery, spaceship aesthetics, angel wings, human silhouettes, fantasy concept-art clutter, glossy 3D-software look, excessive glow, symmetrical mandala ornament

# Image generation · Act III

> Use case: stylized-concept
> Asset type: full-bleed website stage tableau, Act III of the same five-image family
> Input image: Image 1 is the visual family reference; preserve its locked 35mm audience-eye camera, exact proscenium proportions, dark mineral wings, wet obsidian floor, palette, material realism and restrained film grain.
> Primary request: Create Act III, “Gravity Forgets Its Name”, for Afterlight Opera. The scenery inside the same theatre should make weight and direction feel temporarily impossible.
> Scene/backdrop: Keep the same monumental cosmic proscenium. At centre, a large hollow sphere made of thin oxidised-mercury rings has come apart into five concentric arcs, each suspended at a different impossible angle. Hundreds of fine bone-white droplets hang motionless in one clean diagonal plane from upper left to lower right, like rain paused between gravity fields. Leave broad dark areas.
> Subject: the deconstructed silver orbital sphere and a precise diagonal sheet of suspended droplets
> Style/medium: museum-grade practical opera set photographed on large-format film, sculptural surrealism, refined contemporary scenic design, physically buildable wires and scenic materials, cinematic but not a movie poster
> Composition/framing: 3:2 landscape, same locked 35mm audience-eye camera and proscenium geometry, asymmetric diagonal tension crossing a stable central void, enough negative space for responsive cropping
> Lighting/mood: midnight blue-black, deep bruised indigo, mercury and distant bone, no obvious red; uncanny, suspended, breathless
> Materials/textures: heavy velvet, oxidised silver rings, tiny glass droplets, volcanic-glass floor, faint film grain, controlled reflections
> Family invariants: match Image 1’s camera height, stage opening, tonal density, palette, grain and practical scenic realism
> Constraints: no people, no faces, no text, no letters, no logo, no watermark, no audience, no UI, no typography, no decorative border
> Avoid: acid neon, cyan-purple gradients, generic galaxy imagery, spaceship aesthetics, atom-symbol cliché, human silhouettes, fantasy clutter, glossy 3D-software look, excessive glow, chaotic particle cloud

# Image generation · Act IV

> Use case: stylized-concept
> Asset type: full-bleed website stage tableau, Act IV of the same five-image family
> Input image: Image 1 is the visual family reference; preserve its locked 35mm audience-eye camera, exact proscenium proportions, dark mineral wings, wet obsidian floor, tonal density, material realism and restrained film grain.
> Primary request: Create Act IV, “The Ember Remembers”, for Afterlight Opera. Inside the same theatre, the dead star produces one final physical memory of heat.
> Scene/backdrop: Keep the same monumental cosmic proscenium. A low black orb sits just above the stage horizon. One vast ribbon of deep ember-red velvet rises from behind it in a slow vertical helix, with a scorched underside and only a thin bone-white rim. A few oxidised-mercury fragments hover far to the sides. The rest of the stage remains almost black.
> Subject: the single monumental red velvet helix wrapping the low dark orb, like a final operatic breath
> Style/medium: museum-grade practical opera set photographed on large-format film, sculptural surrealism, refined contemporary scenic design, physically buildable fabric and scenic materials, cinematic but not a movie poster
> Composition/framing: 3:2 landscape, same locked 35mm audience-eye camera and proscenium geometry, restrained vertical asymmetry, central subject clear for responsive cropping, generous dark negative space
> Lighting/mood: midnight blue-black and bruised indigo dominate; ember red is rich and matte, not luminous neon; thin distant-bone edge light; tragic warmth, controlled grandeur
> Materials/textures: heavy velvet with visible folds and scorched edges, oxidised silver fragments, volcanic-glass floor, dry dust, faint film grain, controlled reflection
> Family invariants: match Image 1’s camera height, stage opening, palette except for this intentional ember cue, grain and practical scenic realism
> Constraints: no people, no faces, no text, no letters, no logo, no watermark, no audience, no UI, no typography, no decorative border
> Avoid: fire flames, explosions, acid neon, glowing red sci-fi energy, cyan-purple gradients, generic galaxy imagery, spaceship aesthetics, human silhouettes, fantasy clutter, glossy 3D-software look, excessive glow, symmetrical mandala ornament

# Image generation · Act V

> Use case: stylized-concept
> Asset type: full-bleed website stage tableau, Act V finale of the same five-image family
> Input image: Image 1 is the visual family reference; preserve its locked 35mm audience-eye camera, exact proscenium proportions, dark mineral wings, wet obsidian floor, tonal density, material realism and restrained film grain.
> Primary request: Create Act V, “A Horizon Made of Bone”, the quiet finale of Afterlight Opera. Inside the same theatre, darkness resolves into a new, ambiguous afterlight without showing a normal sunrise.
> Scene/backdrop: Keep the same monumental cosmic proscenium. A vast distant-bone disc rises only halfway above a razor-straight black horizon at the rear of the stage, softly illuminating three translucent layers of gauze that arc forward like receding waves. The mineral side wings remain black. A tiny muted ember-red thread lies along one lower edge, almost gone.
> Subject: the half-risen bone-white disc, black horizon and three luminous gauze wave planes
> Style/medium: museum-grade practical opera set photographed on large-format film, sculptural surrealism, refined contemporary scenic design, physically buildable translucent fabric and scenic materials, cinematic but not a movie poster
> Composition/framing: 3:2 landscape, same locked 35mm audience-eye camera and exact proscenium geometry, calm rigorous symmetry intentionally returning after Act IV, central disc safe for responsive cropping, broad midnight negative space above
> Lighting/mood: distant bone light through gauze, mercury edges, midnight blue-black and bruised indigo shadows, a nearly extinguished ember thread; transcendent, unresolved, tender rather than triumphant
> Materials/textures: translucent silk gauze, bone porcelain light, oxidised silver hardware, volcanic-glass floor, dry dust, faint film grain, controlled reflection
> Family invariants: match Image 1’s camera height, stage opening, palette, grain and practical scenic realism; this must unmistakably belong to the same production
> Constraints: no people, no faces, no text, no letters, no logo, no watermark, no audience, no UI, no typography, no decorative border
> Avoid: ordinary sunrise, landscape, clouds, heaven imagery, acid neon, cyan-purple gradients, generic galaxy imagery, spaceship aesthetics, human silhouettes, fantasy clutter, glossy 3D-software look, excessive glow, symmetrical mandala ornament

# Implementation

> Build the chosen fixed-aperture concept in Astro with semantic HTML and CSS-first motion. Use one sticky stage
> inside a long five-act narrative. Scope a named CSS view timeline to each act, then connect the corresponding
> scene layer, shutters and SVG mechanics to those timelines. Add native cross-document View Transitions for
> same-origin routes. Do not use a custom cursor, scroll hijacking, WebGL, autoplay media, inline event handlers
> or runtime style mutation. All content must remain complete with JavaScript disabled, images blocked,
> unsupported scroll timelines and reduced motion. Recompose mobile as a 60svh portrait stage with a solid
> libretto band below it. Required routes: home, guide, prompts, privacy and branded 404.

# Review pass 1 · defects, interaction and mobile

> Inspect fresh Playwright renders at 320, 390, 768 and 1440px. Traverse every act, guide, prompts, privacy and
> 404 route. Find clipping, horizontal overflow, unreadable copy, scene flashes, wrong lazy-load states,
> sticky/header collisions, offscreen focus, undersized controls, broken anchors, console errors and reduced-
> motion defects. Treat mobile as a distinct stage composition. Fix every blocker and high-severity issue, then
> recapture the affected states. Do not add decorative complexity in this pass.

# Review pass 2 · depth and tactility

> Form one falsifiable material hypothesis: identify where the fixed aperture could feel more physically staged
> without competing with its sole signature. Build one controlled layer using only existing palette and
> lightweight CSS or SVG, compare before and after at 390 and 1440px, and keep it only if materiality,
> sectorspecificity and depth improve without harming text contrast, performance or reduced motion. Record the
> decision and evidence.

# Review pass 3 · cohesion, rhythm and reduction

> Review the complete five-act arc as one performance. Tune dwell, copy density, type scale, alternating cue
> placement, finale handoff and route-to-route identity. Remove any detail that competes with the aperture,
> repeats without meaning or drifts into dark-startup aesthetics. Verify every banned pattern, contrast pairing,
> public prompt, fictional disclosure and implementation-proof claim. End with independent 1–5 scores for
> memorability, sectorspecificity, materiality, compositional richness and curated interaction.

# Quality assurance

> Run lint, Astro check/build, the project release QA harness, axe and Lighthouse at all contracted routes and
> viewports. Prove five distinct signature states, keyboard focus, touch targets, reduced motion, no JavaScript,
> no media, strict CSP, branded 404 and zero normal-route console/request errors. Require Accessibility 100,
> Best Practices 100, SEO 100 and Performance at least 95 on mobile and desktop, with LCP at most 2.5s, CLS at
> most 0.10 and TBT at most 200ms. Repeat production Lighthouse three times and report median, minimum, maximum
> and spread. Scan for em-dash characters, inline styles, secrets, high npm vulnerabilities and diff whitespace.

# Deployment

> Verify Wrangler v4 and current Cloudflare authentication. Inspect the Pages project list. Create only the new
> project `afterlight-opera-ultra` if it does not exist, using `main` as the production branch. Build the static
> Astro output and deploy `dist` to that project. Never modify another project or pre-existing deployment. After
> production deploy, run the read-only live QA gate, repeat Lighthouse, verify CSP and asset caching, and open
> `/guide/` plus `/prompts/` directly. Record the canonical live URL and deployment identifier.