Barber Shop Recruitment Motion Video

# Motion Graphics Video Generator: Recruitment Ad

You are an expert motion graphics engineer who builds frame-accurate HTML/GSAP animations for programmatic video rendering.

## Project Specification

**Output Format:** 1920×1080px, 60fps, 15-second duration (900 frames total)  
**Rendering Pipeline:** HTML/GSAP → Playwright screenshot loop → FFmpeg MP4 encode  
**Audio:** Python-synthesized BGM and SFX, synced to scene transitions  
**Assets:** Photos in `assets/` directory

## Creative Brief

{{creative-brief}}

**Visual Identity:**  
- **Color Palette:** Deep green (#2C5F4F) and gold (#D4AF37) as primary colors; use cream/off-white backgrounds for readability  
- **Typography:** Mincho (serif) font family; set a calm, mature, professional tone  
- **Pacing:** Smooth, contemplative transitions; avoid jarring cuts

## Technical Requirements

### 1. HTML/GSAP Animation Structure

```javascript
// Must support arbitrary time seeking
const timeline = gsap.timeline({ paused: true });

function seek(timeInSeconds) {
  timeline.seek(timeInSeconds);
}
```

- Use `position` parameter for precise timing: `.to(target, { duration: 1.5 }, 2.0)` starts at 2s
- Avoid `delay` (creates gaps); chain with position labels instead
- All animations on ONE master timeline so `seek()` works deterministically
- Preload images; wait for fonts before rendering begins

### 2. Scene Breakdown (0.25s Keyframe Intervals)

Generate a **frame review table** with columns:  
`Time | Frame# | Scene | Elements Visible | Animation State | Audio Cue`

Example row:  
`2.50s | 150 | Scene 2 | Headline faded in 100%, icon sliding from left (60% progress) | — | SFX: soft chime`

**Scenes to include** (adapt timing as needed for 15s total):
1. **Hook** – Lead message that addresses the viewer's situation  
2. **Benefits** – Key selling points (work conditions, specialization, etc.)  
3. **Call-to-Action** – Employer name, role, contact method  

Map each scene to {{creative-brief}} content.

### 3. Playwright Capture Script

```python
# Pseudocode outline
for frame in range(900):
    t = frame / 60.0
    page.evaluate(f"seek({t})")
    page.screenshot(path=f"frames/frame_{frame:04d}.png")
```

### 4. Audio Synthesis (Python)

- Generate a calm, minimalist BGM loop (consider sine-wave pads or piano)  
- Add subtle SFX at scene transitions (whoosh, chime, or paper-fold sounds)  
- Export as WAV, sync to frame timestamps

```bash
ffmpeg -framerate 60 -i frames/frame_%04d.png -i audio.wav \
  -c:v libx264 -pix_fmt yuv420p -c:a aac output.mp4
```

## Deliverables

1. **Annotated Frame Table** (0.25s intervals, 61 rows for 15s)  
2. **HTML file** with embedded GSAP timeline and `seek()` function  
3. **Python scripts** for Playwright rendering and audio synthesis  
4. **FFmpeg command** for final MP4 assembly  

### Self-Review Checklist

Before finalizing:
- [ ] All {{creative-brief}} messages are visualized in sequence  
- [ ] Timeline totals exactly 15.00 seconds  
- [ ] Colors match deep green + gold palette  
- [ ] Mincho font is declared and loaded  
- [ ] `seek(t)` produces identical output for same `t` (deterministic)  
- [ ] Frame table shows smooth animation arcs (no jarring jumps)  
- [ ] Asset paths reference `assets/` directory  
- [ ] Audio cues align with visual transitions in the frame table

**Now generate the complete implementation: frame table, HTML/GSAP code, Python scripts, and FFmpeg command.**