# Video Taste: Terminal/Hacker Aesthetic

> Reference video: Clocklane promo (session-bd0bd832)
> Duration: ~30 seconds (910 frames @ 30fps)
> Aspect: 9:16 Portrait (1080x1920)

This document captures the aesthetic decisions that make this video feel polished and cohesive. Use this as a reference when creating similar terminal/developer/SaaS promo videos.

---

## 1. Visual Style

### Color Palette

| Element | Hex | Usage |
|---------|-----|-------|
| Background | `#0a0a0a` | Near-black base (not pure black) |
| Card/Container | `#141414` | Elevated surfaces |
| Grid Lines | `#1f1f1f` | Subtle structure |
| Primary Text | `#ffffff` | Headlines, key info |
| Secondary Text | `#6b7280` | Labels, metadata |
| Accent | `#ef4444` | CTAs, emphasis, brand color |
| Success | `#22c55e` | Positive states, on-target indicators |

**Key principle:** Dark mode first with a SINGLE accent color. The red stands out precisely because everything else is grayscale.

### Background Treatment

The background isn't static—it's a **living, animated grid**:

1. **Base gradient:** Radial gradient from `#151515` at center to `#0a0a0a` at edges (subtle depth)
2. **Primary grid:** 80px × 80px cells, 1px lines, slowly scrolling diagonally
3. **Secondary grid:** 160px × 160px (2x primary), creates depth through parallax
4. **Glowing dots:** Small radial gradients at grid intersections, pulsing opacity
5. **Scan line:** Horizontal light bar sweeping down the screen (3px height, red glow)
6. **Vignette:** Radial gradient darkening edges for focus

```tsx
// Key animation values
const gridOffsetX = frame * 0.5;  // Slow horizontal drift
const gridOffsetY = frame * 1.2;  // Faster vertical movement
const glowOpacity = 0.4 + Math.sin(frame * 0.08) * 0.2;  // Breathing effect
const scanLineY = (frame * 3) % 2200;  // Continuous downward sweep
```

**Why it works:** The grid creates constant subtle movement that prevents the video from feeling static, while the scan line adds a "monitoring/live" vibe perfect for dashboards and tech products.

---

## 2. Typography

### Font Choice

**JetBrains Mono** — Monospace font throughout. This is critical for the terminal aesthetic.

- Creates immediate association with code/development
- Highly legible even at larger sizes
- The uniform character width feels precise and technical

### Type Scale

| Level | Size | Weight | Usage |
|-------|------|--------|-------|
| Brand Mark | 40px | 700 | Logo/company name |
| Hero | 80px | 800 | Main headlines |
| Command | 72px | 800 | CLI-style text |
| Subheading | 48px | 500 | Supporting text |
| Feature | 36px | 500 | List items |
| Body | 32px | 500 | Descriptions |
| Label | 20px | Regular | Metadata, status |
| Caption | 18px | Regular | Technical details |

### Typography Effects

1. **Typewriter animation:** Characters reveal one by one with a blinking cursor
2. **Terminal prefix:** Lines start with `>` or `$` to simulate command line
3. **Code comments:** Use `//` for struck-through or deprecated text
4. **File paths:** `ls features/`, `├──` tree structure for lists
5. **Underscores:** Use `_` instead of spaces in key phrases (`right_now`, `realtime_`)

```tsx
// Typewriter implementation
const charsToShow = Math.floor(adjustedFrame * speed * 0.5);
const displayText = text.slice(0, Math.min(charsToShow, text.length));
const showCursor = Math.sin(frame * 0.2) > 0;  // Blinking cursor
```

---

## 3. Animation Principles

### Entrance Animations

All entrances use a **smooth lerp function** (not spring):

```tsx
const lerp = (frame, start, end, from, to) => {
  if (frame <= start) return from;
  if (frame >= end) return to;
  const t = (frame - start) / (end - start);
  const smoothT = t * t * (3 - 2 * t);  // Smoothstep easing
  return from + (to - from) * smoothT;
};
```

Standard entrance pattern:
- **Opacity:** 0 → 1 over 20-25 frames
- **TranslateY:** 30-40px → 0
- **Scale:** 0.9 → 1 (for cards/containers)

### Timing

| Element | Delay | Duration |
|---------|-------|----------|
| Primary headline | 0 frames | 25 frames |
| Typewriter text | 30+ frames | Speed-based |
| Secondary elements | 60-120 frames | 20-25 frames |
| Cards/containers | 0 frames | 20 frames |

### Signature Animations

1. **Number counter:** Dashboard percentages animate from high → low (34.8% → 27.9%)
2. **Strikethrough:** Line width animates 0% → 100% across deprecated text
3. **Pulse:** Key elements have subtle scale pulse: `1 + Math.sin(frame * 0.12) * 0.01`
4. **Staggered list:** Each item appears 25 frames after the previous

---

## 4. Sound Design

### Background Music

- **Volume:** 0.18 (very low, ambient)
- **Fade in:** First 45 frames (1.5 seconds)
- **Fade out:** Last 45 frames
- **Character:** Ambient/electronic, not distracting

### Sound Effects Library

| SFX | File | Volume | Usage |
|-----|------|--------|-------|
| Whoosh | `sfx-whoosh.mp3` | 0.35 | Scene transitions |
| Tick | `sfx-tick.mp3` | 0.21 | Typewriter emphasis, timing beats |
| Beep | `sfx-beep.mp3` | 0.18-0.28 | UI interactions, data updates |
| Pop | `sfx-pop.mp3` | 0.25 | List items appearing |
| Success | `sfx-success.mp3` | 0.21-0.28 | Positive outcomes, achievements |

### SFX Timing Principles

1. **Scene transitions:** Whoosh at the start of each new scene
2. **Typewriter beats:** Tick sounds on line completions (not every character)
3. **UI moments:** Beep when data changes or containers appear
4. **List reveals:** Pop sound staggered with visual appearance (650, 675, 700 frames)
5. **Celebrations:** Success chime when showing positive metrics or CTAs

```tsx
// SFX pattern for scene transitions
<Sequence from={170} durationInFrames={45}>
  <Audio src={staticFile("sfx-whoosh.mp3")} volume={0.28} />
</Sequence>
<Sequence from={195} durationInFrames={15}>
  <Audio src={staticFile("sfx-tick.mp3")} volume={0.18} />
</Sequence>
```

---

## 5. Voiceover

### Voice Characteristics

- **Tone:** Confident, direct, conversational
- **Pace:** Moderate, with strategic pauses for emphasis
- **Style:** Not salesy—speaks like a developer to a developer
- **Volume:** 1.0 (full, voiceover is the primary audio)

### Script Cadence

Match voiceover to visual reveals:
- Voice introduces concept → Visual illustrates it
- Strategic pause → Dramatic visual change (number counting down)
- Question asked → Brief pause → Answer appears with emphasis

### Voice Model Recommendation

For ElevenLabs:
- **Model:** Eleven Multilingual v2
- **Voice:** Professional male (e.g., "Matthew", "Daniel") or confident female
- **Stability:** 0.5-0.6 (some variation, not robotic)
- **Similarity boost:** 0.7-0.8

---

## 6. Scene Structure

### The 6-Scene Formula

| Scene | Duration | Purpose |
|-------|----------|---------|
| 1. Intro | ~5.5s (170 frames) | Brand + Hook + Tagline |
| 2. Problem | ~4.5s (140 frames) | Ask the painful question |
| 3. Solution | ~4.3s (130 frames) | Introduce the product |
| 4. Demo | ~6s (180 frames) | Show it working |
| 5. Features | ~5s (150 frames) | Quick feature list |
| 6. CTA | ~4.5s (140 frames) | Call to action |

### Scene Design Patterns

**Scene 1 - Intro:**
- Logo fades in from above
- Typewriter reveals tagline in two parts
- Secondary tagline fades in last

**Scene 2 - Problem:**
- Container scales in
- Provocative question types out with cursor
- Answer appears below with emphasis

**Scene 3 - Solution:**
- Old way shown with strikethrough animation
- Arrow points down
- New way (product command) appears bold

**Scene 4 - Demo:**
- Monitoring text types first
- Dashboard card animates in
- Key metric counts down in real-time
- Status badge fades in last

**Scene 5 - Features:**
- "ls features/" command types out
- Each feature slides in from left (staggered)
- Last feature highlighted in accent color
- Tree structure (├──, └──) for visual interest

**Scene 6 - CTA:**
- Brand mark + tagline type out
- CTA button scales in with pulse
- Supporting text fades in last

---

## 7. UI Element Patterns

### Cards/Containers

```css
background: #141414;
border: 2px solid #1f1f1f;
border-radius: 16px;
padding: 40px 60px;
```

### Status Badges

```css
padding: 12px 32px;
background: ${color}15;  /* 15% opacity of the status color */
border: 1px solid ${color}40;  /* 40% opacity border */
border-radius: 8px;
font-weight: 600;
```

### Feature List Items

```css
padding: 20px 30px;
background: #141414;
border-left: 3px solid ${isLast ? ACCENT : GRAY};
```

### Pulsing CTA Button

```tsx
const pulse = 1 + Math.sin(frame * 0.15) * 0.015;
// Apply to transform: scale()
```

---

## 8. Do's and Don'ts

### ✅ DO

- Use near-black backgrounds with subtle gradients
- Keep one accent color throughout
- Add movement to backgrounds (grid, particles, scan lines)
- Use monospace fonts for tech products
- Include typewriter animations for text reveals
- Sync sound effects to visual beats
- Show real product UI/metrics when possible
- Use terminal/code metaphors (commands, file paths, comments)
- Make the voiceover sound like a peer, not a salesperson

### ❌ DON'T

- Use pure black (#000) or pure white (#fff)
- Mix multiple accent colors
- Make backgrounds completely static
- Use decorative fonts
- Show all text at once
- Play sounds continuously or too loud
- Use generic stock footage
- Overexplain—let visuals do the work
- Sound corporate or scripted

---

## 9. Production Agent Guidelines

### For Script Writers

- Write in the user's voice (developer-to-developer)
- Start with a provocative question or pain point
- Use short, punchy sentences
- Include technical vocabulary naturally
- End with a clear, low-friction CTA
- Time: Plan for ~4-5 words per second

### For Storyboarders

- Design dark-first (light elements pop)
- Every scene needs motion (even subtle)
- Plan for 5-6 scenes for 30-second videos
- Leave breathing room—don't overstuff
- Map SFX triggers to specific visual moments

### For Animation Directors

- Use smoothstep lerp, not springs (for this aesthetic)
- Standard entrance: 20-25 frames, fade + translateY
- Sync typewriter speed to voiceover pace
- Add pulse to key metrics and CTAs
- Layer sounds: whoosh → tick → content-specific

### For Critics

- Does the grid animate smoothly?
- Is there only ONE accent color?
- Do SFX sync with visual beats (±2 frames)?
- Does the voiceover match the visuals?
- Is there enough breathing room between scenes?
- Does the CTA have energy (pulse, glow)?

---

## 10. Quick Reference: Clocklane Values

```typescript
const COLORS = {
  bg: "#0a0a0a",
  white: "#ffffff",
  red: "#ef4444",
  gray: "#6b7280",
  darkGray: "#141414",
  gridLine: "#1f1f1f",
  gridGlow: "#ef4444",
};

const TIMING = {
  entranceDuration: 25,  // frames
  typewriterSpeed: 1.8,  // multiplier
  staggerDelay: 25,      // frames between list items
  pulseCycle: 0.12,      // radians per frame
};

const SFX = {
  baseVolume: 0.35,
  musicVolume: 0.18,
  voiceVolume: 1.0,
};
```

---

*Document created: 2026-02-17*
*Source: Clocklane promo video (session-bd0bd832)*
*Author: ARIA*
