# One-Shot Prompt

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

## Prompt

Write complete HTML, CSS, and JavaScript in a single self-contained file for an immersive, cinematic website about Sublevel 7 — a fictional deep sea research station operating below the thermocline.

### Visual Design

**Color Palette:**
- Midnight navy (#050d1a) — primary background
- Bioluminescent cyan (#00f5c4) — accent, highlights, interactive elements
- Abyssal purple (#1a0a2e) — secondary depths, section transitions
- Surface foam white (#e8f4f8) — text, subtle borders
- Warning amber (#f5a623) — alerts, depth warnings

**Typography:**
- Space Mono (IBM Plex Mono fallback) — for all UI elements, headers, depth readouts, station data
- Lato — body text for descriptions and longer content
- Use tight tracking on display type, mix of monospace for technical elements

**Atmosphere:**
- The site should feel like accessing a classified underwater research terminal
- Pressure, depth, and temperature readouts throughout
- Grain/noise overlay simulating old CRT display or deep sea murk
- Subtle scanline effect

### Sections (Minimum 5)

1. **Hero Section**
   - Full viewport height
   - Large centered typography: "SUBLEVEL 7" with subtle letter-spacing animation
   - Subtitle: "Research below the thermocline"
   - Canvas animation: Slow-drifting bioluminescent particles (sine wave paths, 50-80 particles)
   - Depth meter overlay in corner: showing depth increasing as user scrolls
   - "Pressurising..." loading state animation

2. **Station Overview**
   - Horizontal scroll section or split layout
   - Stats: Pressure (108 MPa), Depth (6,500m), Temperature (1.8°C), Crew (23)
   - Animated sonar ping using CSS concentric rings
   - Parallax depth: background moves slower than content
   - Intersection Observer reveal for each stat

3. **Research Divisions**
   - Grid layout with 4 research areas:
     - Bioluminescence Lab
     - Deep Ocean Geology
     - Extremophile Biology
     - Submersible Engineering
   - Each card has hover effect with transform and cyan glow
   - On hover: subtle bioluminescent particle burst
   - Icons drawn with SVG/CSS (no external images)

4. **Specimen Log**
   - ASCII art section styled like a terminal display
   - Monospace font, green/cyan text on dark background
   - Animated typewriter effect revealing log entries
   - Three specimen entries with codenames and descriptions
   - Blinking cursor effect

5. **Crew Manifest**
   - Vertical list of crew members
   - Horizontal scrolling marquee of crew names at top
   - Each crew entry has role, clearance level, and status indicator
   - Status dots pulse like bioluminescent signals

6. **Contact/Transmission Section**
   - Form styled like a communication terminal
   - Input fields with glowing cyan borders on focus
   - "Initiate Transmission" button with press effect
   - Footer with fictional coordinates (34°N, 140°W), depth certification, motto in Latin: "In profundis veritas"

### Technical Requirements

**Canvas Animation (Bioluminescent particles):**
- 60-80 particles drifting upward
- Sine wave horizontal movement
- Varying opacity for twinkling effect
- Cyan/teal colors with slight hue variation
- Particles reset to bottom when they reach top

**Intersection Observer:**
- Use IO for all scroll-triggered reveals (not scroll events)
- Elements fade in and translate up when entering viewport
- Threshold: 0.15

**Depth Meter:**
- Fixed sidebar or corner overlay
- Updates depth reading as user scrolls (0m to 6500m)
- Smooth number transition

**Sonar Ping Animation:**
- CSS concentric rings emanating from center
- Fade out as they expand
- Repeat every 4-5 seconds

**Accessibility:**
- `prefers-reduced-motion` media query to disable animations
- Semantic HTML structure
- Focus states on interactive elements
- `will-change: transform` on animated elements
- `font-display: swap` for web fonts

**Responsive:**
- Mobile: stack sections vertically, reduce particle count
- Tablet: 2-column grid for research divisions
- Desktop: full layout as specified

### Polish Details

- Smooth scroll behavior on html
- Cursor: subtle glowing dot that follows mouse
- Hover states: intentional transforms, not just color changes
- One "surprise" moment: the specimen log section inverts to a negative display (cyan background, dark text) when fully scrolled into view
- Grain overlay: repeating SVG noise pattern at 5-8% opacity
- Footer: include fictional address ("Hadal Trench Zone"), coordinates, and certification

### Output

Single file named index.html containing all HTML, CSS, and JavaScript. No external images. All visuals via CSS, SVG, Canvas, or gradients.

## Notes

- Uses Google Fonts: Space Mono and Lato
- Canvas particle system is procedural, no image assets
- SVG sonar rings created inline with CSS animation
- ASCII art in specimen log uses preformatted text
- Grain overlay via data URI SVG noise pattern
- Mobile reduces canvas particle count to ~30 for performance