# One-Shot Prompt

**Theme**: Deep sea research station
**Generated**: 2026-04-17

## Prompt

Write complete HTML, CSS, and JavaScript in a single self-contained file for an immersive, cinematic website about "Sublevel 7" — a deep sea research station at 3,400 metres below the thermocline. The site must feel like a living brand experience: sections that breathe as you scroll, typography with weight and presence, and atmosphere you can almost feel through the screen.

Brand identity:
- Name: Sublevel 7
- Tagline: Research below the thermocline
- Fictional designation: Abyssal Research Station S7 — Operated by the Meridian Oceanic Institute

Design language:
- Color palette: midnight blue (#0a0f1e), deep teal (#0d3b4a), bioluminescent cyan (#00e5ff), muted steel (#4a6075)
- Typography: Display headings in a serif with tight tracking (e.g. Playfair Display from Google Fonts), body in a clean sans (e.g. Inter or Space Grotesk)
- Atmosphere: Dark, pressurised, alien yet scientific. Think deep ocean documentary meets world-class design studio

Sections (minimum 5, scroll-triggered):
1. Hero — Full-viewport dark section with centered large typographic lockup: "SUBLEVEL 7" in massive display serif, tagline below in small caps. Background: subtle animated canvas of bioluminescent particles drifting slowly. Navigation floats above.
2. Mission — Two-column layout: left side has a faux pressure gauge (CSS-drawn circular gauge with needle), right side has mission statement text. Scroll-triggered fade-in.
3. The Deep — Feature section showcasing research specimens. Use CSS shapes and canvas-drawn bioluminescent creatures (jellyfish, anglerfish silhouettes) as decorative elements. Cards float in with staggered delays.
4. Live Feed — A section styled like a control room monitor. Fake scrolling data: depth, pressure, temperature, dissolved oxygen. Simulate a terminal readout with monospace font and a blinking cursor.
5. Expedition Log — Horizontal scrolling ticker of expedition entries (dates + brief notes), styled like a ship's log on a dark strip.
6. Team — A grid of researcher profiles. Each card has a CSS-avatar (abstract geometric shape with initials), name, role, and one-line bio. Staggered entrance animations.
7. Footer — Coordinates (fictional: 14°22'N 39°45'W), motto in Latin ("Per Ignorantiam Ad Astra"), station operational since, and a small emblem. Subtle, quiet.

Interactions:
- Custom cursor: a small glowing cyan dot that scales up slightly on interactive elements
- Navigation: fixed top bar, initially transparent, becomes a dark frosted glass bar on scroll
- Hover states: cards lift (translateY -4px), subtle glow intensifies
- Marquee ticker in Expedition Log section
- Canvas animation in hero: 40-60 bioluminescent particles drifting upward at varying speeds and opacities
- One moment of surprise: clicking the pressure gauge triggers a brief "DESCent" flash animation and the gauge needle spins

Technical constraints:
- Single HTML file, all CSS and JS embedded
- No external images — use inline SVG, CSS shapes, canvas, and emoji only
- Google Fonts loaded with font-display: swap
- Intersection Observer for scroll reveals (not scroll events)
- prefers-reduced-motion media query to disable animations
- will-change: transform on animated elements
- Mobile-responsive (flexbox/grid, no fixed px container widths)

The result should feel as though a world-class brand agency designed a deep-sea research station's public-facing site — cinematic, pressurised, and deeply atmospheric.