# One-Shot Prompt

**Theme**: Deep-sea bioluminescent research station
**Generated**: 2026-04-05

## Prompt

Write a complete, single-file HTML website for "Sublevel 7" — a deep-sea bioluminescent research station located 4,200 metres below the surface of the North Pacific. The site is the station's public-facing portal, equal parts scientific outpost and atmospheric brand experience.

All HTML, CSS, and JavaScript must live in one `index.html` file. No external images. No frameworks. No CDN dependencies except an optional Google Fonts import. The file must work as a static drop-in on Vercel, CodePen, or Cloudflare Pages.

### Brand

- **Name**: Sublevel 7
- **Tagline**: Research below the thermocline
- **Palette**: Midnight ink (#080c18), Deep ocean (#0d1b2a), Bioluminescent cyan (#00e5ff), Warm amber (#ff9f1c), Soft seafoam (#b2ebf2), Off-white (#e8f4f8)
- **Typography**: Mix a serif display face (e.g. "Playfair Display") for headings with a clean sans-serif (system or "Inter") for body. Tight letter-spacing on large display type. `font-display: swap`.

### Sections (minimum 6)

1. **Hero** — Full-viewport. Large centered "SUBLEVEL 7" in serif display type. Below it, "Research below the thermocline" in small caps sans. A live depth counter animates from 0 m to 4,200 m on load. Background: a full-viewport `<canvas>` with softly drifting bioluminescent particles (circles with radial-gradient glow in cyan, amber, and pale green, random sizes 2-8px, slow drift, slight pulse). Subtle CSS grain overlay via a pseudo-element.

2. **Mission** — "What happens at 4,200 metres" heading. Two-column layout (stacks on mobile) with a paragraph about extreme-depth marine biology research and an inline SVG cross-section diagram of ocean depth zones (epipelagic through hadal) rendered as stacked gradient bands with labels. Scroll-reveal via Intersection Observer.

3. **Species Index** — A grid of 4 fictional bioluminescent species cards. Each card has: a CSS-only illustration of the creature (using layered box-shadows, radial gradients, and pseudo-elements to suggest glowing organisms), the species name in italic serif, a depth range, and a one-line description. Cards scale up subtly on hover with a cyan glow border. Scroll-reveal staggered.

4. **The Lab** — Dark section with "pressure gauge" UI. Three circular SVG gauges showing animated values (Pressure: 420 atm, Temperature: 1.8 °C, Salinity: 34.9 ‰). Each gauge is a stroked SVG circle that fills on scroll. Below: a horizontal scrolling ticker / marquee of recent research log entries in monospace, styled like a teletype feed.

5. **Transmissions** — Inverted-color section (light background, dark text) as the "moment of surprise". A large pull-quote from a fictional chief scientist. Below: a timeline of station milestones rendered as a vertical line with alternating left-right cards. Each milestone scroll-reveals independently.

6. **Contact / Footer** — Station coordinates (fictional: 31°24′N 142°08′W, Depth 4,200 m). A fictional mailing address. Motto in Latin: "Lux in tenebris profundis". Small nav links. Copyright 2026 Sublevel 7 Research Group.

### Interactions

- **Custom cursor**: A small (8px) cyan dot that follows the mouse with slight lag (use `requestAnimationFrame`). Hidden on touch devices.
- **Parallax**: The hero canvas and at least one other background element move at 0.3-0.5x scroll speed relative to foreground content.
- **Hover states**: Cards lift with `transform: translateY(-4px)` and gain a soft cyan box-shadow. Nav links underline-grow from center.
- **Navigation**: Fixed top bar, transparent initially, gains a dark translucent background after scrolling past the hero. Smooth scroll to sections.

### Polish

- `prefers-reduced-motion` media query disables all animations and transitions.
- `will-change: transform` on animated elements.
- `scroll-behavior: smooth` on `html`.
- Mobile-responsive: single-column below 768px, touch-friendly tap targets.
- Target 600-1000 lines. Write every line — no truncation, no placeholder comments.

## Notes

- Canvas API for bioluminescent particle system
- SVG for depth-zone diagram and pressure gauges
- Intersection Observer for scroll-triggered reveals
- CSS `@keyframes` for marquee ticker and pulse effects
- Hosting: static file, works anywhere