TTLC Videostudio

Video maken zoals wij. Je vraagt het Claude.

Claude bouwt je video als webpagina met GSAP-animaties, HyperFrames maakt er een scherpe MP4 van. In 1 pakket, met de regels waar wij elke video aan houden.

Download het pakket zip
Wat je krijgt

Alles wat wij zelf gebruiken, in 1 pakket.

23

Skills

Alle skills van HyperFrames en GSAP, plus die voor ondertitels, motion graphics en interviews.

7

Vaste regels

Onze werkwijze: met en zonder geluid te volgen, scherp beeld, grote tekst.

2

Controles

Een poort die elke render tegenhoudt zolang er iets niet klopt.

1

Installatie

Node, HyperFrames, ffmpeg en een render-Chrome. Claude zet het voor je neer.

Hoe het werkt

Van een vraag naar een MP4 in 4 stappen.

1

Je vraagt het

In gewone taal, aan Claude. Welk onderwerp, hoe lang, welk formaat.

"Maak een short van 20 seconden over..."
2

Claude bouwt

Een webpagina waarin elke scène een eigen GSAP-tijdlijn heeft.

gsap.from("h1", { y: 120 })
3

De poort keurt

Fouten, contrast, tekst uit beeld of uit zijn vak. Klopt het niet, dan stopt het hier.

✓ Door de poort
4

HyperFrames rendert

Beeldje voor beeldje, in een eigen Chrome. ffmpeg maakt er een MP4 van.

480 beeldjes → intro.mp4
Bouwsteen 1

HyperFrames: een webpagina wordt video.

Open source, gemaakt door HeyGen (Apache-2.0-licentie).
Zet de animatie stil op elk beeldje en maakt er een foto van, 30 per seconde.
Daardoor is elke video scherp, en elke keer precies hetzelfde.
<div data-composition-id="intro"
     data-duration="16">
  <h1>Je vraagt het aan Claude.</h1>
</div>
Bouwsteen 2

GSAP: de animaties.

De animatiebibliotheek achter een groot deel van de bewegende websites.
Werkt met tijdlijnen die HyperFrames naar elk moment kan spoelen.
Sinds april 2025 helemaal gratis, ook alle plugins en ook voor commercieel gebruik.
// deze pagina doet het ook zo
const tl = gsap.timeline({ paused: true });
tl.from("h2", { y: 22, opacity: 0 })
  .to(".balk", { width: "100%" });
window.__timelines["gsap"] = tl;
Wat je ermee maakt

Van een short tot een uitlegvideo.

Shorts en reels

Verticaal, met woord-voor-woord ondertitels en een statement in beeld.

Ondertitels

Onder een opname van een interview of een praatje voor de camera.

Motion graphics

Een cijfer dat optelt, een grafiek die groeit, je logo dat binnenkomt.

Kaders over een interview

Titels, citaten en cijfers die in beeld komen op het moment dat ze gezegd worden.

Uitleg en promo

Meerdere scènes, met muziek en geluid op maat.

Bestaande video opfrissen

Je oude opname krijgt een nieuwe opmaak, zonder opnieuw te filmen.

16:9
Site en YouTube
9:16
Shorts en reels
4:5
LinkedIn-feed
Onze werkwijze

De regels waar wij elke video aan houden.

1

Eerst snel iets laten zien

Eén scène, dan bijsturen. Niet eerst alles bouwen.

2

Met en zonder geluid te volgen

Wat gezegd wordt, staat ook in beeld. Geluid maakt het rijker.

3

Altijd scherp beeld

Nooit opblazen. Liever een rustige beweging dan ver inzoomen.

4

Grote, korte tekst

Past het niet, dan wordt de zin korter. Nooit de letter kleiner.

5

Niets uit beeld of uit zijn vak

En niets belangrijks in de hoeken, daar snijden kanalen af.

6

Echt beeld boven schema's

Mensen en foto's werken beter dan lijntjes en netwerkjes.

7

Niets verzinnen

Elk cijfer en citaat komt uit de bron. Een voorbeeld staat er zichtbaar als voorbeeld.

De poort

Wat niet klopt, wordt niet gerenderd.

Een regel die je alleen kunt lezen, houdt niets tegen. Daarom controleert de poort elke video voordat hij gemaakt wordt: fouten, contrast, tekst uit beeld, tekst tegen de rand van zijn vak en korte staartjes op de laatste regel.

Hij hield onze eigen introvideo ook tegen. Een titel stond 0 pixels van de rand. Opgelost, opnieuw gekeurd, toen pas gerenderd.

▸ Controle: compositie, layout, contrast, beeldrand
  ✓ Door de poort
  ✗ Vakcheck: 1 punt(en)

  • [rand] "Onze 3 vragen" (op 7.5s) staat
    0px van de rand van zijn vak.
    oplossing: geef het vak padding.

✗ De controle faalt. Er wordt niet gerenderd.
Installeren

In 3 stappen klaar voor je eerste video.

1

Download het pakket

Eén zip-bestand met alle skills, de regels, de poort en de installatie.

Download de zip
2

Zet het in Claude

Open de Claude desktop-app en ga naar Customize › Add plugin › Upload plugin. Kies het zip-bestand. Pak het niet uit.

3

Laat Claude de studio neerzetten

Zeg dit in een nieuw gesprek. Claude installeert Node, HyperFrames, ffmpeg en de render-Chrome. Duurt een paar minuten, zonder wachtwoord.

Zet de TTLC Videostudio op deze computer.

Werkt op een Mac en in een Linux-omgeving. Windows volgt. Werk je in Claude Code: pak de zip uit in een eigen map en start met claude --plugin-dir plus die map.

Je eerste video

Begin met 1 van deze 3 vragen.

Claude laat eerst snel een scène zien. Daarna stuur je scène voor scène bij, tot het klopt.

Maak een video van 20 seconden in 16:9 over de 3 vragen die klanten ons het vaakst stellen.
Zet ondertitels onder deze opname van ons interview.
Maak een short in 9:16 waarin het getal 472 optelt en daarna onze kernboodschap verschijnt.
Op je computer

Alles in je eigen map. Niets in je systeem.

OnderdeelWaarvoorWaar
NodeDe motor onder HyperFrames~/.ttlc/node
HyperFramesEen webpagina wordt video~/.ttlc/node
ffmpegBeeld en geluid samenvoegen~/.ttlc/node/bin
Render-ChromeMaakt de beeldjes~/.cache/hyperframes

Bijwerken: vraag Claude de studio opnieuw neer te zetten. Weghalen: vraag Claude om de TTLC Videostudio van je computer te halen, of verwijder die twee mappen zelf.

Vast bij je eerste video? App ons gewoon.

Robert van Geenhuizen kijkt mee, of het nu om de installatie gaat of om een video die nog niet goed voelt.

Download het pakket