HyperFrames-Gradle : Mengubah AsciiDoc menjadi Video MP4

Diterbitkan 31 May 2026

waktu membaca : 8 minutes

Dua minggu lalu, saya meluncurkan`capsule-gradle`— sebuah plugin yang mengubah sebuah dek reveal.js dalam kapsul video WebM dengan TTS. Hari ini, saya menambahkan plugin baru: hyperframes-gradle. Melakukan sesuatu yang tidak dilakukan oleh capsule-gradle : mengubah AsciiDoc secara langsung menjadi video MP4, tanpa melalui reveal.js.

Ini mengapa plugin ini ada, bagaimana ia terkait dengan yang sudah ada, dan apa yang mesin HyperFrames HeyGen menyumbangkan pada pipeline produksi konten

Lubang di Pipeline Video

Pipeline dokumenter saya menghasilkan dua jenis video :

  1. Kapsul revisi (capsule-gradle) — sebuah deck reveal.js di-rekam dalam WebM dengan

narasi TTS. Sempurna untuk mereview modul.

  1. Slides animasi (slider-gradle) — sebuah deck reveal.js HTML interaktif untuk

pelatih tatap muka.

Namun tidak ada satu format ketiga: video standalone

Kasus penggunaan

Solusi saat ini

Kekurangan

Slide instruktur

slider-gradle → reveal.js

✅

Kapsul revisi

capsule-gradle → WebM

✅

Video teaser

tidak ada

❌

Demo teknik animasi

Tidak ada

❌

Dokumen-ke-video

tidak ada

❌

Kasus penggunaan pertama kritis: bagaimana menghasilkan secara otomatis sebuah video 60 detik yang menampilkan sebuah proyek atau modul, dengan animasi GSAP, narasi TTS, dan latar belakang musik — semuanya dari file AsciiDoc yang sama Bagaimana dengan slide-nya?

Capsule-gradle tidak dapat merespons: ia sudah memerlukan sebuah deck reveal.js. slider-gradle menghasilkan dek ini dengan baik, tetapi tidak dirancang untuk rendering video. Kami membutuhkan pipeline langsung : AsciiDoc → video.

HyperFrames : Mesin

Saya menemukanhttps://github.com/heygen-com/hyperframes[HyperFrames] il y a beberapa hari. Ini adalah sebuah framework open-source (Apache 2.0) yang dibuat oleh HeyGen, unicorn dari video AI. 22 700 bintang di GitHub. Pitch tetap dalam sebuah kalimat :

Tulis HTML. Merender video. Dibuat untuk agen.

Prinsip : Anda menulis HTML dengan`data-*`atribut, Anda mereferensikan suatu animasi GSAP (atau CSS, Lottie, Three.js…), dan mesin merender semuanya dalam MP4 melalui Puppeteer (headless Chrome) + FFmpeg. Hasil deterministik: input yang sama, frame yang sama, video yang sama.

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

Apa yang membuat HyperFrames berbeda dari Remotion? Tanpa React, tanpa bundler, tanpa JSX. HTML mentah yang dapat ditulis secara alami oleh agen IA. Ini dibuat khusus exactement untuk pipeliniku : planner-gradle dengan deepseek dapat menghasilkan HTML ini dari rencana SPG/SPD, dan plugin Gradle dapat mengonversinya menjadi MP4.

Arsitektur Plugin

hyperframes-gradle mengikuti pola yang sama dengan semua plugin saya : yang pola « Plugin Independen + Akar Konsumen ».

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

Pipeline dalam Empat Tahap

@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultFontSize 11

title Pipeline hyperframes-gradle

rectangle "AsciiDoc
sumber" 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 blocs customs
asciidoctorj -right-> html : génère HTML
html -right-> cli : ProcessBuilder\nnpx hyperframes render
cli -right-> mp4 : Puppeteer + FFmpeg
@enduml

  1. AsciidoctorJ mengurai sumber AsciiDoc dan mengekstrak blok khusus

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

  1. GenerateHyperframesHtmlTask menghasilkan HTML HyperFrames dengan

`data-*`atribut yang sesuai.

  1. RenderHyperframesTask memanggil CLI HyperFrames melalui`ProcessBuilder`:

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

  1. MP4 telah dideploykan di`output/`dengan sebuah`metadata.json`untuk orkestrasi.

Bahasa Khusus Domain AsciiDoc

Nilai tambah sebenarnya dari plugin adalah DSL AsciiDoc. Pengguna Dia tidak pernah menulis HTML. Dia mengannota dokumen AsciiDoc yang sudah ada:

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

Atribut docinfo (:hyperframes-width:) mengatur dimensi. Blok khusus menentukan komposisi dan jalur. Blok `[hyperframes-animation]`mengandung kode GSAP mentah — yang agen IA dapat menghasilkan dari sebuah deskripsi dalam bahasa alami.

Bridge Node.js

Satu-satunya titik gesek teknis: HyperFrames ditulis dalam Node.js/TypeScript, dan plugin saya adalah dalam Kotlin/JVM. Solusi adalah sebuah`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"
        }
    }
}

Tidak ada kaitan kode JVM ↔ Node.js. Kontraknya melalui baris perintah. dan file di disk. Ini pola yang sama seperti`plantuml-gradle` (memanggil CLI PlantUML) atau`slider-gradle`(yang memanggil AsciidoctorJ). Tidak ada yang baru di bawah matahari — hanya diterapkan pada alat yang lebih baru.

Dua Plugin Video, Dua Penggunaan

capsule-gradle

hyperframes-gradle

Source

Deck reveal.js (HTML yang ada)

AsciiDoc ke HTML HyperFrames

Kasus penggunaan

Kapsul revisi

Video penjelasan mandiri

Alam

Slides → video

Dokumen → video

dirender

Playwright Java → WebM

HyperFrames CLI → MP4

animasi

transisi reveal.js asli

GSAP/CSS atribut data

tumpukan

100% JVM (Kotlin)

JVM + Node.js CLI eksternal

Mereka tidak saling menggantikan. Mereka saling melengkapi. Rantai nilai lengkap:

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

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

Pengguna menulis satu file AsciiDoc. slider-gradle menghasilkan slide. capsule-gradle menghasilkan kapsul revisi. hyperframes-gradle menghasilkan video teaser dan demonstrasi teknis

6 EPIC dari Roadmap

Plugin ini terstruktur dalam 6 EPICs :

epik

Deskripsi

Prioritas

HF-0

Bootstrap tata kelola + perencanaan arsitektur

✅ SELESAI

HF-1

Plugin Gradle stub + AsciidoctorJ integrasi

P0

HF-2

Jembatan CLI HyperFrames (ProcessBuilder → npx → MP4)

P1

HF-3

DSL AsciiDoc customs (blok, docinfo, templates)

P1

HF-4

Integrasi runner-gradle (metadata.json)

P2

HF-5

Template siap pakai (title-card, code-diff, captions)

P3

HF-6

CI + penerbitan Maven Central / Gradle Portal

P3

Sesi 000 (bootstrap) sudah selesai. Sesi 001 akan menyerang HF-1 : stub plugin Gradle dan integrasi AsciidoctorJ.

Mengapa itu bekerja

Tiga alasan:

  1. HyperFrames adalah "built for agents". Pipeline saya bergantung pada agen IA

(planner-gradle + deepseek) yang menghasilkan konten. HyperFrames menerima HTML mentah — format yang paling dikuasai oleh LLMs. Tanpa React, tanpa dari JSX, tidak ada kurva belajar untuk agen.

  1. DSL AsciiDoc alami. Seluruh ekosistem saya berbicara AsciiDoc.

slider-gradle, codex-gradle, training-gradle — semua mengonsumsi`.adoc`. Menambahkan blok kustom`[hyperframes-composition]`adalah sebuah ekstensi logis, bukan putus.

  1. Jembatan Node.js adalah pola yang terbukti. ProcessBuilder di luar JVM,

Ini adalah apa yang sudah saya lakukan untuk PlantUML, Graphviz, Piper. Menambahkan HyperFrames tidak mengubah apa pun pada arsitektur — ini adalah alat eksternal tambahan, dikendalikan dari Gradle

Kekuatan sejati pola adalah bahwa tidak ada satupun dependensi npm dalam pembangunan Gradle. Plugin ini tidak mengimpor kode Node.js. Menjalankan sebuah perintah shell. Jika HyperFrames berkembang atau rusak, plugin tidak terhubung — cukup memperbarui perintah.

Kesimpulan: Rantai yang Hilang

Dengan hyperframes-gradle, pipeline video saya lengkap. Saya punya :

  • The slides interaktif (slider-gradle)

  • kapsul revisi (capsule-gradle)

  • video standalone (hyperframes-gradle)

Tiga format. Satu file sumber: AsciiDoc.

Tujuan berikutnya adalah HF-1: membuat plugin terkompilasi dan menghasilkan satu Pertama HTML HyperFrames dari dokumen AsciiDoc yang diannotasi. Sesi 001 sudah terkerangka.

hyperframes-gradle ada. Tata kelola telah diatur. Backlog Telah ditulis. Arsitektur sudah didokumentasikan. Plugin telah lahir.

Referensi

Artikel terkait

Audit dari Konsumsi LLM saya: SQLite, OpenCode, Ollama Cloud, dan Mengapa Abonnement Pro saya Meledak Pasar Global
18 May 2026
Arsitektur « Plugin Independen + Akar Konsumen » : Mengapa Build Gradle Saya Menduplikat?
14 May 2026
Knowledge Graph sebagai mesin rekomendasi: bagaimana saya membunuh artikel terkait berurutan
12 May 2026