Clapper: Deterministische Videoproduktion mit React und TypeScript

LinkTool

Clapper ist ein Framework zur programmatischen Videoerstellung, bei dem jeder Frame und die dazugehörige Musik rein deklarativ über Code definiert werden. Durch den Verzicht auf Echtzeituhr und Zufallselemente sind Renderings auf Byte-Ebene reproduzierbar.

Das Wichtigste

  1. Frames als reine Funktionen: Szenen nutzen useFrame() anstelle einer Systemuhr, wodurch das Scrubben in jede Richtung und wahlfreier Zugriff auf Frames möglich sind.
  2. Pipeline-Architektur: Vite baut das Projekt, Playwright erfasst Frames in Headless-Chromium als JPEG (Qualitätsstufe 96) und FFmpeg setzt Video und Audio zusammen.
  3. Musik als Code: Der Soundtrack wird als TypeScript-Partitur mit Tempo-Map, Instrumenten und CC0-Presets definiert und offline auf -18 LUFS gemastert.
  4. Integrierte Qualitätssicherung: Automatisches Linting prüft Leer-Frames nach Schnitten, Textkollisionen, unerlaubte Timer und Lautstärkesprünge.
  5. Optimierte Rendering-Performance: Der Wechsel von PNG- auf JPEG-Screenshots senkte die Bildaufnahmezeit von rund 250 ms auf 40 ms pro Frame.

Warum das relevant ist

Programmatische Videoerstellung scheitert in der Praxis oft an Nicht-Determinismus und Rendering-Latenzen. Clapper löst diese Probleme durch feste Render-Regeln, deterministische Seeds und integrierte Linting-Routinen, was automatisierte Video-Pipelines für Entwickler und KI-Subagents deutlich zuverlässiger macht.

Einordnung

Clapper verfolgt ein klares Prinzip: deterministische Generierung von Video und Audio aus Quellcode. Indem die Zeitebene vollständig der Szenenplanung und der Frame-Nummer untergeordnet wird, vermeidet das System Timing-Probleme herkömmlicher Web-Animationen. Neben der visuellen Ebene sticht die vollständige Synthese der Hintergrundmusik über TypeScript hervor, wodurch Schnitte und Bildwechsel exakt an Notenwerte gekoppelt werden können. Ein stringenter Studio-Workflow mit Review-Tools (Motion-Strips, Spektrogramme, Kontaktbögen) ermöglicht zudem strukturierte Feedbackschleifen für menschliche Reviewer oder LLM-Agents.

Gefunden in

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • X-Post:Kun Chen

    Clapper: Coding-Agent-Skill zur Generierung von Präsentationsvideos mit React

    Kun Chen empfiehlt ein von Calvin Grunewald entwickeltes Open-Source-Tool namens Clapper. Die Skill ermöglicht es Coding-Agenten, animierte Präsentationsvideos durch Generierung von React-Code zu erstellen, inklusive Musikkomposition und gesprochener Narration.

    235Lesezeichen19.668Aufrufe

    KI & AI· Tool

  • Repository:calesthio/OpenMontage

    OpenMontage: Agentenbasiertes Open-Source-System für die Videoproduktion

    OpenMontage ist ein quelloffenes Produktionssystem, das KI-Coding-Assistenten wie Cursor oder Claude in Video-Studios verwandelt. Mit 12 Pipelines, über 100 Tools und mehr als 700 Wissens- und Skill-Dateien steuert das Python-basierte Framework die Erstellung von Videos über Text-to-Speech-, Bild- und Videomodelle sowie Rendering-Engines.

    56.204SternePython

    KI & AI· Tool

  • Repository:webprodigies-org/flute

    Flute: Filmische 3D-Szenen aus echten React-Komponenten

    Flute ist ein Open-Source-Renderer von Web Prodigies, der produktive React-UIs in dreidimensionale, filmische Szenen mit Tiefenschärfe, Kamerabewegung und MP4-Export verwandelt. Das Werkzeug ist darauf ausgelegt, dass Coding-Agenten die Regie für Animationen und Kamerafahrten übernehmen.

    139SterneTypeScript

    Webentwicklung· Tool

  • Repository:RoXsaita/capcut-editor-cli

    capcutctl: Transaktionale CLI zur Bearbeitung nativer CapCut-Projekte

    capcutctl ist ein quelloffenes Befehlszeilenwerkzeug für macOS, mit dem native CapCut-Desktop-Projekte automatisiert bearbeitet werden können, ohne die Timeline zu einem fertigen Video zu rendern. Schnitte, Layouts und Audio-Effekte bleiben dabei in CapCut vollständig editierbar.

    8SterneJavaScript

    KI & AI· Tool

  • Repository:browser-use/video-use

    video-use: Automatisierter Videoschnitt mit Coding-Agents

    Das Open-Source-Projekt video-use ermöglicht die Videobearbeitung über Coding-Agents wie Claude Code, Codex oder Hermes direkt im Terminal. Rohmaterial wird in einem Ordner abgelegt und vom Agenten per Prompt analysiert, bereinigt, mit Untertiteln versehen und gerendert.

    23.834SternePython

    KI & AI· Tool

  • Repository:disler/super-simple-software-factory

    Super Simple Software Factory: Deterministiche Python-Workflows für Coding-Agents

    Das Open-Source-Projekt 'Super Simple Software Factory' bietet ein Framework für reproduzierbare Software-Entwicklungsworkflows mit KI. Statt die gesamte Steuerung einem Agenten zu überlassen, kontrolliert deterministischer Python-Code den Ablauf, Wiederholungen und Akzeptanzkriterien, während Coding-Agents isolierte Aufgaben innerhalb definierter Phasen übernehmen.

    796SternePython

    KI & AI· Tool

Lassen Sie uns über Ihr Projekt sprechen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.