UnrealMotion

<details> <summary><strong>Bahasa Indonesia</strong> — buka / tutup</summary>

Dari brief menjadi gerak. Three.js, source terbuka, MP4 siap pakai.

Skill untuk coding agent dengan pipeline prompt → ImageGen → rekonstruksi Three.js → video explainer tanpa audio. Style explainer mengikuti contoh pastel cutaway yang sederhana; subjek, model, storyboard, dan motion mengikuti prompt. Bahasa copy utama: Indonesia. Engine: Three.js; tidak memakai Unreal Engine atau layanan text-to-video berbayar.

Baru di 1.2 — kamera kontinu dan reassembly

Beberapa referensi ImageGen yang konsisten → scene Three.js dengan identitas bagian tetap → transisi cutaway/reassembly → teks kinetik dan grafik data → MP4 tanpa audio. Style pastel sederhana dan renderer lokal tetap dipertahankan.

• Kamera 3D bergerak kontinu dalam satu dunia: mendekati mekanisme, berputar ke sudut oblique, mengikuti pipa, lalu menuju grafik yang menetap di ruang yang sama.
• Reassembly bertahap dengan lubang/poros, bearing, rotor, seal, bezel dan baut yang duduk sebelum mekanisme bekerja. Pace default calm; dynamic tetap tersedia.
• Teks word/character reveal, wipe dan impact; ruang baca tetap diperhitungkan.
• Bar, line, donut, counter dan bar-chart race dari CSV/JSON lokal; domain tetap, unit, sumber dan label data ilustratif.
• Bundle referensi per adegan dengan prompt, hash dan part binding; bukan satu gambar yang digerakkan sepanjang video.

Aliran Jadi Data · 32 detik · 9:16 · 1080×1920 · 30 fps · tanpa audio. Tiga referensi ImageGen, dua konteks 3D, sepuluh beat, kamera kontinu, reassembly sensor dan empat bentuk grafik. Tempo diperpanjang dari 24 menjadi 32 detik (0,75×). Angka serta mekanismenya ilustratif. Tonton MP4 · Source dan aset · Changelog versi.

Tambahan prompt opsional: Pace: dinamis, tetap terbaca, Data: [file CSV/JSON + unit + sumber], dan Fokus data: [perbandingan/tren/pembagian]. Jika tidak ada data faktual, gunakan ilustrasi yang diberi label atau jelaskan prosesnya tanpa angka rekaan. Kamera kontinu · Data motion · Teks dinamis.

Contoh Video Motion Graphics

Dua explainer lengkap dengan alur ImageGen → Three.js → video tanpa audio. Klik thumbnail atau Tonton MP4 untuk membuka videonya.

| Pipa / aliran air | Pencahayaan rumah — Rumah, Ramah Cahaya | | --- | --- | | <img src="examples/media/water-imagegen-threejs.png" width="240" alt="Cutaway pastel sistem air dengan pipa, pompa, dan toren"> | <img src="examples/media/rumah-ramah-cahaya.jpg" width="240" alt="Cutaway rumah pastel dengan jendela, cahaya alami, furnitur, dan lampu"> | | Ikuti pompa, aliran pipa, ketinggian air, dan kontrol otomatis. | Pahami posisi jendela, cahaya alami, peneduh, serta lampu umum dan lampu kerja. | | ▶ Tonton MP4 | ▶ Tonton MP4 |

Keduanya: 60 detik · 9:16 · 1080×1920 · 30 fps · tanpa audio. Copy di dalam video memakai bahasa Indonesia.

Contoh Video 3D Assembly

| Optik / kamera konsep | Bearing mekanik | Rakitan arsitektur | | --- | --- | --- | | <img src="examples/media/optic.jpg" width="280" alt="Kamera konsep dengan susunan optik lensa yang dianimasikan"> | <img src="examples/media/reassembly.jpg" width="280" alt="Exploded view thrust bearing dengan raceway, cage, dan bola"> | <img src="examples/media/pavilion.jpg" width="280" alt="Paviliun dengan atap yang terangkat lalu kembali ke penyangganya"> | | Susunan optik terpisah, lalu dirakit kembali. | Bola masuk ke cage, race menutup, lalu bearing berputar. | Atap terangkat, struktur terbuka, lalu kembali terpasang. | | ▶ Tonton MP4 · Source | ▶ Tonton MP4 · Source | ▶ Tonton MP4 · Source |

Contoh assembly: 6 detik · 16:9 · 1920×1080 · 60 fps · tanpa audio. Studi motion lain: tipografi kinetik · ubur-ubur. Format dan batas verifikasi.

Instalasi skill di Codex

Siapkan Git, Node.js 22+, Python 3.10+, FFmpeg dan ffprobe, serta Codex yang dapat membaca/menulis project dan menjalankan perintah lokal. Pipeline referensi gambar membutuhkan ImageGen bawaan host. Instalasi npm menyediakan runtime Three.js dan renderer; ketersediaan ImageGen mengikuti host tempat agent berjalan.

1. Unduh repo dan pasang runtime

Perintah berikut untuk shell macOS/Linux:

git clone https://github.com/kohryan/unrealmotion-skill.git
cd unrealmotion-skill
npm ci
npx playwright install chromium

Di Linux yang belum memiliki dependency browser, gunakan npx playwright install --with-deps chromium sebagai pengganti perintah instalasi Chromium di atas. FFmpeg harus menyediakan encoder H.264; pastikan ffmpeg dan ffprobe tersedia di PATH.

2. Daftarkan skill personal

Untuk instalasi baru, buat symlink ke seluruh checkout, dari folder unrealmotion-skill yang baru di-clone:

mkdir -p "$HOME/.agents/skills"
ln -s "$(pwd)" "$HOME/.agents/skills/unrealmotion"
node scripts/unrealmotion.mjs doctor

Codex mendukung folder skill personal di ~/.agents/skills dan mengikuti symlink. Perintah ln -s akan menolak tujuan yang sudah ada; jika skill sudah terpasang dan terdeteksi, lanjutkan ke langkah penggunaan. Simpan checkout di lokasinya agar symlink tetap valid. Rujukan: dokumentasi resmi OpenAI tentang skill dan lokasi discovery.

Installer bawaan repo: node scripts/install.mjs memakai ${CODEX_HOME:-$HOME/.codex}/skills/unrealmotion, sesuai implementasi saat ini. Installer mempertahankan skill yang sudah ada dan bersifat idempotent untuk checkout yang sama. Jalur ini tersedia bagi host yang membaca lokasi tersebut; untuk lokasi personal pada dokumentasi Codex saat ini, gunakan langkah ~/.agents/skills di atas. Satu instalasi yang sudah terdeteksi cukup.

3. Panggil dari chat Codex

Buka folder kerja untuk hasil video, lalu kirim prompt dengan Gunakan $unrealmotion. Codex mendeteksi skill baru/perubahannya secara otomatis; jika belum muncul, restart Codex, lalu panggil ulang. Lihat dokumentasi instalasi dan pembaruan skill.

Untuk memperbarui runtime dan instruksi, jalankan dari checkout repo:

git pull --ff-only
npm ci
npx playwright install chromium
node scripts/unrealmotion.mjs doctor

Symlink tetap menunjuk ke checkout yang sama. Instalasi UnrealMotion cukup untuk memakai renderer bawaan; daftar upstream yang pernah dipelajari tidak perlu dipasang satu per satu untuk menjalankan pipeline ini.

Template prompt untuk Codex

Tidak ada format wajib. Minimal sebutkan topik dan tujuan penonton; alur, fokus visual, durasi dan referensi boleh dilengkapi sesuai kebutuhan. Salin template ini ke chat Codex:

Gunakan $unrealmotion.

Topik: [objek atau proses yang dijelaskan]
Tujuan: [hal yang harus dipahami penonton]
Alur: [tahapan atau bagian penting, jika diketahui]
Fokus visual: [bagian yang perlu diperlihatkan/cutaway/reassembly]
Durasi dan rasio: [opsional]
Referensi: [gambar/link, opsional]

Pertahankan style pastel cutaway sederhana seperti demo.
Tanpa suara atau musik.

Contoh terisi:

Gunakan $unrealmotion.

Topik: Tutorial membangun rumah dengan pencahayaan yang cukup
Tujuan: Penonton memahami aspek pencahayaan pada bagian rumah
Alur: Syarat pencahayaan rumah yang baik dan cara merencanakannya
Fokus visual: Jendela, pencahayaan lampu, cahaya alami, dan struktur rumah
Durasi dan rasio: 1 menit, 9:16
Referensi: -

Pertahankan style pastel cutaway sederhana seperti demo.
Tanpa suara atau musik.

Jika durasi/format belum ditentukan, explainer memakai 60 detik, 9:16, 1080×1920, 30 fps, tanpa audio. Agent menyusun storyboard dan motion sesuai topik. Untuk mekanisme, Anda bisa menambahkan arahan seperti “buka casing, jelaskan komponen aktif, rakit kembali, lalu perlihatkan operasinya”. Output yang dituju adalah MP4 yang bisa diputar beserta source yang bisa diedit.

Agent membaca SKILL.md, menghasilkan referensi adegan yang konsisten melalui ImageGen bawaan host, menulis model/scene khusus, melakukan QA visual, dan merender lokal. CLI create --prompt membuat starter serta menyimpan brief; perintah itu tidak menafsirkan prompt atau menggantikan authoring oleh agent. ImageGen bawaan tidak memerlukan API key tambahan.

Metode pembangunan UnrealMotion

UnrealMotion dikembangkan melalui studi instruksi skill serta script Python/TypeScript/JavaScript, pemilihan prinsip yang relevan, lalu implementasi dan pengujian kode original. Hubungan sumber, revisi dan batas lisensinya tercatat di source study.

flowchart TD
    A["Studi skill dan source PY / TS / JS"] --> B["Remotion + HyperFrames<br/>Frame time, easing, seek dan kontinuitas"]
    A --> C["img2threejs + Three.js Game Skills<br/>Rekonstruksi, material dan inspeksi model"]
    A --> D["teardown + Vox generator<br/>Mekanisme, struktur bagian dan narasi"]
    E["CCORE + NVIDIA SimReady<br/>Referensi scene dan tampilan aset"] --> F["Retrieval terarah<br/>Metadata, kode atau thumbnail relevan"]
    G["Awesome Opus Videos + referensi visual<br/>Brief, pacing dan susunan adegan"] --> H["Kontrak produksi UnrealMotion"]
    B --> H
    C --> H
    D --> H
    F --> H
    H --> I["Implementasi original<br/>SKILL.md, referensi, CLI dan runtime"]
    I --> J["Uji scene, arbitrary seek,<br/>kualitas visual dan MP4"]
    J --> K{"Sesuai brief dan lolos review?"}
    K -->|Perbaiki| I
    K -->|Ya| L["Skill dan contoh yang dapat dipakai ulang"]

Dataset digunakan sebagai korpus referensi. Prinsip upstream diadaptasi ke runtime lokal; engine Remotion/HyperFrames tidak otomatis menjadi dependency atau renderer di balik setiap video. Tidak ada training atau fine-tuning model dalam proses ini.

Pipeline produksi video

flowchart TD
    P["Prompt pengguna di Codex"] --> Q["Agent menyusun brief,<br/>pesan utama dan storyboard"]
    Q --> R["Referensi sesuai topik<br/>CCORE / SimReady / gambar pengguna"]
    R --> S["ImageGen bawaan host<br/>2–4 referensi adegan sederhana<br/>Identitas dan style konsisten"]
    S --> T["Inspeksi dan spesifikasi model<br/>Bagian, proporsi, attachment dan pivot"]
    T --> U["Rekonstruksi Three.js nyata<br/>Hierarchy tetap per objek<br/>Scene root untuk tiap konteks"]
    U --> V["Kamera 3D kontinu, reassembly dan teks<br/>CSV/JSON opsional di ruang yang sama<br/>Semua state dari waktu/frame absolut"]
    V --> W["Preview dan QA<br/>Frame native, batas adegan dan random seek"]
    W --> X{"Visual dan teknis lolos?"}
    X -->|Revisi model / gerak| U
    X -->|Ya| Y["Review terikat source hash"]
    Y --> Z["Render frame dengan Chromium<br/>Encode H.264 melalui FFmpeg"]
    Z --> AA["Verifikasi resolusi, FPS,<br/>durasi, frame count dan tanpa audio"]
    AA --> AB["MP4 + source editable<br/>Aset, prompt dan provenance"]

Retrieval dipakai saat relevan: SimReady berperan untuk aset yang sesuai, sementara gambar/referensi lain dapat memandu topik berbeda. Gambar ImageGen menjadi pand