Clay Themed Stopmotion

General Clay Stop-Motion Themed Video

Dieses Skill dient der Erstellung kurzer Videos mit einem konsistenten visuellen Stil und austauschbarem Thema. Es beschreibt die generische Produktionsmethode „Clay-Material + geschichtete Assets + Stop-Motion-Bewegung + Untertitel und Ton“; Stadt, Datum, Charaktere, Sehenswürdigkeiten, Fahrzeuge, Handlung und Soundeffekte müssen aus der aktuellen Benutzeranfrage gelesen werden und dürfen nicht für ein bestimmtes Projekt festgeschrieben sein.

Die endgültige Auslieferung sollte ein wiederholbares HyperFrames-Quellprojekt, echte lokale Assets, Audio, MP4-Export und einen finalen Kontaktabzug (Contact Sheet) enthalten. Eine ungerenderte HTML-Vorschau gilt nicht als fertiger Film.

Zunächst die Thema-Variablen definieren

Bevor Code geschrieben wird, aus der Benutzeranfrage extrahieren und dokumentieren:

• Themen-Satz: Wer tut was in welcher Welt, um welches Ziel zu erreichen;
• Zeit, Ort, Epoche, Sehenswürdigkeit oder Weltanschauung;
• Anzahl der Charaktere, Aussehen, Kleidung, Requisiten und Aktionen;
• Visuelle Materialien: Clay, Pappe, Stoff, Holz, Metall oder andere handwerkliche Texturen;
• Farbpalette und Sprache für Intro/Outro;
• Dauer, Seitenverhältnis, Plattform, Untertitel und Audio-Anforderungen.

Wenn der Benutzer nur ein Referenzvideo angibt, zuerst dessen Material, Kamerarhythmus, Bildkomposition, Untertitel und Ton analysieren und dann die Thema-Variablen in DESIGN.md notieren. Das Referenzvideo liefert Methode und Stimmung, nicht automatisch die Geschichte des neuen Videos.

Standard-Workflow

1. Referenz analysieren und Hypothesen notieren. Dauer, Seitenverhältnis, Kamerarhythmus, Stop-Motion-Pausen, Material, Untertitelposition, Musik und Ereignissounds dokumentieren. Nicht bestätigbare Inhalte als Hypothesen notieren, nicht als Tatsachen tarnen.
2. Zuerst das Design-Dokument schreiben. DESIGN.md, STORYBOARD.md und eine Asset-Liste erstellen. Themefarben, Material, Schriftarten, Kamerazeiten, Untertitel, Audio-Cues und Outro-Text definieren.
3. Geschichtete Assets generieren. Hintergründe, Charaktere, Requisiten, Sehenswürdigkeiten, Texturen und lokale Effekte als lokale PNG/JPG/WAV-Dateien speichern. Charaktere und Vordergrund-Requisiten bevorzugt als transparente PNGs und auf Konsistenz von Kameraposition, Licht, Proportionen und Material achten.
4. Asset-Herkunftsprüfung durchführen. Jedes Charakter-/Requisiten-PNG öffnen und alle darin bereits enthaltenen Objekte (Rucksäcke, Tassen, Karten, Hüte, Schatten usw.) auflisten. Jedes sichtbare Objekt darf nur eine Quelle haben: Charakter-PNG, eigenständige Asset-Ebene oder HTML/CSS. Für ein bereits im Charakter-PNG enthaltenes Objekt darf keine vereinfachte CSS-Version hinzugefügt werden. Siehe references/compositing-audit.md.
5. Zuerst das Standbild fertigstellen. Root-Einstiegspunkt ist index.html; für Hochformat eine eigene Komposition in compositions/ ablegen. Zuerst jede Szene im Standbild-Zustand stimmig machen, dann Bewegung hinzufügen.
6. Deterministische Stop-Motion-Bewegung hinzufügen. GSAP-Pausen-Timelines, Szenen-Start-/Endzeiten und eine begrenzte Anzahl von steps(n) verwenden. Leichte Verschiebungen, Skalierung, Rotation, Wackeln und Pausen für den handgemachten Stop-Motion-Look nutzen. Math.random(), Date.now(), repeat: -1 und sich gegenseitig überschreibende CSS/GSAP-Transform-Angaben sind verboten.
7. Untertitel und Outro hinzufügen. Untertitel sind HTML-Ebenen, die auf verschiedenen Seitenverhältnissen lesbar bleiben. Das Outto enthält nur den vom Benutzer gewünschten offiziellen Text; preview, draft, test, Codex oder interne Prompts sind verboten.
8. Geschichteten Sound hinzufügen. Musik und Ereignissounds separat als lokale Audiodateien einbinden. Jedes <audio>-Element mit data-start, data-duration, data-track-index, data-volume sowie Fade-in/Fade-out versehen; bei nicht bei 0 beginnenden Cues in einer Hochformat-Komposition zusätzlich data-hf-media-start-basis="local" setzen. Platzhalter-Audio darf nur für Entwürfe verwendet werden, nicht in der endgültigen Timeline. Verwende kein weißes Rauschen als Ersatz für Umgebungsgeräusche wie Meeresrauschen, Wind, Feuer usw.; wenn kein passendes Material vorhanden ist, frei lassen oder die Audiodichte reduzieren. Vor der Auslieferung jede Tonspur und den Mix gemäß references/audio-layout.md separat prüfen.
9. Für die Plattform neu komponieren. Hochformat darf nicht nur aus einem Zuschnitt des Querformats bestehen. data-width="1080" data-height="1920" setzen, das Hauptmotiv, wichtige Sehenswürdigkeiten und Untertitel beibehalten, Text im zentralen Sicherheitsbereich platzieren und Charaktere/Requisiten neu positionieren. Siehe references/vertical-export.md.
10. Rendern, Kontaktabzug und Überprüfung. lint, validate, Rendering, ffprobe und Contact Sheet ausführen. Seitenverhältnis, Dauer, Untertitel, Asset-Hierarchie, doppelte Objekte, driftende Blöcke, interne Endmarkierungen, H.264-Video und AAC-Audio prüfen; die ersten 0–5 Sekunden, Hauptübergänge und das Ende jeder Tonspur und des finalen Mixes tatsächlich anhören. ffprobe und Pegelprüfung ersetzen keine Hörempfindungsprüfung. Siehe references/workflow.md und references/audio-layout.md.

Allgemeine Projektkonventionen

• Ein einziges root-index.html beibehalten; alternative Seitenverhältnisse in compositions/ ablegen, damit HyperFrames nicht mehrere Root-Einstiegspunkte findet.
• Echte Sehenswürdigkeiten oder Hauptmotive mit echten Raster-Assets umsetzen; CSS-Geometrie nur für temporäre Layouts, nicht als endgültige visuelle Assets.
• Der Themeninhalt wird durch die Benutzeranfrage bestimmt; im Skill dürfen keine Stadt, Route, Daten, Berufe oder feste Charaktere voreingestellt sein.
• Jede Requisite in der Asset-Liste entweder als „im PNG eingebettet“ oder „eigenständige Ebene“ kennzeichnen. Wenn eine Requisite eingebettet ist, keine semantisch gleiche CSS-Ebene mehr zeichnen.
• Bei Umgebungsrequisiten eindeutige IDs und Kommentare verwenden (z. B. Drehkreuz, Ofen, Tür, Zug, Regen), um zu vermeiden, dass Umgebungsobjekte wie am Charakter klebende Markierungen aussehen.
• Keine echten Firmenlogos, persönlichen Daten oder nicht lizenzierte Musik verwenden; allgemeine Schilder, generierte Texturen und lokale deterministische Audios sind bevorzugt.

Validierungsbefehle

npm install
npx hyperframes lint
npx hyperframes lint compositions/vertical.html
npx hyperframes validate --no-contrast
npm run render
npm run render:vertical

Nach dem Hochformatexport mit dem ffprobe-static des aktuellen Projekts prüfen:

FFPROBE=$(node --input-type=module -e "import p from 'ffprobe-static'; console.log(typeof p === 'string' ? p : p.path)")
python3 scripts/check_render.py outputs/final-vertical.mp4 \
  --ffprobe "$FFPROBE" --width 1080 --height 1920 --max-duration 60

Der endgültige Kontaktabzug muss mindestens Intro, Hauptaktion, Übergänge, Höhepunkt/Ergebnis und Outro enthalten. Gerendert zu sein bedeutet nicht visuell korrekt: Sobald unerklärliche weiße, braune, blaue oder graue Blöcke, doppelte Sehenswürdigkeiten, doppelte Requisiten, driftende Objekte oder interne Vorschaubegriffe auftauchen, muss zurück zur Asset-Herkunftsprüfung und erneut verarbeitet werden.

Referenzdokumente

• references/workflow.md: Allgemeine Anfrage, Asset-Liste, Szenenstruktur und Abnahmekriterien.
• references/compositing-audit.md: Prüfung auf eingebettete Requisiten, doppelte Ebenen und visuelle Artefakte.
• references/vertical-export.md: 9:16-Sicherheitsbereich und Neu-Kompositionsregeln.
• references/audio-layout.md: Allgemeines Musik-/Soundeffekt-Layout und Lautstärkeprüfung.