# One-Shot Prompt

**Theme**: Deep Sea Research Station
**Brand**: Sublevel 7 — Abyssal Research Institute
**Generated**: 24 April 2026

## Prompt

Write a complete, self-contained single-file HTML website for **Sublevel 7**, a fictional deep-sea oceanographic research institute operating below the thermocline. The site must feel like a living pressure-hull experience — sections that breathe as you descend, typography that has the weight of depth, and atmosphere you can almost feel through the screen.

### Brand Identity & Voice

- **Name**: Sublevel 7 — Abyssal Research Institute
- **Tagline**: Research below the thermocline
- **Motto**: *Lux in Profundis* (Light in the Depths)
- **Voice**: Restrained, scientific, slightly ominous. Think: declassified naval reports meet nature documentary narration.
- **Current depth**: 3,200 metres

### Color Palette

- Midnight navy: `#050d1a` (background, the abyss)
- Bioluminescent cyan: `#00f5c4` (accents, active elements, links)
- Abyssal purple: `#1a0a2e` (section transitions, depth bands)
- Surface foam white: `#e8f4f0` (text, headings, UI markers)
- Sonar pulse: `hsla(170, 100%, 70%, 0.3)` (animations, overlays)

### Typography

- Display / monospace: **Space Mono** from Google Fonts — used for headings, depth readings, data labels, and specimen codes. All-caps for section titles with wide letter-spacing.
- Body: **Lato** from Google Fonts — used for body paragraphs, descriptions, and secondary text. Clean, legible, slightly condensed feel.
- Use `font-display: swap` on both.

### Technical Constraints (NON-NEGOTIABLE)

- **Single `.html` file**: All HTML, CSS, and JavaScript in one file. No external stylesheets or scripts beyond Google Fonts.
- **No external images**: Use CSS gradients, inline SVG, Canvas API, and ASCII art only.
- **No trimming**: Write every line of code. Never use placeholder comments like `// ... rest of code` or `<!-- more content here -->`. Every CSS rule, every JavaScript function, every HTML element must be written in full.
- **Static**: Must work as a static file opened directly or dropped on Vercel / CodePen.
- **Performance**: Use `Intersection Observer` (not scroll events) for reveal animations. Use `will-change: transform` on animated elements. Use `prefers-reduced-motion` to disable animations for accessibility.

### Sections (at least 6 distinct sections)

#### 1. Hero Section — "The Abyss"

- Full-viewport hero with a `<canvas>` element covering the background, layered behind all content.
- The canvas renders **80 bioluminescent particles** drifting upward on sinusoidal paths. Each particle has independent phase, velocity, and opacity. Particles cycle back to the bottom when they drift off the top edge. Colors range from cyan to faint purple.
- Over the canvas: a CSS grain/noise texture overlay using an inline SVG data URI with `feTurbulence` at low opacity (0.08).
- Centered large typography: the word **SUBLEVEL 7** in Space Mono, massive size (clamp 3rem to 10vw), letter-spacing 0.3em, color white, with a subtle text-shadow glow in cyan.
- Below the title: the tagline "Research below the thermocline" in Lato, smaller, tracked out.
- A **depth meter** fixed to the right side of the viewport: a vertical bar showing "SURFACE", "EPIPELAGIC", "MESOPELAGIC", "BATHYPELAGIC", "ABYSSAL", "HADAL" zones, with the active zone (ABYSSAL) highlighted in cyan. The current depth "3,200 m" displayed in Space Mono.
- Parallax: the canvas particles drift at full speed; the text block scrolls at 0.7× the scroll speed (CSS translate or JS transform).
- A small downwards arrow SVG element at the bottom center, animating with a gentle bob using CSS keyframe animation.

#### 2. Mission — "Descent" 

- Dark section with abyssal purple gradient background transitioning from the hero.
- Headline: "DESCENT — MISSION LOG 07" in all-caps Space Mono, tracked out, with a cyan underline.
- Two paragraphs of body text about the institute's purpose: studying abyssal ecosystems, maintaining deep-sea sensor arrays, and cataloguing new species. Lato, 1.1rem, max-width 65ch for readability.
- A CSS-drawn horizontal rule using a 1px gradient from transparent → cyan → transparent.
- A sidebar quote in larger Lato italic: "We mapped 12,000 km² of seafloor last year. We identified three new genera. We barely scratched the surface."
- All text elements reveal on scroll using Intersection Observer with a `fadeUp` class that transitions `opacity` from 0 to 1 and `transform` from `translateY(40px)` to `translateY(0)`.

#### 3. Specimen Log — Horizontal Scrolling Ticker

- A full-width horizontal scrolling ticker section with the header "SPECIMEN LOG" in Space Mono.
- The ticker scrolls right-to-left using CSS `@keyframes` animation, infinitely looping with duplicated content.
- Each card in the ticker represents a fictional deep-sea specimen, styled as a research log entry with:
  - A monospace code designation (e.g., `SPEC-047-ALPHA`)
  - A common name (e.g., "Glass Squid")
  - A depth notation (e.g., "▸ 2,400 m")
  - A short ASCII-art illustration of the creature using preformatted text in a monospace font
- Cards have dark backgrounds with a subtle cyan border, rounded corners, and padding. They use CSS `flex` layout, spaced by 3rem gaps.
- The ticker pauses on hover (`animation-play-state: paused`).

#### 4. Depth Monitor — "Live Telemetry"

- Section with dark background, simulating a live data dashboard from the research station.
- Headline: "LIVE — DEPTH MONITOR" in Space Mono.
- A grid of "sensor cards" (CSS Grid, 3 columns on desktop, 1 column on mobile):
  - **External Pressure**: "38.2 MPa" with a simple SVG bar graph drawn inline
  - **Water Temperature**: "1.8°C" with a CSS `conic-gradient` gauge showing the cold reading
  - **Sonar Status**: "ACTIVE — 7 CONTACTS" with a **CSS concentric ring animation** (a `div` with `border-radius: 50%` that scales from 0 to fully expanded and fades out, repeated, to simulate a sonar ping)
  - **Oxygen Saturation**: "4.2 mg/L" with a horizontal bar fill animation
  - **Hydrothermal Activity**: "DETECTED — VENT ALPHA" with a subtle CSS gradient pulse
  - **Current Depth**: "3,200 m" as a large numeric display
- Each card has a dark panel background, cyan borders, and monospace data labels.
- The sonar ping animation uses `@keyframes` with a div that scales from `scale(0.1)` to `scale(1)` while fading out, with two overlapping pings at staggered intervals.

#### 5. Expedition Team — "Crew Manifest"

- Section with a lighter gradient (deep blue fading to slightly brighter navy) to provide visual variety.
- Headline: "CREW MANIFEST — SUBLEVEL 7" in Space Mono.
- A grid of profile cards (CSS Grid, 2 columns on desktop, 1 on mobile):
  - Each card represents a fictional crew member with:
    - A **call sign** in monospace (e.g., "DR. ELARA VOSS")
    - A role (e.g., "Chief Oceanographer")
    - A brief description in Lato
    - A subtle CSS-drawn hexagonal avatar placeholder using `clip-path: polygon(...)` with a gradient fill
  - Cards have a subtle hover effect: border color shifts from `transparent` to cyan, with a slight `translateY(-4px)`.
- Use 4 crew members total.

#### 6. Footer — "Lux in Profundis"

- Dark section with a gradient from abyssal purple to midnight navy.
- Large centered motto: "LUX IN PROFUNDIS" in Space Mono, all caps, wide letter-spacing, cyan color.
- Below: the institute name "SUBLEVEL 7 — ABYSSAL RESEARCH INSTITUTE" in smaller Lato.
- Fictional address: "Ridge Sector 7, Abyssal Plain, Pacific Ocean"
- Coordinates: "12° 34' 56" S, 143° 21' 09" W"
- A small note: "Est. 2047 — Autonomous Station — Last Surface Contact: 6 hours ago"
- A subtle CSS water-pressure "compression" animation on the footer text: the footer letters have a very subtle `transform: scaleY(1.02)` when the section enters the viewport, simulating deep-sea pressure.

### Interactions & Polish

- **Scroll-triggered reveals**: Use `IntersectionObserver` with `threshold: 0.15`. Each section has a `.reveal` class. Elements gain a `.visible` class when intersecting. Transitions use `opacity` and `transform: translateY`.
- **Parallax on hero**: The hero text block moves at 0.6× scroll speed using JavaScript `requestAnimationFrame` updating `transform: translateY()`.
- **Canvas particles**: RequestAnimationFrame loop drawing 80 particles on the hero canvas. Particles drift upward with sinusoidal horizontal oscillation. They reset to the bottom when they leave the top.
- **Sonar ping**: Two concentric rings animate using purely CSS `@keyframes` with staggered `animation-delay`. Each ring scales from 0.1 to 1.0 while fading opacity from 0.6 to 0 over 2 seconds, looping forever.
- **CSS grain overlay**: Applied to the body element via `::after` pseudo-element, using an inline SVG `data:image/svg+xml` with `feTurbulence`. `pointer-events: none`, `position: fixed`, `inset: 0`, `opacity: 0.06`, `z-index: 9999`.
- **Smooth scroll**: `html { scroll-behavior: smooth; }`
- **Accessibility**: `@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }`
- **Responsive**: Flexbox and Grid layouts. Container max-widths with padding. Type scales down on mobile. Depth meter sidebar hides on screens narrower than 768px and moves to a horizontal bar below the hero.
- **Cursor**: A small cyan dot cursor follower via a `div` element positioned with JavaScript `mousemove`, with `pointer-events: none` and a `transition` on position for smooth trailing. Hidden on touch devices.

### Output

Write the complete `index.html` as a single file starting with `<!DOCTYPE html>` and ending with `</html>`. Target 500-800 lines. Write every line in full — never truncate, abbreviate, or use placeholder comments.

## Notes

- Canvas bioluminescent particle system with independent sinusoidal drift and phase
- CSS grain/noise texture overlay for atmosphere without external assets
- CSS sonar ping concentric ring animation for the telemetry section
- ASCII art specimen illustrations in the horizontal ticker
- Intersection Observer for all scroll reveals (no scroll event pollution)
- Parallax effect on hero via requestAnimationFrame
- Custom cursor dot trail on desktop
- Mobile-responsive with depth meter sidebar collapsing to horizontal bar
- `prefers-reduced-motion` accessibility support
- Hosting: CodePen, Vercel, or Cloudflare Pages