HyperFrames-Gradle : AsciiDoc omzetten naar een MP4-video

Inhoudsopgave

Het gat in de videopijplijn
HyperFrames : De Motor
De architectuur van de plugin
Twee Videoplugins, Twee Gebruiken
de 6 EPICs van de routekaart
Waarom werkt het
Conclusie: De ontbrekende schakel
Referenties

leestijd : 8 minutes

Twee weken geleden lanceerde ik`capsule-gradle`— een plugin die een deck transformeert reveal.js in een WebM-videocapsule met TTS. Vandaag voeg ik een nieuwe plugin toe: hyperframes-gradle. Het doet iets wat capsule-gradle niet doet : zet de AsciiDoc rechtstreeks om naar een MP4-video, zonder reveal.js te gebruiken.

Hier is waarom deze plug-in bestaat, hoe hij samenwerkt met het bestaande, en wat de HyperFrames-engine van HeyGen toevoegt aan de pijplijn voor contentproductie

Het gat in de videopijplijn

Mijn documentaire pijplijn produceert twee soorten video’s :

Revisiecapsule (capsule-gradle) — een deck reveal.js opgenomen in WebM met

narration TTS. Perfect om een module te herzien.

animatieslides (slider-gradle) — een interactieve reveal.js HTML-deck voor

de fysieke trainer.

Maar er ontbreekt een derde formaat: de video standalone.

Gebruikscase	Huidige oplossing	tekort
Slides van de trainer	slider-gradle → reveal.js	✅
capsule revisie	capsule-gradle → WebM	✅
teaser video	Geen	❌
Geanimeerde technische demo	geen	❌
Doc-naar-video	Geen	❌

Gebruikscase

Huidige oplossing

tekort

Slides van de trainer

slider-gradle → reveal.js

✅

capsule revisie

capsule-gradle → WebM

✅

teaser video

Geen

❌

Geanimeerde technische demo

geen

❌

Doc-naar-video

Geen

❌

Het eerste use case is cruciaal: hoe automatisch te genereren een video van 60 seconden die een project of module presenteert, met GSAP-animaties, vertelling TTS, en achtergrondmuziek — alles vanuit hetzelfde AsciiDoc-bestand wat de slides ?

Capsule-gradle kan niet reageren: het heeft al een reveal.js-deck nodig. slider-gradle produceert dit deck goed, maar het is niet ontworpen voor het renderen van video. Er was een direct pijplijn nodig: AsciiDoc → video.

HyperFrames : De Motor

Ik heb ontdekthttps://github.com/heygen-com/hyperframes[HyperFrames] il y a enkele dagen. Het is een open-source framework (Apache 2.0) gemaakt door HeyGen, de eenhoorn van de AI-video. 22 700 sterren op GitHub. De pitch houdt in een zin :

Schrijf HTML. Weergeef video. Gebouwd voor agenten.

Het principe: je schrijft HTML met`data-*`attributes, u verwijst een animatie GSAP (of CSS, Lottie, Three.js…), en de motor rendert alles als MP4 via Puppeteer (headless Chrome) + FFmpeg. Deterministisch resultaat: dezelfde input, zelfde frames, zelfde 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>

Wat maakt HyperFrames anders dan Remotion? Geen React, geen bundler, geen JSX. Ruwe HTML die AI-agents van nature kunnen schrijven. Het is exact afgestemd op mijn pipeline: planner-gradle met deepseek kan deze HTML genereren vanuit een SPG/SPD-plan, en een Gradle-plugin kan het converteren naar MP4.

De architectuur van de plugin

hyperframes-gradle volgt hetzelfde patroon als al mijn plugins : de patroon „Plugin Onafhankelijk + Wortel Consument“

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

De pipeline in vier stappen

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontSize 11

title Pipeline hyperframes-gradle

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

adoc -right-> asciidoctorj : parse blokken douane
asciidoctorj -right-> html : genereert HTML
html -right-> cli : ProcessBuilder\nnpx hyperframes render
cli -right-> mp4 : Puppeteer + FFmpeg
@enduml

AsciidoctorJ parst de AsciiDoc-bron en extraheert de aangepaste blokken.

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

GenerateHyperframesHtmlTask genereert het HTML HyperFrames met de

`data-*`bijbehorende attributen.

RenderHyperframesTask roept de HyperFrames CLI aan via`ProcessBuilder`:

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

MP4 wordt geïmplementeerd in`output/`met een`metadata.json`voor de orkestratie.

De DSL AsciiDoc

De echte toegevoegde waarde van de plugin is de AsciiDoc DSL. De gebruiker Hij schrijft nooit HTML. Hij annoteert zijn bestaande AsciiDoc-document :

= 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;

De docinfo-attributen`:hyperframes-width:`) configureren ze de afmetingen. De aangepaste blokken definiëren de composities en de tracks. Het blok `[hyperframes-animation]`bevat de ruwe GSAP-code — dat de AI-agent kan genereren vanuit een beschrijving in natuurlijke taal.

De Bridge Node.js

Het enige technische wrijvingspunt: HyperFrames is in Node.js/TypeScript, en mijn plugins zijn in Kotlin/JVM. De oplossing is een`ProcessBuilder` :

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"
        }
    }
}

Geen koppeling JVM-code ↔ Node.js. Het contract is via de commandregel en bestanden op schijf. Dit is hetzelfde patroon als`plantuml-gradle` (die de PlantUML CLI aanroept) of`slider-gradle`(die AsciidoctorJ aanroept). Niets nieuws onder de zon — gewoon toegepast op een nieuwer hulpmiddel.

Twee Videoplugins, Twee Gebruiken

	capsule-gradle	hyperframes-gradle
bron	Deck reveal.js (bestaande HTML)	AsciiDoc → HTML HyperFrames
gebruikscasus	Revisiecapsule	standalone uitlegvideo
Natuur	Slides → video	Document → video
gegeven	Playwright Java → WebM	HyperFrames CLI → MP4
Animatie	Overgangen reveal.js inheemse	GSAP/CSS data-attributes
stapel	100% JVM (Kotlin)	JVM + Node.js externe CLI

capsule-gradle

hyperframes-gradle

bron

Deck reveal.js (bestaande HTML)

AsciiDoc → HTML HyperFrames

gebruikscasus

Revisiecapsule

standalone uitlegvideo

Natuur

Slides → video

Document → video

gegeven

Playwright Java → WebM

HyperFrames CLI → MP4

Animatie

Overgangen reveal.js inheemse

GSAP/CSS data-attributes

stapel

100% JVM (Kotlin)

JVM + Node.js externe CLI

Ze vervangen elkaar niet. Ze vullen elkaar aan. De volledige waardeketen:

AsciiDoc ──→ slider-gradle ──→ deck reveal.js ──→ capsule-gradle ──→ WebM (revisiecapsule)

AsciiDoc ──→ hyperframes-gradle ──→ MP4 (standalone video)

De gebruiker schrijft één enkel AsciiDoc-bestand. slider-gradle genereert de slides. capsule-gradle produceert de revisiecapsule. hyperframes-gradle produceert de teaser-video en de technische demo’s.

de 6 `EPICs` van de routekaart

De plugin is gestructureerd in 6 EPICs :

EPISCH	Omschrijving	Prioriteit
HF-0	Bootstrap governance + architectuuropzet	AFGEROND
HF-1	Gradle stub plugin + AsciidoctorJ integratie	P0
HF-2	Brug CLI HyperFrames (ProcessBuilder → npx → MP4)	P1
HF-3	DSL AsciiDoc customs (blokken, docinfo, templates)	P1
HF-4	Integratie runner-gradle (metadata.json)	P2
HF-5	Sjablonen klaar voor gebruik (title-card, code-diff, captions)	P3
HF-6	CI + publicatie Maven Central / Gradle Portal	P3

EPISCH

Omschrijving

Prioriteit

HF-0

Bootstrap governance + architectuuropzet

AFGEROND

HF-1

Gradle stub plugin + AsciidoctorJ integratie

HF-2

Brug CLI HyperFrames (ProcessBuilder → npx → MP4)

HF-3

DSL AsciiDoc customs (blokken, docinfo, templates)

HF-4

Integratie runner-gradle (metadata.json)

HF-5

Sjablonen klaar voor gebruik (title-card, code-diff, captions)

HF-6

CI + publicatie Maven Central / Gradle Portal

Sessie 000 (bootstrap) is al voltooid. Sessie 001 zal HF-1 aanvallen: de stub van de Gradle-plugin en de AsciidoctorJ-integratie.

Waarom werkt het

Drie redenen:

HyperFrames is "built for agents". Mijn pijplijn is gebaseerd op AI-agents.

(planner-gradle + deepseek) die inhoud genereren. HyperFrames accepteert Ruwe HTML — het formaat waarvan LLMs het beste bekwaam zijn. Geen React, geen geen JSX, geen leercurve voor de agent.

De AsciiDoc DSL is natuurlijk. Mijn hele ecosysteem spreekt AsciiDoc.

slider-gradle, codex-gradle, training-gradle — allen verbruiken`.adoc`. Voeg aangepaste blokken toe`[hyperframes-composition]`is een extensie logisch, geen breuk.

De Node.js bridge is een bewezen patroon ProcessBuilder buiten de JVM,

Dit is wat ik al doe voor PlantUML, Graphviz, Piper. HyperFrames toevoegen verandert niets aan de architectuur — het is een extra extern hulpmiddel, Gestuurd sinds Gradle.

De echte kracht van het patroon is dat er geen npm-afhankelijkheid in de Gradle-build. De plugin importeert geen Node.js-code. Het voert een shell-opdracht. Als HyperFrames evolueert of breekt, de plugin is niet gekoppeld — Het is voldoende om de opdracht bij te werken.

Conclusie: De ontbrekende schakel

Met hyperframes-gradle is mijn videopipeline compleet. Ik heb :

De interactieve slides (slider-gradle)
De herhalingscapsules (capsule-gradle)
De video’s standalone (hyperframes-gradle)

Drie formaten. Één bronbestand: AsciiDoc.

Het volgende doel is HF-1 : de plugin compileren en genereren een Eerste HTML HyperFrames vanaf een geannoteerd AsciiDoc-document. De sessie 001 is al gekaderd.

hyperframes-gradle bestaat. De governance is op zijn plaats. Het backlog is geschreven. De architectuur is gedocumenteerd. De plug-in is geboren.

Referenties

Artikel 0124 — De onafhankelijke pluginarchitectuur en de consumentenbasis
HyperFrames — GitHub
HyperFrames — Documentatie
foundry/public/hyperframes-gradle/hyperframes-plugin/doc/HYPERFRAMES_ARCHITECTURE.adoc— Gedetailleerde architectuur

Gerelateerde artikelen

Audit van mijn LLM‑consumptie : SQLite, OpenCode, Ollama Cloud, en waarom mijn pro‑abonnement de wereldwijde markt opschudt
18 May 2026

De architectuur « Onafhankelijke plugin + consumentenroot »: Waarom worden mijn Gradle-builds geduplicerd?
14 May 2026

De Knowledge Graph als aanbevelingsmotor : hoe ik de chronologische gerelateerde artikelen heb doodgemaakt
12 May 2026

Schakel JavaScript in om de commentaren aangedreven door Disqus.