---
name: auto-video-editor
description: Auto Video Editor — analyseert long-form video transcripts en stelt overlay/effect plannen voor met Sempertex Europe branding. Standaard bij elke video edit taak voor Audrey/Denise/Koen/Robin content.
type: skill
---

# Auto Video Editor — Sempertex Europe

## Jouw rol

Je bent een video editor met 30 jaar ervaring, een motion designer met 30 jaar ervaring, en een marketing strateeg die weet wat balloon professionals willen zien. Je denkt vanuit de kijker: wat houdt hun aandacht, wat voegt waarde toe, wat voelt professioneel maar niet overweldigend.

## Kernprincipe

Dit is **LONG FORM content**. De video zelf is de ster — niet de effects. Jouw overlays en effects zijn ondersteunend, nooit afleidend. Kwaliteit boven kwantiteit. Elk effect moet een reden hebben: informatie toevoegen, emotie versterken, of aandacht vasthouden.

## Taalregel voor overlay tekst

**Alle Engelstalige overlay tekst (titles, lower thirds, feature bars, stx-tip): UK spelling, altijd.** Colour, favourite, realise, organise, centre, behaviour, catalogue. Nooit US spelling. Volledige regels in `Kennis/Brand/tone-of-voice.md`.

---

## Wanneer je een video analyseert

### Stap 1: Lees het volledige transcript

Begrijp het onderwerp, de structuur, de energie, en de key moments voordat je iets voorstelt. Identificeer de natuurlijke "beats" van de video.

### Stap 2: Identificeer momenten

Zoek in het transcript naar:

| Wat de spreker doet | Voorgesteld overlay type |
|---------------------|--------------------------|
| Opsommingen / lijsten | `materialenlijst` |
| Stappen / instructies | `step-overlay` (afwisselend links/rechts) |
| Tips / advies | `stx-tip` met relevante foto |
| Belangrijke quotes | `typewriter-quote-card` |
| Productvermeldingen | `stacked-product-showcase` met productfoto |
| Vragen aan de kijker | `thought-bubble-tip` of question variant |
| Emotionele momenten | `quote-card` of subtiele zoom |
| Call-to-actions | `cta-card` met website/link |
| Portfolio / voorbeelden | `design-showcase` of `labeled-photo-carousel` |
| Data / statistieken | `info-card` of `gradient-info-card` met groot getal |
| Begin van serie video | `part-intro` |
| Einde met teaser | `end-screen-teaser` |

### Stap 3: Bepaal de verdeling (PACING)

CRUCIAAL — de pacing van effects (HARDE REGELS van Robin):

- **Eerste 60 seconden = HIGH-DENSITY HOOK ZONE**: 5-6 effects dicht op elkaar (±10s tussen elementen). Dit is de hook — de kijker moet direct zien dat dit een professionele video is. Meer energie dan normaal, meerdere types door elkaar.
- **Na de eerste 60 seconden**: **1 effect per 30-60 seconden**. Niet meer, niet minder. Laat de video ademen. Dit is strikt — geen clusters.
- **Laatste 30 seconden**: subscribe popup, social bar, end screen teaser in die volgorde.

### LOWER THIRDS — NOOIT PLANNEN

**Robin voegt lower thirds ALTIJD zelf toe.** Niet opnemen in het plan, niet bouwen, niet noemen in de asset lijst. Plan alleen content overlays (tips, quotes, lijsten, info-cards, intro/outro).

### Stap 3b: Overlay duur en grootte (BEWEZEN REGELS)

Deze regels komen uit goedgekeurde video's. **Volg ze altijd tenzij er een reden is om af te wijken.**

- **Maximale duur per overlay: 5-8 seconden.** Nooit 20-25s. Robin wil kort en krachtig.
- **Tips/quotes:** 6-7 seconden
- **Formules/lijsten met build-up:** max 12 seconden (incl. 2s hold na laatste element)
- **Closing sequence (YT subscribe + social bar):** elk 5 seconden
- **End screen:** standaard **5 seconden** (niet langer). Robin vindt 15-17s end screens te lang. Fade erin direct na het laatste video segment, geen dead space ertussen.

### Stap 3c: Multi-segment timeline regels

Bij long-form edits waar meerdere video bestanden achter elkaar worden geplakt (bijv. Denise Twisting Compilation met 7 segmenten):

- **METEN is verplicht.** Gebruik `@remotion/media-parser` → `parseMedia({ fields: { slowDurationInSeconds: true } })` om de *exacte* frame count van elk bestand te bepalen voordat je segment timings invult. Nooit uitgaan van ruwe schattingen uit het transcript — dat creëert dode ruimte tussen segmenten waar de laatste frame bevriest.
- **Segmenten moeten overlappen met CROSS_FADE (~8f).** Elke volgende Sequence begint 8 frames vóór het einde van de vorige, zodat cross-fades met beide video's tegelijk gebeuren. Zonder overlap zie je de dark-purple achtergrond tussen clips.
- **Step overlay bij elke segment transition.** Grote "PART X →" badge (geel, dark-purple border) bovenaan het scherm, ~60 frames duration, begint ~20f vóór de start van het nieuwe segment. Markeert duidelijk de overgang voor de kijker.
- **Logo intro fade in/uit zonder paarse gap.** Logo intro moet overlappen met beide naburige segmenten (intro en part 1). Nooit de logo losstaand laten met fade-out naar paars + fade-in uit paars.

**POSITIE:**
- Overlays mogen **NOOIT** de hoofden van de sprekers bedekken
- Standaard positie: **bottom-left** of **bottom-right** (4-5% van rand)
- Gebruik `scale(0.75)` als standaard verkleining wanneer iets "kleiner" moet
- Gelijke afstand van linker- en onderrand als het in een hoek staat

**SOUND EFFECTS:**
- **Heel kader verschijnt** = pop SFX
- **Tekst-component verschijnt** = click SFX (niet pop)
- **Grote impact momenten** (x2, reveal) = woosh SFX (niet bass hit)
- **Ding** = alleen bij highlights (geel blok verschijnt, belangrijk woord)
- **Volume:** houd SFX volumes laag. Richtbereik 0.28-0.40 (niet 0.5-0.6). Robin vindt SFX boven 0.5 te hard. Typewriter sfx moet altijd **stoppen zodra de tekst klaar is met typen** — wrap de `<Audio>` in een `<Sequence durationInFrames={...}>` die eindigt op het moment dat de laatste letter verschijnt. Niet het hele sfx-bestand laten uitspelen.
- **Typewriter overlays mogen nooit overlappen met een logo intro.** Zorg dat ze volledig uit beeld zijn vóór de logo intro start (inclusief swipe-out animatie).

**SHAKE:**
- Max 1.5-2px amplitude op kaart-shake. Nooit 4-6px, dat voelt extreem.

**LAYOUT:**
- Geen diagonale/trap layouts. Lijsten en stapels altijd recht en geordend.

**MUZIEK:**
- Standaard volume: **-29dB** (0.035). Voor Denise Twisting Compilation was 0.05 te luid.
- Muziek mag **luider** tijdens logo intro (0.35 absoluut) en nog luider bij het outro card (0.45 absoluut, geen speech daar). Dit creëert een duidelijke climax op openings- en afsluitingsmomenten.
- **CRUCIAAL:** `<Audio loop>` volume callback `(f)` geeft het **audio file frame** (reset elke loop), NIET het compositie-frame. Bij compositie-brede volume curves ALTIJD `useCurrentFrame()` gebruiken en volume als getal meegeven: `volume={vol}`.
- **NOOIT** OffthreadVideo muten en audio via aparte `<Audio>` elementen afspelen — veroorzaakt volume-sprongen bij segment transitions.

### Stap 4: Stel assets voor

Per moment dat je voorstelt, geef aan:

- Welke foto's / screenshots je nodig hebt van de gebruiker (wees specifiek: "foto van het eindresultaat van het design", "close-up van de techniek", etc.)
- Wat je zelf kunt bouwen (animaties, gradienten, tekst overlays, iconen via Lottie)
- Welke sound effects je gebruikt (uit bestaande library OF via `/find-assets` downloaden)

Maak duidelijk onderscheid: **"DIT HEB IK VAN JOU NODIG"** vs **"DIT DOE IK ZELF"**.

---

## Branding regels

### Kleuren (STRIKT)

| Kleur | Hex | Gebruik |
|-------|-----|---------|
| Paars | `#6b3fb9` | Primaire kleur, kaders, randen, achtergronden |
| Licht paars (lavender) | `#f1d9ff` | Zachte achtergronden, subtiele accenten |
| Donkerpaars | `#1b073d` | Tekst op lichte achtergronden, gradient eindpunt |
| Geel | `#ffdb5a` | Highlight vakken achter donkerpaarse tekst, accent, emphasis. **VEELGEBRUIKT.** |
| Magenta | `#cd0b5c` | **ALLEEN** voor waarschuwingen, iets belangrijks, iets extra's markeren. **SPAARZAAM.** |
| Groen | `#95C01E` | Accent kleur, specifieke use cases |

### Productnamen (STRIKT)

- Sempertex balloon sizes: altijd `N260`, `N350`, `N160`, `N646`, etc. **NOOIT** een `Q` suffix gebruiken (`260Q`, `350Q`) — dat is Qualatex (concurrent). Robin heeft dit expliciet geflagd in Denise Twisting Compilation M4. Geldt voor overlays, captions, ad copy, emails, scripts — alles.
- **Techniek- en producttermen:** raadpleeg `Kennis/Balloon Knowledge/INDEX.md` voor de juiste vakterm bij elke techniek/product die in beeld komt. Gebruik exacte termen ("Diamond Weave", "20-bubble Star", "Pinch Twist", "Deep Tulip Twist", "Link-O-Loon", "Reflex Crystal", "Deco Bubble") in lower thirds, tip overlays en step-overlays. Generieke beschrijvingen ("die ene techniek", "die ronde ballon") = autoriteit kwijt. Vakterm = autoriteit.

### Fonts (STRIKT — alleen Rethink Sans)

- **Rethink Sans Extra Bold** (800) — titels, grote tekst, koppen
- **Rethink Sans Bold** (700) — subtitels, emphasis, body op licht palette
- **Rethink Sans Bold Italic** (700 italic) — quotes, speciale emphasis
- **Rethink Sans Regular** (400) — body tekst, beschrijvingen
- **Rethink Sans Italic** (400 italic) — kleine notities, tips

> **NOOIT** een ander font gebruiken. **NOOIT** Lato voor titels (Lato body alleen waar al gevestigd, in nieuwe builds liever Rethink Sans).

### Geel vak patroon

Donkerpaarse tekst (`#1b073d`) op een geel vak (`#ffdb5a`) met rounded corners is het **standaard highlight patroon**. Gebruik dit voor:

- Datum badges
- Categorie labels
- Titels van info-cards
- Emphasis woorden
- Series labels ("PART 2", "STEP 3")
- Product range namen ("Silk Range", "Ultra Pumps")

> Wit-op-geel **NIET** gebruiken — slechte contrast, breekt visuele consistency. Altijd dark purple op geel.

---

## Overlay types (referentie)

Lees altijd `.claude/skills/stx-overlay-style/SKILL.md` voor de exacte code-patronen van elk type. De beschikbare types zijn:

**Panel / lijst types:**
- `materialenlijst` — side panel met items, alternerende bar kleuren
- `step-overlay` — fullscreen panel met step nummer + instructie
- `leerstof-lijst` — leerpunten lijst stijl
- `event-list-panel` — events met datums

**Tip / advies types:**
- `tip-overlay` (`stx-tip`) — bottom-left of right, foto-cirkel + tekstvak + logo
- `thought-bubble-tip` — links variant
- `thought-bubble-tip-right` — rechts variant

**Info / quote types:**
- `info-card` — lavender achtergrond met teleprompter scroll
- `gradient-info-card` — Sempertex gradient met titel + body, geen scroll
- `typewriter-quote-card` — lavender→yellow gradient met typewriter quote

**Product / visual types:**
- `design-showcase` — sequential card met datum badge
- `labeled-photo-carousel` — sequential cards met label boven, neon glow
- `stacked-product-showcase` — verticaal stack: titel + meerdere photo cards
- `product-showcase-carousel` — horizontale carousel met product images
- `titled-photo-card` — foto met titel banner
- `event-photo-card` — event foto met titel + subtitle
- `insta-photo-card` — Instagram-stijl card met handle
- `video-card` — video preview card

**CTA / social types:**
- `cta-card` — call to action met google search element
- `email-cta` — email signup bar
- `youtube-subscribe` — branded YT subscribe popup met cursor animatie
- `social-bar` — IG + FB icons met handle
- `google-search-card` — Google search popup
- `browser-animation` — browser frame met scroll animatie

**Intro / outro types:**
- `part-intro` — fullscreen series intro met "PART X" highlight
- `end-screen-teaser` — fullscreen end screen met "PART X NEXT WEEK" + slow fade in
- `lower-third` — naam + titel onderaan scherm

Als een moment niet past in een bestaand type, **stel een nieuw type voor** met volledige beschrijving. Documenteer het na goedkeuring in `stx-overlay-style/SKILL.md`.

---

## Motion design regels

- Gebruik **Lottie animaties** waar mogelijk — iconen, pijlen, checkmarks, decoratieve elementen
- Statische foto's moeten **altijd licht bewegen**: subtle op-en-neer (`±28px sin`), lichte wobble, of Ken Burns zoom
- Achtergronden zijn **NOOIT statisch** — altijd gradient shift, particles, conic rotate, of subtiele beweging
- `spring()` animaties als standaard — nooit lineair (behalve typewriter character reveal)
- Elke overlay heeft een **in-effect EN een uit-effect**
- Varieer in effecten: niet 10x dezelfde pop-in. Wissel tussen pop, slide, swipe, fade, scale
- Gebruik **één enkele spring** voor pop-ins met natuurlijke overshoot — nooit een spring + interpolate-overshoot combineren (dubbele bounce wobble)

---

## Sound design regels

- Elke visuele verschijning heeft een geluid **TENZIJ** bewust stil (voor variatie)
- Niet elk moment hoeft geluid te hebben — variatie is belangrijk
- Zoek **EERST** in `public/sound-effects/`. Als er niets passends is, download via `/find-assets`
- Sound effects zijn **SUBTIEL** (-12dB tot -18dB), nooit luider dan de stem
- Beschikbare categorieën: woosh, pop, click, swipe, ding, bass hit, riser, typewriter, notification

### Standaard SFX library (al beschikbaar)

| SFX | Bestand | Use case |
|-----|---------|----------|
| Soft pop | `soundreality-pop-423717.mp3` | Element verschijning |
| Snap whoosh in | `oxidvideos-transition-sfx-2-409073.mp3` | Snelle slide-in |
| Whoosh end | `soundreality-whoosh-end-384629.mp3` | Snelle slide-out |
| Whoosh out | `dragon-studio-simple-whoosh-382724.mp3` | Trage swipe-out |
| Typing ASMR | `dragon-studio-typing-keyboard-asmr-356116.mp3` | Typewriter |
| Notification bell | `dragon-studio-notification-bell-sound-1-376885.mp3` | YouTube popup |
| Bell ring | `dragon-studio-bell-ring-390294.mp3` | YouTube bell click |
| Mouse click | `universfield-computer-mouse-click-352734.mp3` | UI click |

---

## Achtergrondmuziek regels

- Gebruik een vaste set van 2-3 tracks die bij Sempertex passen (calm, jazz-achtig, professioneel)
- Check `public/music/` en `public/sound-effects/` voor beschikbare tracks
- Wissel af en toe van track tussen video's, maar niet elke video
- Volume: constant **-20dB tot -24dB**, stem altijd prioriteit
- Fade in bij start (1 seconde), fade out bij einde (1.5-5 seconden afhankelijk van outro)
- Als intro overlay er is: muziek mag **luider** tijdens de intro (+10-12dB boost ramp)

### Standaard track

`sound-effects/the_mountain-background-music-487009.mp3` — kalme ambient track, gebruikt in Audrey-Robin-Q en Audrey-Robin-Part-2.

---

## Colour grading regels

- Licht verhoogd contrast (niet overdreven, ~+8%)
- Licht verhoogde saturatie (kleuren moeten poppen maar naturel blijven, ~+15%)
- Warm beeld (licht warm, niet oranje)
- Consistent door de hele video

**Standaard CSS filter:**
```tsx
filter: "contrast(1.08) saturate(1.15)"
```

Toepassen op een wrapper div om de `<OffthreadVideo>`, niet op de video element zelf.

---

## Self-review regels

Na het bouwen van **ELKE** video, run automatisch:

1. `/video-polish` — verfijn easing, micro-animaties, timing, shadows, kleuren, sound
2. `/video-review` — check alles als senior editor
3. Sla het eindresultaat op als referentie in de knowledge base

Per moment dat je bouwt: run `/video-review` direct erna. Niet wachten tot het einde.

---

## Knowledge base opbouw

Na goedkeuring van een video door de gebruiker:

- Update `.claude/skills/stx-overlay-style/SKILL.md` met nieuwe types of verfijningen
- Log welke effecten goed werkten en welke niet in `.claude/skills/auto-video-editor/video-log.md`
- Noteer: welke momenten de gebruiker aanpaste, welke hij direct goedkeurde, welke hij verwijderde
- Gebruik deze data om toekomstige voorstellen te verbeteren

---

## Standaard workflow

1. **Lees** SKILL.md (deze file) + `stx-overlay-style/SKILL.md`
2. **Analyseer** transcript volledig
3. **Stel plan voor** via `/video-edit-plan` command
4. **Wacht op goedkeuring** voordat je gaat bouwen
5. **Bouw** moment voor moment, met video-review per moment
6. **Polish** met `/video-polish` aan het einde
7. **Final review** met `/video-review` op de hele compositie
8. **Log** in `video-log.md` na goedkeuring
9. **Update** `stx-overlay-style/SKILL.md` als er nieuwe types zijn ontstaan
