# One-Shot Prompt

**Theme**: Lumen Archive — immersive single-file website benchmark
**Generated**: 2026-04-24

## Prompt

Create an immersive single-file browser website benchmark with distinctive art direction, real interactions, responsive layout, and no external images.

Build a complete `index.html` for **Lumen Archive**, a fictional nocturnal archive where visitors can explore living light records, field notes, spectral specimens, and a kinetic atlas of remembered places. The site should feel like a commissioned digital brand experience rather than a generic landing page.

Technical requirements:

- Use one self-contained HTML file with embedded CSS and JavaScript.
- Use no external images, icon files, or remote assets. All visual material must come from CSS gradients, inline SVG, Canvas API drawing, HTML text, and procedural effects.
- Include at least five distinct sections: hero, specimen index, kinetic field wall, immersive signal chamber, visit/reserve panel, and footer.
- Add scroll-triggered reveals with Intersection Observer.
- Add parallax depth on multiple layers.
- Add a subtle custom cursor, intentional hover states, a scrolling marquee, and navigation that changes style after scrolling.
- Include one surprise interaction: a canvas “signal chamber” that changes its constellation pattern when the visitor clicks or presses keys.
- Keep typography expressive, with large display type, tight tracking, and a restrained palette of obsidian, warm ivory, electric cyan, and oxidised brass.
- Add a grain/noise overlay, smooth scrolling, accessible labels, keyboard-friendly controls, and a `prefers-reduced-motion` mode.
- Make it responsive from phone to large desktop.

Design direction:

- Brand name: **Lumen Archive**.
- Tagline: “Memory kept in light.”
- Atmosphere: cinematic, archival, nocturnal, precise, tactile.
- Avoid stock startup patterns. Use editorial composition, layered panels, fine rules, specimen cards, glowing coordinate labels, and restrained motion.
- Finish with a footer containing fictional coordinates, address, and a motto: “Lux manet.”

## Notes

- Techniques used: CSS-only grain, Intersection Observer reveals, pointer-reactive custom cursor, parallax transforms, procedural Canvas constellation animation, keyboard/click interaction, responsive CSS Grid.
- Hosting: static `index.html` at `/web/`, CodePen, Vercel, or any static host.