# One-Shot Prompt

**Theme**: Crest Alpha Origin, an immersive benchmark observatory for a canonical one-shot catalogue
**Generated**: 2026-04-23

## Prompt

Write complete HTML, CSS, and JavaScript in a single self-contained file for an immersive website route called **Crest Alpha Origin**. The site is the `/web/` route inside a larger benchmark catalogue deployed at `https://crest-alpha-origin.pages.dev`, so it should feel like the ceremonial front door to a serious, design-led catalogue of model demos rather than a generic landing page.

The visual direction is **editorial observatory meets control room**:
- high composure
- sharp contrast
- medium materiality
- supportive motion
- strong hierarchy
- visually ambitious rather than generic

Do not use external images. Build atmosphere with CSS gradients, layered panels, inline SVG, and Canvas only.

Use a restrained palette with no more than four dominant tones:
- near-black graphite background
- pale mineral/ivory text plane
- cold cyan signal accent
- warm copper accent

Typography should feel deliberate and authoritative without relying on external font files. Pair a stately serif stack for display headings with a condensed, technical sans stack for labels and interface text.

The site must include these sections in order:

1. **Hero**
- Full-screen first impression with layered atmosphere and a Canvas field of drifting route nodes and connecting lines
- Fixed top navigation with anchor links
- Strong headline such as “A benchmark catalogue staged like a live observatory.”
- Supporting copy explaining that the catalogue is a curated set of canonical one-shot routes
- Two CTA links: one to the route field and one to the benchmark protocol
- A compact stats row featuring values like 12 routes, single-file artifact, and no external images
- At least two parallax layers behind the copy

2. **Ticker / Route band**
- A full-width marquee listing canonical routes such as web, tree-leaves, snake, tower-defense, terminal, audio-lab, cms, dashboard, data-story, maproom, physics, and powerpoint
- The ticker should feel like a broadcast strip, not a novelty effect

3. **Route field**
- A large section showing the catalogue as a constellation, chamber map, or route matrix
- Include interactive route nodes or buttons for all 12 canonical routes
- Hovering or focusing a route should update a detail panel with route name, role, temperament, and output type
- Make the layout feel spatial and immersive rather than like ordinary cards

4. **Protocol**
- This is the surprise section
- When it becomes dominant in the viewport, the page should invert into a pale-surface mode or otherwise shift visual state dramatically
- Use this section to communicate fairness and benchmark rules:
  - isolated generation contexts
  - no retries for odd but successful outputs
  - prompt preserved beside artifact
  - deterministic route ownership
- The inversion must still preserve readability and polished motion

5. **Taste matrix**
- A section that translates the design brief into visible metrics
- Include animated bars or rails for Composure, Contrast, Materiality, Motion, and Hierarchy
- Bars should animate in when revealed
- Add a compact explanation of why the route is designed as a benchmark showroom instead of a conventional homepage

6. **Manifest / closing section**
- A closing section with a timeline or sequence describing scan, compare, inspect, and open
- Include a strong CTA linking to the catalogue root URL
- End with a footer containing fictional coordinates, a fictional address, and a short motto in a second language

Interaction and polish requirements:
- Use Intersection Observer for reveal animations
- Use requestAnimationFrame-driven scroll state only where needed for parallax or progress feedback
- Add a subtle custom cursor for fine pointers
- Include hover, focus, and active states that feel intentional
- Include a navigation bar that changes style once the user scrolls
- Include a side progress rail or depth meter that updates as the user moves through the page
- Add a subtle grain or scan texture overlay
- Keep the motion supportive rather than frantic
- Provide a complete `prefers-reduced-motion` treatment that disables nonessential animation, marquee motion, cursor motion, and parallax
- Make it responsive down to narrow mobile widths without collapsing into a bland stacked layout

Implementation notes:
- Single file only
- No frameworks required
- No external assets
- Use semantic HTML
- Use CSS custom properties for the theme system
- Use inline SVG or CSS linework where it improves the atmosphere
- Make the interface feel premium, exact, and slightly theatrical
- Avoid purple gradients, stock hero patterns, generic SaaS cards, and common AI-generated landing page tropes

The site should feel like the benchmark itself has an exhibition space: calm, severe, luminous, and alive.

## Notes

- Uses Canvas for the drifting benchmark constellation background
- Uses Intersection Observer for reveal timing and the protocol inversion state
- Designed as a static single-file route suitable for local preview or Pages hosting