HyperFrames-Gradle: AsciiDoc in MP4-Video umwandeln

Table des matières

Das Loch in der Video-Pipeline
HyperFrames : Der Motor
Die Architektur des Plugins
Zwei Video-Plugins, Zwei Nutzungen
Die 6 EPICs der Roadmap
Warum funktioniert es?
Schlussfolgerung : Das fehlende Glied
Referenzen

lesezeit: 8 minutes

Vor zwei Wochen habe ich gestartet`capsule-gradle`— ein Plugin, das ein Deck transformiert reveal.js in WebM-Video-Kapsel mit TTS. Heute füge ich ein neues Plugin hinzu: hyperframes-gradle. Es macht etwas, das capsule-gradle nicht tut: AsciiDoc direkt in ein MP4-Video umwandeln, ohne reveal.js zu verwenden.

Hier ist der Grund, warum dieses Plug-in existiert, wie es sich an das Bestehende anschließt, und was der HeyGen HyperFrames-Motor zur Content-Produktions-Pipeline bringt.

Das Loch in der Video-Pipeline

Meine dokumentarische Pipeline produziert zwei Arten von Videos:

Wiederholungskapsel (capsule-gradle) — ein reveal.js-Deck, das in WebM aufgezeichnet wurde, mit

narration TTS. Perfekt, um ein Modul zu wiederholen.

animierte Folien (slider-gradle) — ein interaktives reveal.js HTML Deck für

der Dozent vor Ort.

Aber es fehlt ein drittes Format: das vidéo standalone.

Use case

Aktuelle Lösung

Mangel

Folien des Trainers

slider-gradle → reveal.js

�✅

Kapsel Revision

capsule-gradle → WebM

✅

Teaser-Video

Keine

❌

animierte technische Demo

keine

❌

Dokument-zu-Video

keine

❌

Der erste Use Case ist kritisch: Wie lässt sich automatisch generieren? ein Video von 60 Sekunden, das ein Projekt oder ein Modul vorstellt, mit GSAP-Animationen, Erzählung TTS und Hintergrundmusik – alles aus derselben AsciiDoc-Datei Und die Folien?

Capsule-gradle kann nicht antworten: Es muss bereits ein reveal.js-Deck haben. slider-gradle erzeugt dieses Deck gut, aber es ist nicht für das Videorendering konzipiert. Wir brauchten eine direkte Pipeline: AsciiDoc → Video.

HyperFrames : Der Motor

Ich habe entdeckthttps://github.com/heygen-com/hyperframes[HyperFrames] il y a einige Tage. Es ist ein Open-Source-Framework (Apache 2.0), das von HeyGen erstellt wurde, Das Einhorn der KI-Video. 22.700 Sterne auf GitHub. Der Pitch passt in ein Satz:

HTML schreiben. Video rendern. Für Agenten entwickelt.

Das Prinzip: Sie schreiben HTML mit`data-*`attributes, Sie referenzieren eine GSAP-Animation (oder CSS, Lottie, Three.js…), und der Motor rendert alles als MP4 via Puppeteer (headless Chrome) + FFmpeg. Deterministisches Ergebnis: gleiche Eingabe, gleiche Frames, gleiches Video.

<div id="stage" data-composition-id="intro" data-start="0" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0"
         src="background.mp4" muted playsinline></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">
    Formation Docker & Kubernetes
  </h1>

  <audio data-start="0" data-duration="6" data-track-index="2"
         data-volume="0.3" src="music.wav"></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.intro = tl;
  </script>
</div>

Was macht HyperFrames anders als Remotion? Kein React, kein Bundler, kein JSX. Rohes HTML, das KI-Agenten nativ schreiben können. Es ist exakt für meine Pipeline zugeschnitten: planner-gradle mit deepseek kann dieses HTML aus einem SPG/SPD-Plan erzeugen, und ein Gradle-Plugin kann es in MP4 konvertieren.

Die Architektur des Plugins

hyperframes-gradle folgt dem gleichen Muster wie alle meine Plugins: der Muster « Plugin Unabhängig + Konsumenten-Wurzel »

hyperframes-gradle/
├── settings.gradle.kts          ← racine consommateur (dogfood)
├── build.gradle.kts              ← 3 lignes : apply plugin hyperframes
├── hyperframes-plugin/           ← BUILD INDÉPENDANT
│   ├── gradlew                    ← son propre wrapper
│   ├── build.gradle.kts           ← java-gradle-plugin
│   ├── src/main/kotlin/education/cccp/hyperframes/
│   │   ├── HyperframesPlugin.kt
│   │   ├── GenerateHyperframesHtmlTask.kt
│   │   ├── RenderHyperframesTask.kt
│   │   └── HyperframesExtension.kt
│   ├── .agents/                   ← gouvernance agent
│   └── doc/
│       └── HYPERFRAMES_ARCHITECTURE.adoc
└── video.yml                      ← configuration dogfood

Die Pipeline in vier Schritten

Failed to generate image: PlantUML preprocessing failed: [From <input> (line 8) ]

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontSize 11

title Pipeline hyperframes-gradle

rectangle "AsciiDoc
Quelle" as adoc #LightYellow
^^^^^
 Syntax Error? (Assumed diagram type: activity)

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontSize 11

title Pipeline hyperframes-gradle

rectangle "AsciiDoc
Quelle" as adoc #LightYellow
rectangle "AsciidoctorJ" as asciidoctorj #LightBlue
rectangle "HTML HyperFrames\n(data-* Attribute)" as html #LightGreen
rectangle "HyperFrames CLI\n(Node.js 22+)" as cli #Lavender
rectangle "video.mp4" as mp4 #Gold

adoc -right-> asciidoctorj : parse blocs customs
asciidoctorj -right-> html : génère HTML
html -right-> cli : ProcessBuilder\nnpx hyperframes render
cli -right-> mp4 : Puppeteer + FFmpeg
@enduml

AsciidoctorJ analysiert den AsciiDoc-Quellcode und extrahiert die benutzerdefinierten Blöcke

[hyperframes-composition], [hyperframes-track], [hyperframes-animation].

GenerateHyperframesHtmlTask generiert den HyperFrames-HTML mit dem

`data-*`entsprechende Attribute.

RenderHyperframesTask ruft die HyperFrames-CLI über`ProcessBuilder`:

npx hyperframes render --input index.html --output video.mp4.

MP4 wird bereitgestellt in`output/`mit einem`metadata.json`für die Orchestrierung.

Die DSL AsciiDoc

Der wirkliche Mehrwert des Plugins ist das AsciiDoc‑DSL. Der Benutzer Er schreibt niemals HTML. Er annotiert sein bestehendes AsciiDoc-Dokument :

= Formation Docker & Kubernetes
:hyperframes-width: 1920
:hyperframes-height: 1080
:hyperframes-fps: 30

[hyperframes-composition, id="intro"]
== Introduction

Le titre apparaît avec un fondu GSAP sur fond vidéo.

[hyperframes-track, index=0, start=0, duration=6]
video::assets/background.mp4[muted, playsinline]

[hyperframes-track, index=1, start=1, duration=4]
Formation Docker & Kubernetes

[hyperframes-animation, type=gsap]

const tl = gsap.timeline({ paused: true }); tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1); window.timelines = window.timelines || {}; window.__timelines.intro = tl;

Die docinfo-Attribute (:hyperframes-width:) legen die Dimensionen fest. Die benutzerdefinierten Blöcke definieren die Kompositionen und die Spuren. Der Block `[hyperframes-animation]`enthält den rohen GSAP-Code — dass der KI-Agent kann aus einer Beschreibung in natürlicher Sprache generieren.

Die Bridge Node.js

Der einzige technische Reibungspunkt: HyperFrames ist in Node.js/TypeScript, und meine Plugins sind in Kotlin/JVM. Die Lösung ist ein`ProcessBuilder`:

Note: The output preserves the exact spacing and punctuation as provided. No translation is needed for punctuation.

class RenderHyperframesTask : DefaultTask() {

    @TaskAction
    fun render() {
        val process = ProcessBuilder(
            "npx", "hyperframes", "render",
            "--input", inputHtml.absolutePath,
            "--output", outputMp4.absolutePath
        )
            .inheritIO()
            .start()

        val exitCode = process.waitFor()
        require(exitCode == 0) {
            "HyperFrames render failed with exit code $exitCode"
        }
    }
}

Keine Kopplung JVM-Code ↔ Node.js. Der Vertrag erfolgt über die Kommandozeile. und Dateien auf der Festplatte. Das ist das gleiche Muster wie`plantuml-gradle` (die die PlantUML-CLI aufruft) oder`slider-gradle`(der AsciidoctorJ aufruft) Nichts Neues unter der Sonne — nur auf ein neueres Werkzeug angewendet.

Zwei Video-Plugins, Zwei Nutzungen

capsule-gradle

hyperframes-gradle

[empty]

Deck reveal.js (existierendes HTML)

AsciiDoc → HTML HyperFrames

Anwendungsfall

Revisionskapsel

Eigenständiges Erklärvideo

Natur

Folien → Video

Dokument → Video

Rendering

Playwright Java → WebM

HyperFrames CLI → MP4

Animation

Übergänge reveal.js eingebaute

GSAP/CSS-Datenattribute

Stapel

100% JVM (Kotlin)

JVM + externe Node.js-CLI

Sie ersetzen sich nicht. Sie ergänzen sich. Die vollständige Wertschöpfungskette:

AsciiDoc ──→ slider-gradle ──→ deck reveal.js ──→ capsule-gradle ──→ WebM Wiederholungskapsel

AsciiDoc ──→ hyperframes-gradle ──→ MP4 (Standalone-Video)

Der Benutzer schreibt eine einzige AsciiDoc-Datei. slider-gradle erzeugt die Folien. capsule-gradle erzeugt die Überarbeitungskapsel. hyperframes-gradle erzeugt das Teaser-Video und die technischen Demos

Die 6 EPICs der Roadmap

Das Plugin ist in 6 EPICs strukturiert:

EPIC

Beschreibung

Priorität

HF-0

Bootstrap Governance + Architekturabgrenzung

�✅ ERLEDIGT

HF-1

Gradle-Stub-Plugin + AsciidoctorJ-Integration

HF-2

Brücke CLI HyperFrames (ProcessBuilder → npx → MP4)

HF-3

DSL AsciiDoc Gepflogenheiten (Blöcke, Docinfo, Vorlagen)

HF-4

Integration Runner-Gradle (metadata.json)

HF-5

fertige Vorlagen (title-card, code-diff, captions)

HF-6

CI + Veröffentlichung Maven Central / Gradle Portal

Die Sitzung 000 (bootstrap) ist bereits abgeschlossen. Die Sitzung 001 wird HF-1 angreifen: der Stub des Gradle-Plugins und die AsciidoctorJ-Integration.

Warum funktioniert es?

Drei Gründe:

HyperFrames ist "built for agents". Mein Pipeline beruht auf KI-Agenten.

(planner-gradle + deepseek) erzeugen Inhalt. HyperFrames akzeptiert HTML roh — das Format, das die LLMs am besten meistern. Kein React, nicht von JSX, keine Lernkurve für den Agenten.

Der AsciiDoc-DSL ist natürlich. Mein ganzes Ökosystem spricht AsciiDoc.

slider-gradle, codex-gradle, training-gradle — alle verbrauchen davon`.adoc`. Benutzerdefinierte Blöcke hinzufügen`[hyperframes-composition]`ist eine Erweiterung logisch, kein Bruch.

Die Node.js Bridge ist ein bewährtes Muster. ProcessBuilder außerhalb der JVM,

Das ist das, was ich bereits für PlantUML, Graphviz, Piper mache. HyperFrames hinzufügen Es ändert nichts an der Architektur — es ist nur ein weiteres externes Werkzeug, gesteuert von Gradle.

Die wahre Stärke des Patterns besteht darin, dass es keine npm-Abhängigkeit gibt Der Gradle-Build. Das Plugin importiert keinen Node.js-Code. Es führt eine Shell-Befehl. Wenn HyperFrames sich weiterentwickelt oder kaputt geht, ist das Plugin nicht gekoppelt. — Es reicht, den Befehl zu aktualisieren.

Schlussfolgerung : Das fehlende Glied

Mit hyperframes-gradle ist mein Video-Pipeline vollständig. Ich habe:

Die interaktive Slides (slider-gradle)
Die Revisionskapseln (capsule-gradle)
Die Standalone-Videos (hyperframes-gradle)

Drei Formate. Eine einzige Quelldatei: AsciiDoc.

Das nächste Ziel ist HF-1 : das Plugin zu kompilieren und zu generieren ein erste HTML HyperFrames aus einem annotierten AsciiDoc-Dokument. Die Sitzung 001 ist bereits gerahmt.

hyperframes-gradle existiert. Die Governance ist eingerichtet. Der Backlog ist geschrieben. Die Architektur ist dokumentiert. Das Plugin ist geboren.

Referenzen

Artikel 0124 — Die Architektur des unabhängigen Plugins + Verbraucher-Wurzel
HyperFrames — GitHub
HyperFrames — Dokumentation
foundry/public/hyperframes-gradle/hyperframes-plugin/doc/HYPERFRAMES_ARCHITECTURE.adoc— Detaillierte Architektur