leodavincs/kalem

Kalem: Jede Szene hat ihren eigenen Stift

Dieses Skill wird vom Stamm des Repos aus ausgeführt (öffne claude im Repo-Ordner). Alle Pfade beziehen sich auf den Repo-Stamm. Ein neues Video wird unter projekte/<name>/ angelegt.

Videos, die mit nur einem Motor erstellt werden, sehen sich alle ähnlich. Dieses Skill zerlegt das Video in Szenen, schaut sich an, WAS IN JEDER SZENE PASSIERT, und wählt den Motor aus, der es am besten darstellt. Der Motor ist wie ein Stift: Bleistift und Aquarell malen dasselbe Motiv unterschiedlich.

Was in der Szene ist → welcher Motor

In der Szene...	Motor	Warum
Handgezeichnete, sich selbst zeichnende Linien, Skizzen, Stiftbewegungen	Paper.js	Der Motor, der Linien am weichsten und natürlichsten zeichnet. Nur für Stiftarbeit.
Charakter, Gehen, Handheben, Formübergänge	Eigenes Canvas (eigener Zeichencode)	Volle Kontrolle über Bewegung und Form.
Explosion, Licht, Glanz, Staub, tausende kleine Partikel	PixiJS	Spielt tausende Partikel ruckelfrei ab.
Text auf dem Bildschirm, Zahlen, Zähler, Infokarten, Nachrichtenlayout	HyperFrames (HTML + GSAP)	Am saubersten für Text- und Informationsanimation.
Echtes 3D: Kamera schwenkt, Licht, Schatten, Maschine	Three.js	Echtes 3D im Browser.
Formeln, Grafiken, Diagramme, Mathematik	Manim (Python)	Das Werkzeug von 3Blue1Brown. Schreibe ohne LaTeX mit Text.

Helfer zeichnen keine Szenen, sondern unterstützen innerhalb eines Motors:

Aufgabe	Helfer
Leichte Dinge fallen, kippen, hüpfen	Matter.js
Schwere Dinge gleiten, stapeln sich	Rapier
Szenenübergänge (125 vorgefertigte Übergänge, Buchumblättern = BookFlip)	gl-transitions (gemeinsam/uebergang.html)
Etwas kommt federnd auf den Bildschirm	Anime.js
Konfetti, Sterne, Emoji-Regen	tsParticles
3D-Modell verkleinern	glTF-Transform
Rahmensynchroner Effektsound (Klick, Rascheln, Schlag)	Tone.js (sound/sound.html)

Diese Tabelle basiert auf dem Geschmack einer Person: 20 Werkzeuge wurden mit derselben Szene getestet, bewertet und bepunktet. Führe deine eigenen Tests durch und passe die Tabelle nach deinem Geschmack an.

Ablauf

1. In Szenen aufteilen. Zerlege das vom Benutzer beschriebene Video in 4–8 Szenen. Schreibe für jede Szene einen informellen Satz, wähle den Motor aus und zeige es dem Benutzer als Tabelle: "Szene 1 enthält eine sich selbst zeichnende Skizze → Muss mit Paper.js gezeichnet werden." Keine technische Abkürzung (nicht "Zahl läuft", sondern "In der Szene gibt es eine steigende Zahl"). Eine Szene = ein Motor. Enthält eine Szene mehrere Aufgaben, bestimmt die den Bildschirm dominierende Aufgabe den Motor; Nebenaufgaben werden als Helfer eingebunden.
2. Gemeinsame Dateien schreiben. <projekt>/zeit.json (fps, Größe, Anzahl Übergangsbilder, Szenenliste mit Bildanzahlen) und <projekt>/BRIEF.md (gemeinsame visuelle Sprache, Fakten, Beschreibung jeder Szene, Liefervereinbarung). Beispiel: beispiel/fliegende-maschine/ (falls vorhanden).
3. Szenen erzeugen. Papierstruktur, Farben und Schriftarten werden einmal im BRIEF definiert; jede Szene verwendet dieselben – das sorgt dafür, dass das Video wie aus einem Guss wirkt. Jede Szene in ihrem eigenen Ordner: <projekt>/szenen/<NN-motor>/ → ausfuehren.sh, video.mp4, kontrolle.png, ereignisse.json. Szenen sind unabhängig voneinander und können parallel erzeugt werden (eigener Agent pro Szene).
4. Kontrolle. Überprüfe das kontrolle.png jeder Szene sowie einige Vollbilder: Läuft Text über? Gibt es leere Bilder? Sind die Farben einheitlich? Ist das erste Bild gefüllt?
5. Zusammenfügen. python3 zusammenfuehren.py <projekt> [--uebergang BookFlip] → Übergänge + Sound → <projekt>/ausgabe.mp4. Um dem Betrachter zu zeigen, welcher Motor welche Szene gezeichnet hat, füge --etikett hinzu: In zeit.json erhält jede Szene "etikett": ["Paper.js", "sich selbst zeichnende Stiftlinie"] (optional dritte Zeile für Helfer), erster Übergang erhält "uebergang_etikett". In der linken unteren Ecke jeder Szene wird eine kleine Karte in Heftpapierfarbe eingeblendet.
6. Überprüfung. Gib einem frischen Agenten nur die Kontrollbilder und das BRIEF, frage: "Würde der Zuschauer hier sagen 'Das kann nicht sein'?" Korrigiere die gefundenen Probleme, dann gib es an den Benutzer weiter.

Technische Vereinbarung

• Zeit kommt von der Bildnummer. Kein Math.random, sondern gesäter Zufall. Zwei Läufe müssen dasselbe Bild ergeben.
• Browser-Motoren: Die Seite ruft im gemeinsam/treiber.js die Funktion treiber(aufbau, bild, BILD) auf, bild(f) gibt ein gezeichnetes Canvas zurück. Aufnahme: python3 gemeinsam/einfangen.py <Seitenpfad> <Bildordner> [Breite Höhe], dann mit ffmpeg zu mp4.
• ereignisse.json: [{"bild": 12, "art": "linie|klick|schlag|fall|rascheln|glanz|fluegel|zaehler", "staerke": 0-1}]. Gleiche Bildnummer wie im Video. Der Sound wird daraus erzeugt, daher sind Sound und Bild perfekt synchron.
• Vor dem Einfangen der Browserseite prüfe das JS mit node --check; bei Syntaxfehlern lädt die Seite nie und der Fänger stoppt nach 60 Sekunden.
• Manim: Wenn unter dem Repo-Stamm .venv-manim/bin/python existiert, verwende es (MANIM_PY); wenn LaTeX fehlt, verwende Text statt MathTex.
• Kein drawtext in ffmpeg; Text wird im Motor gezeichnet.
• Türkische Zeichen (Ç Ğ Ş İ Ö Ü) vollständig; Großschreibung mit toLocaleUpperCase('tr').
• Erstes Bild gefüllt: Kein Einblenden aus Schwarz. Die letzten ~15 Bilder sind ruhig (der Übergang setzt dort auf).
• Kein plötzliches Aufblitzen / Blitz: Der Helligkeitssprung zwischen Bildern bleibt gering.
• Für vertikale Videos (Reels/Shorts): Keine bedeutungstragenden Elemente in den oberen ~250 px, unteren ~420 px und rechten ~150 px platzieren.

Installation

./install.sh installiert die Pakete der Motoren (erfordert Node 20+, Python 3, ffmpeg, Google Chrome; Manim optional: pip install manim).