# One-Shot Prompt

**Theme**: Deep Sea Research Station  
**Brand**: Sublevel 7  
**Tagline**: Research below the thermocline  
**Generated**: 2026-04-21

## Prompt

Write a complete, self-contained single-file HTML website for a fictional deep-sea research station named **Sublevel 7**. The site must feel like a high-end digital brand experience for a scientific outpost operating on the abyssal plain. No external images; all visuals must be created with CSS gradients, inline SVG, and the Canvas API. Use only system or web-safe fonts (no external font requests).

### Visual Design

- **Color palette** (strictly 4 tones): background `#02040a` (midnight), text `#e0e6ed` (sea foam), accent cyan `#00d2ff` (bioluminescence), accent purple `#7b2cbf` (abyssal pressure).
- **Typography**: Use a sharp, high-contrast mix. Headings in a tight-tracking serif stack (`Georgia`, `Times New Roman`, serif). Body in a clean sans stack (`-apple-system`, `BlinkMacSystemFont`, `Segoe UI`, `Roboto`, sans-serif). Display type should be large (`clamp(3rem, 10vw, 8rem)`) with tight line-height.
- **Texture**: Add a subtle animated film-grain overlay using an inline SVG noise filter on a fixed pseudo-element with low opacity (`0.04`) and a gentle CSS opacity pulse animation.

### Sections (minimum 5)

1. **Hero**: Full viewport height. Massive centered brand name "Sublevel 7" with tagline "Research below the thermocline" beneath it. Behind the text, a full-screen `<canvas>` animation of slowly rising bioluminescent plankton particles (cyan and purple dots with radial gradients, varying sizes, gentle sine-wave drift, and pulsing opacity). The canvas must parallax-scroll at `0.3`× the page scroll speed.
2. **Mission**: White text on midnight background. Two-column layout on desktop (text left, a CSS-constructed abstract pressure-gauge graphic right using conic gradients and SVG filters). The pressure gauge needle should be an inline SVG rotated via CSS. Scroll-reveal: the text fades up and the needle rotates from `0deg` to `78deg` (simulating deep pressure) as the section enters the viewport, using an Intersection Observer trigger.
3. **Live Specimens**: A dark section with an embedded canvas showing larger, slow-moving bioluminescent "creatures" (simple organic shapes: soft glowing circles and flowing tendrils drawn with bezier curves). Colors restricted to cyan and purple. This canvas should only animate when the section is intersecting (pause when off-screen for performance).
4. **Transmission Ticker**: A full-width horizontal scrolling marquee of telemetry text in a monospaced font: fictional sensor readings (temperature, salinity, depth) in cyan on a slightly lighter dark strip (`#0a0f1e`). The marquee should loop infinitely using CSS `@keyframes`.
5. **Research Stations**: A grid of 4 station modules (Habitat, Bio-Lab, Pressure Dock, Comms Array). Each is a CSS card with a subtle gradient border effect using `background-clip: padding-box` and a `:hover` transform that lifts the card (`translateY(-8px)`) and brightens the border glow. The section title and each card should stagger-reveal via Intersection Observer.
6. **Contact / Coordinates**: Centered text block displaying fictional deep-sea coordinates, a bathymetric address, and a call-to-action line. Include a moment of surprise here: invert the entire section's colors (`filter: invert(1)`) when the user hovers over the coordinates, lasting `0.6s` transition.

### Interaction & Polish

- **Navigation**: Fixed top bar. Initially fully transparent; on scroll past `80px`, it gains a blurred midnight background (`backdrop-filter: blur(12px)`) and a bottom border glow. Links smooth-scroll to sections.
- **Cursor**: A small `12px` cyan dot (`#00d2ff`) that follows the mouse with slight inertia (lerp factor `0.15`). Hide the default cursor with `cursor: none` on the body (but respect `prefers-reduced-motion` and `hover: none` devices by restoring the default cursor and hiding the custom dot).
- **Scroll Reveals**: All content sections (except hero) must be initially `opacity: 0; transform: translateY(40px);` and transition to visible when intersecting at a threshold of `0.15`, using Intersection Observer only (no scroll event listeners).
- **Parallax**: The hero canvas must parallax relative to scroll. Implement this efficiently: update the canvas's CSS `transform: translateY(...)` inside a `requestAnimationFrame` loop driven by a stored scroll value (do not read `scrollY` inside the rAF; read it once per scroll event).
- **Smooth scroll**: `scroll-behavior: smooth` on `html`.
- **Reduced motion**: Wrap all CSS animations, marquee motion, canvas animation toggles, and the cursor effect inside `@media (prefers-reduced-motion: reduce)` guards so they are disabled or static.
- **Responsive**: Mobile layout stacks all columns. Reduce font sizes appropriately. Hide custom cursor on touch devices.
- **Footer**: Subtle details: coordinates, a motto in Latin ("In profundo veritas"), and copyright.

### Technical Constraints

- Single `.html` file only.
- No external images, no external fonts, no external CSS/JS files.
- All canvas drawing must use `requestAnimationFrame` with efficient clearing. No libraries.
- Add `will-change: transform` to the hero canvas and marquee container.
- Use `font-display: swap` even though fonts are system-based (as a best-practice declaration on `@font-face` if any are used; otherwise omit).

Write the full HTML with no omissions, placeholders, or abbreviated code. Every CSS rule and JS function must be present in the file.

## Notes

- The pressure gauge needle animation uses CSS `transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1)` triggered by an Intersection Observer adding a class.
- The bioluminescent hero canvas uses `globalCompositeOperation = 'screen'` for additive glowing overlap.
- The inverted-color surprise section uses `transition: filter 0.6s ease`.