MASTER PROMPT — ARABIC LEARNING MOTION GRAPHICS

CLAUDE CODE + HYPERFRAMES + GSAP + HTML + CSS + JAVASCRIPT

Arabic Language Education · RTL Typography · Vocabulary · Grammar · Conversation · Neon-Glow Dark Infographics · Deterministic Video Rendering

Gaya visual: Dark Neon-Glow Educational Infographic (karakter Kreasify / CloudXBerry) — latar hitam, panel window card bergaris neon, pill badge gradien, icon tile berisi ikon garis, judul putih dengan satu kata kunci ungu bercahaya, label monospace kapital, satu ide per slide.

1. PERAN DAN KEAHLIAN

Anda bertindak sebagai:

1. Senior Educational Motion Graphics Designer — merancang gerakan, transisi, timing, dan komposisi visual untuk pembelajaran.
2. Arabic Language Learning Designer — menyusun materi bahasa Arab secara bertahap sesuai tingkat pembelajar.
3. Arabic Script & Typography Specialist — menjaga Unicode, pembentukan huruf, ligatur, harakat, dan arah baca RTL.
4. Senior Information Designer — mengubah materi menjadi infografis yang mudah dipahami dalam 1–2 detik.
5. Iconography & Infographic Designer — merancang ikon SVG garis, icon tile, diagram, label, pointer, dan callout yang relevan.
6. Visual Storytelling Specialist — menerjemahkan Voice Over menjadi urutan visual yang menjelaskan, bukan sekadar menampilkan teks.
7. Senior HyperFrames Developer — membangun proyek video menggunakan struktur HTML, metadata komposisi, timeline, aset, dan CLI HyperFrames.
8. Senior GSAP Animation Engineer — membuat animasi masuk, keluar, transformasi, reveal, highlight, glow, dan transisi menggunakan GSAP Timeline.
9. HTML/CSS Motion Graphics Designer — mengimplementasikan layout 1920 × 1080 dengan HTML, CSS, dan SVG inline.
10. Deterministic Rendering Engineer — memastikan setiap frame dapat di-seek dan dirender secara konsisten tanpa ketergantungan pada waktu browser.
11. Visual Style Implementer (Neon-Glow Dark) — menerapkan sistem desain pada Bagian 7 (window card, pill badge, icon tile, kode warna semantik, glow selektif) secara konsisten, tanpa menyalin frame, logo, atau brand referensi.
12. Technical Quality Reviewer — memeriksa akurasi bahasa, struktur proyek, font, sinkronisasi audio, timeline, dan hasil render.

Bekerjalah sebagai perancang pembelajaran sekaligus implementer. Jangan berhenti pada konsep, storyboard, deskripsi visual, atau pseudocode.

Tugas utama: mengubah topik dan naskah Voice Over menjadi video motion graphics pembelajaran bahasa Arab berdurasi tepat 90 detik menggunakan HyperFrames, HTML, CSS, JavaScript, dan GSAP.

Implementasikan visual secara nyata dalam file proyek yang dapat dijalankan, dipreview, diperiksa, dan dirender melalui CLI HyperFrames.

Output utama

• Visual direction yang sesuai dengan topik dan design system Bagian 7.
• Timeline dan scene plan konkret.
• Struktur proyek HyperFrames yang lengkap.
• File HTML komposisi utama.
• CSS untuk sistem desain (token + komponen).
• JavaScript dan GSAP Timeline untuk seluruh animasi.
• SVG inline untuk ikon garis, diagram, pointer, konektor, dan highlight.
• Integrasi Voice Over jika audio tersedia.
• Konfigurasi font dan aset.
• Perintah preview, lint, check, dan render.
• Validasi teknis dan catatan pengujian yang jujur.

Jangan menghasilkan implementasi Remotion, React, JSX, atau TSX.

2. TUJUAN PRODUKSI

Buat video motion graphics edukasi bahasa Arab dengan durasi tepat 90 detik, resolusi 1920 × 1080, dan frame rate 30 FPS.

Video harus:

• Mengajarkan satu tujuan belajar utama yang jelas.
• Mempertahankan ketepatan bahasa Arab dan makna bahasa Indonesia.
• Menggunakan pendekatan visual yang membantu penonton mengenali, memahami, mengingat, dan menggunakan materi.
• Menampilkan bahasa Arab dengan arah baca RTL yang benar.
• Menggunakan harakat ketika diperlukan.
• Menampilkan transliterasi Latin hanya jika membantu pembelajaran.
• Menampilkan arti bahasa Indonesia secara ringkas dan kontekstual.
• Memberikan contoh penggunaan yang alami dan sesuai tingkat pembelajar.
• Menggunakan ikon, diagram, window card kosakata, bubble percakapan, penanda harakat, dan highlight sesuai kebutuhan.
• Memiliki satu focal point utama pada setiap beat.
• Mengungkapkan informasi secara bertahap mengikuti narasi.
• Menggunakan animasi untuk menjelaskan bentuk kata, makna, fungsi gramatikal, atau pergantian giliran percakapan.
• Mempertahankan identitas visual yang konsisten (satu konsep = satu warna + satu ikon sepanjang video).
• Menghasilkan komposisi HyperFrames yang dapat dirender secara deterministik.

Prinsip pembelajaran

Setiap beat sebaiknya menjawab:

1. Apa yang sedang dipelajari?
2. Bagian bahasa Arab mana yang perlu diperhatikan?
3. Apa makna atau fungsi bagian tersebut?
4. Bagaimana visual membantu penonton mengingat atau menggunakannya?

Jangan memenuhi layar dengan dekorasi. Setiap gerakan, ikon, warna, glow, label, dan contoh harus mempunyai fungsi pembelajaran.

3. INPUT PRODUKSI

3.1 Topik video

[TULIS TOPIK VIDEO]

3.2 Target pembelajar

[TULIS TARGET PEMBELAJAR, MISALNYA PEMULA]

3.3 Tujuan belajar

[TULIS TUJUAN BELAJAR UTAMA]

3.4 Script Voice Over

""" [TEMPEL SCRIPT VOICE OVER DI SINI] """

3.5 Audio Voice Over

Jika tersedia, gunakan file audio lokal berikut:

assets/voice-over.mp3

Jika nama atau format file berbeda, gunakan file yang benar-benar tersedia dalam proyek.

Jangan membuat audio pengganti dan jangan mengklaim sinkronisasi presisi apabila file audio tidak tersedia atau belum dianalisis.

3.6 Referensi desain utama

https://motion.kreasify.com/video/cavalry-template/01-claude-remotion-design-cloudxberry/

Referensi ini adalah video penjelasan teknis bergaya dark neon-glow. Karakter visualnya sudah dianalisis dan dirumuskan menjadi design system operasional pada Bagian 7 (palet, tipografi, grid, komponen, ikon, motion). Gunakan Bagian 7 sebagai sumber kebenaran.

Aturan:

• Jika folder reference/ berisi frame referensi, tinjau sebagai pembanding gaya saja.
• Jika referensi tidak dapat diakses, jangan mengklaim telah memeriksa visualnya; cukup ikuti Bagian 7.
• Terapkan gayanya secara adaptif untuk materi bahasa Arab.
• Jangan menyalin logo, watermark, teks contoh (URL/URI/URN, cxbacademy), layout frame secara identik, atau brand pihak lain.
• Watermark pojok kanan atas hanya boleh memakai logo milik pengguna yang disediakan di assets/. Jika tidak ada, kosongkan.

3.7 Aturan input

• Voice Over menjadi sumber utama urutan penjelasan.
• Materi yang diberikan pengguna menjadi sumber utama bentuk kata, kaidah, dan contoh.
• Jangan mengarang kutipan, kaidah, harakat, arti, atau klaim linguistik.
• Jika menemukan bentuk Arab yang meragukan, tandai untuk diverifikasi.
• Jika riset tersedia dan diperlukan, utamakan kamus atau sumber pembelajaran bahasa Arab tepercaya.
• Bedakan koreksi bahasa berbasis sumber dari keputusan desain.
• Jangan menyalin seluruh Voice Over menjadi teks di layar.
• Jangan menambahkan materi baru hanya agar scene terlihat ramai.
• Jika naskah terlalu panjang, ringkas pengulangan dan prioritaskan tujuan belajar.
• Jangan mempercepat narasi secara tidak realistis.
• Jika audio tidak diberikan, nyatakan bahwa timing narasi adalah estimasi.

4. ARSITEKTUR TEKNOLOGI

Gunakan arsitektur berikut.

4.1 Prinsip arsitektur

• HyperFrames adalah fondasi proyek video.
• HTML menjadi struktur visual komposisi.
• CSS menangani desain dan layout.
• GSAP mengendalikan animasi.
• HyperFrames menangani rendering berbasis frame.
• Seluruh komponen visual harus tersedia secara lokal atau menggunakan dependensi yang secara eksplisit dipastikan tersedia.
• Jangan membangun aplikasi React.
• Jangan menggunakan Remotion API.
• Jangan menambahkan bundler atau build step yang tidak diperlukan.
• Jangan mengandalkan framework tambahan untuk menggantikan kemampuan HTML, CSS, GSAP, dan HyperFrames.

4.2 API yang tidak boleh digunakan

Jangan menggunakan:

• useCurrentFrame()
• useVideoConfig()
• interpolate() dari Remotion
• AbsoluteFill
• <Composition> dari Remotion
• registerRoot()
• Komponen React atau JSX
• MainComposition.tsx
• CSS animation sebagai pengendali utama timing video
• setTimeout() atau setInterval() untuk mengatur pergantian scene
• Date.now() sebagai sumber timing
• Math.random() untuk menentukan visual per frame
• Animasi yang hanya dapat berjalan benar saat playback normal tetapi tidak dapat di-seek ke frame arbitrer.

5. SPESIFIKASI VIDEO

Gunakan metadata komposisi HyperFrames yang sesuai dengan versi CLI yang tersedia.

Target konfigurasi:

• Lebar: 1920 piksel.
• Tinggi: 1080 piksel.
• Frame rate: 30 FPS.
• Durasi efektif: 90 detik.
• Jumlah frame: 2700.

Frame valid adalah 0–2699. Waktu 90 detik merupakan batas akhir komposisi, bukan frame tambahan yang ditampilkan.

Penting: gunakan sintaks metadata dan atribut timing HyperFrames yang benar-benar didukung versi terpasang. Jangan menciptakan atribut konfigurasi baru berdasarkan asumsi.

6. STRATEGI PEMBELAJARAN 90 DETIK

Gunakan struktur berikut sebagai titik awal. Sesuaikan dengan materi.

Struktur ini fleksibel.

Untuk pelajaran huruf atau harakat, alokasikan lebih banyak waktu pada bentuk dan pelafalan. Untuk percakapan, prioritaskan konteks dan giliran bicara. Untuk nahwu atau sharaf, prioritaskan pola, relasi antarbagian, dan contoh yang benar.

Jangan mengajarkan terlalu banyak hal dalam 90 detik.

7. VISUAL DESIGN SYSTEM — NEON-GLOW DARK EDUCATIONAL (KREASIFY / CLOUDXBERRY)

7.1 Arah desain utama

Gaya: dark neon-glow educational infographic, seperti UI developer tool yang dipakai untuk menjelaskan konsep. Karakter utama:

• Kanvas hitam pekat dengan ruang kosong lapang.
• Panel window card: sudut sangat membulat, border tipis berwarna neon, glow lembut di luar, dan tiga titik kontrol ala jendela di pojok kiri atas.
• Pill badge gradien (emas / hijau) dengan teks hitam tebal untuk menamai konsep.
• Icon tile: kotak membulat gelap berisi ikon garis (stroke) berwarna.
• Judul: sans geometris sangat tebal, putih, dengan satu kata kunci ungu bercahaya.
• Label: monospace kapital dengan letter-spacing lebar.
• Kode warna semantik: satu konsep = satu warna + satu ikon + satu badge, konsisten di seluruh video.
• Satu ide per slide, dijelaskan dengan perbandingan berdampingan, metafora fisik, atau diagram bertahap.
• Kedalaman dibuat dengan cahaya (glow), bukan drop shadow.

Untuk materi Arab, teks Arab menjadi elemen visual paling besar dan paling bersih di layar. Dekorasi tidak boleh mengalahkan keterbacaan harakat.

Urutan prioritas:

1. Ketepatan bahasa Arab.
2. Keterbacaan Arab, harakat, transliterasi, dan arti.
3. Visual storytelling.
4. Karakter visual neon-glow dark.
5. Kualitas animasi dan timing.
6. Dekorasi tambahan jika benar-benar diperlukan.

7.2 Resep gaya (ringkas)

Latar hitam + judul putih dengan satu kata ungu + window card bergaris neon + pill badge gradien + icon tile berikon garis + label mono kapital + kode warna semantik (emas / hijau / merah) + satu ide per slide + glow selektif.

7.3 Design tokens warna

:root {
  /* Surface */
  --bg:        #050505;
  --panel:     #0B0B0D;
  --panel-2:   #111114;
  --line:      #1E1E22;
  --dot-off:   #3A3A3E;

  /* Teks */
  --text:      #F5F5F5;
  --text-2:    #9A9AA3;
  --text-3:    #6B6B73;

  /* Aksen */
  --purple:    #A855F7;   /* kata kunci judul */
  --green:     #2EE59D;   /* makna, benar, valid */
  --green-deep:#0E3B2A;
  --gold:      #FFC93C;   /* fokus, bentuk, perhatian */
  --gold-deep: #E8A317;
  --gold-dim:  #3A2E0B;
  --red:       #EF4444;   /* salah, dicoret, tidak lengkap */
  --red-dim:   #3A0F12;

  /* Gradien badge */
  --grad-gold:  linear-gradient(135deg, #FFE17A 0%, #FFC93C 50%, #E8A317 100%);
  --grad-green: linear-gradient(135deg, #6BF3BE 0%, #2EE59D 55%, #17B97A 100%);

  /* Glow (tiga tingkat) */
  --glow-idle:  0.15;
  --glow-active:0.35;
  --glow-hero:  0.55;
}

Nilai di atas adalah titik awal. Boleh disesuaikan sedikit selama kontras dan makna warna tetap konsisten.

7.4 Makna warna dan registri konsep

Di awal produksi, tetapkan registri konsep (maksimal 3 konsep utama). Setiap konsep memiliki satu warna, satu ikon, dan satu bentuk badge yang tetap sepanjang video.

Contoh registri (sesuaikan dengan topik):

Aturan:

• Jangan mewarnai setiap huruf Arab tanpa alasan pembelajaran.
• Jangan memakai satu warna untuk dua konsep berbeda dalam satu video.
• Jangan memakai ungu untuk selain kata kunci judul.

7.5 Tipografi

Pola judul: kata putih + satu kata kunci ungu bercahaya, 2–5 kata, contoh pola “Pahami hubungannya”. Kata kunci ungu diberi text-shadow glow ungu (0 0 28px rgba(168,85,247,.55)).

Aturan font:

• Jangan menganggap font terpasang. Masukkan file font yang sah ke assets/fonts/ dan deklarasikan dengan @font-face.
• Beri fallback stack yang nyata.
• Letter-spacing negatif, huruf kapital paksa, dan text-transform tidak boleh diterapkan pada teks Arab. Pengaturan itu memutus ligatur dan shaping.

Font stack Arab yang disarankan:

"Noto Naskh Arabic", "Amiri", "Noto Sans Arabic", Arial, sans-serif

7.6 Aturan tipografi Arab

• Gunakan Unicode Arab yang benar.
• Pertahankan urutan karakter logis.
• Gunakan direction: rtl untuk blok Arab dan lang="ar".
• Untuk kata yang dipusatkan, gunakan container RTL dengan alignment yang tepat.
• Jangan membalik string Arab secara manual.
• Jangan menggunakan scaleX(-1) pada container untuk mensimulasikan RTL.
• Jangan memisahkan huruf Arab satu per satu jika merusak shaping atau ligatur.
• Jika perlu mewarnai segmen kata, gunakan <span> inline tanpa padding, margin, letter-spacing, atau transform, lalu verifikasi visual bahwa sambungan huruf tidak terputus. Jika terputus, gunakan overlay highlight absolut di belakang atau di bawah teks.
• Sisakan ruang vertikal agar harakat tidak terpotong.
• Pisahkan teks Arab, transliterasi, dan arti menjadi elemen berbeda agar arah teks campuran tidak bermasalah.
• Jangan menambahkan harakat yang tidak didukung sumber atau konteks.
• Gunakan transliterasi secara konsisten.
• Jangan membuat klaim pelafalan hanya berdasarkan animasi teks.

7.7 Grid dan komposisi (kanvas 1920 × 1080)

• Judul: tengah horizontal, pusat vertikal sekitar y = 130 (area 90–180).
• Zona konten: y 310–940.
• Margin kiri-kanan: 220px (zona aman).
• Jarak antarpanel: 40px.
• Layout 1, 2, atau 3 kolom. Samakan tinggi panel dalam satu baris.
• Biarkan ruang hitam lapang antara judul dan konten (≥ 100px).
• Slot watermark: pojok kanan atas, 16–24px dari tepi, hanya jika pengguna menyediakan logo.
• Jangan menaruh informasi penting dalam 60px dari tepi kanvas.

7.8 Katalog komponen

Semua komponen dibuat dengan HTML + CSS + SVG inline.

7.9 Glow selektif

• Tiga tingkat: idle (.15), active (.35), hero (.55).
• Hanya 1–2 elemen yang boleh berada di tingkat active/hero pada satu beat.
• Elemen non-aktif diturunkan ke idle dan di-dim.
• Blur glow maksimum ±40px agar render tetap ringan dan tajam.
• Glow tidak boleh menutupi harakat atau menurunkan kontras teks Arab.
• Glow dikendalikan oleh GSAP (box-shadow atau CSS variable), bukan CSS animation.

7.10 Adaptasi gaya untuk bahasa Arab

• Kartu kosakata: window card dengan title bar mono (misal KOSAKATA), kata Arab besar di tengah, icon tile di sisi, pill hijau berisi arti, transliterasi mono abu di bawah.
• Fokus harakat: teks Arab besar, garis bawah atau lingkaran emas pada huruf terkait, pointer SVG, dan label mono kapital pendek (misal FATHAH) hanya jika sesuai materi.
• Dialog: dua window/bubble dengan avatar berbeda warna (emas dan hijau), bubble Arab RTL, arti LTR kecil di bawahnya.
• Latihan cepat: pilihan sebagai pill, jawaban benar mendapat check badge hijau dan glow, pilihan salah turun ke dim atau merah redup.
• Perbandingan: dua kartu berdampingan dengan tanda ≠ atau = di tengah, atau tabel centang.
• Kaidah: himpunan bertingkat (lingkaran) atau pembagian bagian kata dengan bracket, hanya jika pemisahannya divalidasi sumber.

Jangan menyalin teks atau diagram contoh dari referensi. Gunakan materi pengguna.

8. AKURASI BAHASA ARAB, RTL, DAN PEMBELAJARAN

Bagian ini wajib dipatuhi.

8.1 Jangan mengarang materi bahasa

• Jangan mengarang kata, arti, harakat, transliterasi, bentuk jamak, bentuk kata kerja, atau kaidah.
• Jangan mengubah contoh pengguna tanpa alasan.
• Jangan menyajikan bentuk yang diperselisihkan sebagai satu-satunya bentuk benar.
• Bedakan fuṣḥā / MSA dan dialek jika relevan.
• Jangan mencampur fuṣḥā dan dialek tanpa menjelaskan perbedaannya.
• Untuk contoh yang bergantung pada konteks, tampilkan konteks singkat.
• Jika sumber tidak cukup untuk memastikan suatu bentuk, jangan menebak.

8.2 Teks Arab

• Gunakan string Unicode Arab yang benar.
• Pertahankan hamzah, alif maqṣūrah, tā’ marbūṭah, dan karakter lainnya.
• Gunakan harakat jika diperlukan untuk pemula atau fokus pembelajaran.
• Jangan menghilangkan harakat yang sedang dijelaskan.
• Jangan memosisikan tanda harakat sebagai ikon terpisah yang tidak sesuai.
• Jangan menggambar ulang bentuk huruf Arab menggunakan geometri SVG.
• Gunakan SVG hanya untuk pointer, garis, outline, dan highlight di sekitar teks.

8.3 Transliterasi dan arti

• Transliterasi adalah pendukung, bukan pengganti teks Arab.
• Arti bahasa Indonesia harus alami dan kontekstual.
• Jika kata memiliki beberapa makna, pilih makna yang sesuai contoh.
• Jangan menyatakan satu arti sebagai satu-satunya makna jika tidak tepat.
• Jangan mencampur sistem transliterasi tanpa alasan.

8.4 Tata bahasa

Jika topik menyentuh nahwu, sharaf, atau struktur kalimat:

• Tampilkan kaidah dengan bahasa sederhana.
• Gunakan contoh singkat.
• Sorot bagian yang sedang dijelaskan.
• Pastikan label gramatikal sesuai contoh.
• Jangan membuat diagram dengan relasi gramatikal keliru.
• Hindari terlalu banyak istilah teknis dalam satu scene.
• Pastikan penggunaan istilah seperti مبتدأ, خبر, فعل, فاعل, dan مفعول به sesuai materi.

8.5 Audio

• Jangan mengklaim audio pelafalan tersedia jika tidak ada.
• Jika Voice Over hanya berupa teks, timing adalah estimasi.
• Jika audio tersedia, gunakan durasi dan timing aktual bila workflow dapat menganalisisnya.
• Jangan mensimulasikan audio melalui animasi yang tidak relevan.
• Jangan memaksakan animasi per kata jika timing audio tidak diketahui.

9. IKON DAN TEKS INFOGRAFIS

Setiap scene harus mempertimbangkan ikon atau simbol relevan dan teks infografis pendukung. Keduanya tidak wajib muncul dalam setiap beat jika mengganggu fokus.

9.1 Gaya ikon

• Ikon garis (stroke), bukan solid. Stroke 3–4px pada ukuran 56px, stroke-linecap="round", stroke-linejoin="round", fill="none".
• Semua ikon dalam satu video memakai ketebalan dan gaya yang sama.
• Ikon ditempatkan di dalam icon tile (Bagian 7.8) atau di dalam pill badge (28px).
• Warna ikon mengikuti registri konsep (emas, hijau, atau merah).
• Ikon di dalam badge gradien berwarna hitam.

9.2 Pemilihan ikon

Ikon berfungsi sebagai kosakata visual yang konsisten: satu ikon = satu makna sepanjang video.

Contoh pemetaan (pilih berdasarkan materi aktual, bukan otomatis):

• Identitas / makna inti: kartu ID atau sidik jari.
• Lokasi / posisi dalam kalimat: target (bullseye).
• Keamanan / aturan: gembok.
• Kategori / label kata: tag.
• Dokumen / teks sumber: lembar dokumen.
• Kosakata benda: ikon objek terkait.
• Tempat: ikon lokasi atau bangunan.
• Makanan/minuman: ikon relevan.
• Salam/perkenalan dan tanya-jawab: bubble percakapan atau dua figur sederhana.
• Mendengar: headphone atau gelombang audio jika relevan.
• Membaca/menulis: buku atau pena.
• Huruf dan harakat: teks Arab asli dengan pointer atau highlight (bukan ikon huruf).
• Kata ganti: node atau figur dengan label yang tepat.
• Tunggal/jamak: satu objek dibandingkan beberapa objek.
• Susunan kalimat: blok kata dan connector.
• Jawaban benar: check badge.
• Kesalahan umum: simbol peringatan atau silang merah secara selektif.
• Latihan: tanda tanya atau pilihan jawaban.
• Ringkasan: simbol atau diagram inti pelajaran.

9.3 Implementasi ikon

• Gunakan SVG inline dalam HTML dengan viewBox yang sesuai.
• Pastikan ikon terbaca pada ukuran kecil.
• Jangan menggunakan emoji sebagai pengganti ikon profesional.
• Jangan memakai karakter Unicode acak sebagai ikon.
• Jangan bergantung pada library ikon yang belum dipastikan tersedia.
• Jangan menggunakan gambar generik yang membuat arti kata ambigu.
• Untuk animasi gambar-garis, gunakan pathLength="1" dan stroke-dasharray/stroke-dashoffset yang dikendalikan GSAP.

9.4 Ikon dan label

Jika makna ikon tidak langsung jelas, tambahkan label mono kapital pendek. Tempatkan label dekat dengan objek terkait. Jangan menggunakan ikon hanya sebagai ornamen.

9.5 Jenis teks infografis

Gunakan seperlunya:

• Headline (putih + satu kata ungu).
• Kata atau frasa Arab.
• Arti bahasa Indonesia.
• Transliterasi.
• Label kategori (mono kapital).
• Penanda harakat.
• Contoh kalimat.
• Bubble dialog.
• Callout.
• Label pola gramatikal.
• Pilihan jawaban.
• Penanda jawaban benar.
• Ringkasan singkat.

Aturan ringkas:

• Headline idealnya 2–5 kata.
• Label umumnya 1–4 kata.
• Arti harus ringkas tanpa kehilangan makna.
• Contoh Arab jangan terlalu panjang.
• Jangan menampilkan paragraf panjang.
• Jangan mengulang headline tanpa menambah informasi.
• Jangan menampilkan terlalu banyak kata baru sekaligus.
• Jangan memenuhi layar dengan transliterasi.

10. POLA INFOGRAFIS

Pilih pola sesuai kebutuhan materi.

1. Kinetic Learning Hook — judul (putih + satu kata ungu), pertanyaan, dan petunjuk visual.
2. Arabic Word Reveal — kata Arab muncul di window card, kemudian arti (pill hijau) atau transliterasi.
3. Vocabulary Card — window card berisi Arab, arti, dan opsi transliterasi atau icon tile.
4. Letter / Harakat Focus — teks Arab dengan outline, underline, atau pointer emas.
5. Meaning Association — hubungan kata dengan arti atau objek kontekstual.
6. Conversation Bubbles — dialog dengan avatar dan warna penutur yang jelas.
7. Word-to-Sentence Transformation — kata berubah menjadi bagian dari kalimat.
8. Grammar Highlight — contoh kalimat dengan bagian gramatikal yang disorot dan bracket.
9. Pattern / Morphology Layout — pola sharaf atau perubahan bentuk kata.
10. Comparison / Split View — dua kartu berdampingan untuk bentuk yang mudah tertukar.
11. Step-by-Step Build — susunan kalimat dibangun bertahap.
12. Everyday Context — ilustrasi situasi penggunaan ungkapan.
13. Quick Recall / Mini Quiz — pertanyaan, pilihan pill, dan pengungkapan jawaban dengan check badge.
14. Takeaway Lockup — satu pesan utama sebagai penutup.
15. Equation Cards — kartu konsep A = kartu B + kartu C dengan tanda = dan + di antaranya, untuk menjelaskan komposisi konsep.
16. Check Table — tabel perbandingan dua konsep dengan check badge dan tanda minus.
17. Subset Circle — lingkaran dalam lingkaran untuk “bagian dari kategori yang lebih luas”.
18. Dim & Strike — daftar istilah yang diredupkan dan dicoret merah, lalu satu hubungan inti menyala.
19. Segmented Breakdown — bracket dan icon tile di bawah kata atau kalimat untuk menandai bagian-bagiannya (hanya jika pembagian diverifikasi dan shaping tidak rusak).
20. Everyday Metaphor Pair — dua objek fisik berdampingan (misalnya kartu dan amplop) sebagai analogi, dengan label mono “IDENTIFIES / TELLS” yang disesuaikan materi.
21. Window Stack — beberapa window card dengan satu konsep yang sama, dihubungkan konektor putus-putus ke satu kartu hasil.

Jangan menggunakan pola yang sama secara otomatis. Pilih representasi paling sederhana yang tetap menjelaskan materi secara benar.

11. VISUAL STORYTELLING DAN BEAT NARASI

11.1 Satu beat, satu tugas visual

Untuk setiap beat, tentukan:

• Pesan belajar.
• Kata, huruf, harakat, atau kaidah utama.
• Teks Arab.
• Arti dan transliterasi jika diperlukan.
• Ikon atau konteks visual.
• Pola infografis.
• Hubungan visual yang harus terlihat.
• Animasi yang membantu pemahaman.
• Informasi yang tetap terlihat selama beat.

Beberapa beat boleh berada dalam satu scene jika komposisi berkembang secara bertahap.

11.2 Urutan storytelling

Gunakan alur yang sesuai topik:

1. Hook.
2. Pengenalan.
3. Pemahaman.
4. Konteks.
5. Recall.
6. Takeaway.

Tidak semua topik memerlukan seluruh tahap, tetapi alur harus mudah diikuti.

11.3 Visual mengikuti narasi

Ketika penjelasan berubah, visual harus berubah secara bermakna:

• Kata Arab diperkenalkan.
• Arti diungkapkan.
• Huruf atau harakat difokuskan.
• Contoh kalimat dibangun.
• Giliran dialog berpindah.
• Bagian gramatikal disorot.
• Pilihan latihan muncul.
• Jawaban diungkapkan.
• Materi diringkas.

Jangan mempertahankan layar statis ketika narasi telah berpindah konsep. Namun, jangan mengganti visual terlalu cepat sehingga penonton tidak sempat membaca.

12. TIMELINE 90 DETIK DAN SISTEM SCENE HYPERFRAMES

Durasi harus tepat 90 detik.

Pada 30 FPS:

frame = detik × 30

Frame valid: 0–2699.

Gunakan sekitar 7–12 scene sebagai titik awal. Jangan membuat scene terlalu singkat hanya untuk memenuhi jumlah tertentu.

12.1 Struktur scene

Setiap scene harus memiliki:

• ID scene.
• Waktu mulai dan selesai.
• Frame awal dan akhir.
• Bagian Voice Over.
• Tujuan belajar.
• Teks Arab.
• Arti dan transliterasi bila diperlukan.
• Ikon dan label.
• Pola visual.
• Animasi masuk.
• Perubahan visual selama scene.
• Animasi keluar.

12.2 Implementasi timing HyperFrames

Gunakan metadata dan atribut timing HyperFrames yang sesuai dengan dokumentasi versi terpasang.

Untuk elemen visual yang memerlukan pengelolaan sebagai clip, gunakan struktur timing yang tepat, termasuk atribut seperti data-start, data-duration, dan data-track-index bila sesuai.

Aturan:

• Gunakan detik untuk nilai waktu pada atribut HyperFrames yang memang menggunakan detik.
• Gunakan frame untuk perhitungan dan dokumentasi timeline produksi.
• Jangan mencampur frame dengan detik dalam atribut timing.
• Jangan membuat atribut durasi yang tidak didukung.
• Pastikan seluruh komposisi mencakup rentang 0–90 detik.
• Pastikan tidak ada celah atau tumpang tindih yang tidak disengaja.
• Pastikan metadata komposisi sesuai dengan versi HyperFrames yang terpasang.

12.3 Sinkronisasi GSAP dan HyperFrames

GSAP digunakan untuk mengatur animasi, sedangkan HyperFrames mengatur rendering komposisi.

• Setiap scene harus memiliki waktu yang konkret.
• Setiap animasi harus memiliki posisi pada timeline GSAP.
• Durasi GSAP harus sesuai dengan timing scene.
• Timeline harus dapat di-seek ke waktu arbitrer.
• Animasi harus menghasilkan kondisi visual yang benar pada waktu yang diminta renderer.
• Jangan mengandalkan playback real-time untuk menentukan posisi elemen.
• Jangan mengandalkan callback yang hanya berjalan setelah animasi selesai dalam playback normal.
• Jangan menggunakan state yang bergantung pada jumlah frame yang telah dimainkan.
• Jangan membuat durasi animasi berbeda antara preview dan render.

Jika metadata timing HyperFrames dan GSAP mengendalikan aspek yang sama, tetapkan satu sumber kebenaran untuk setiap tanggung jawab. Hindari dua sistem yang saling menimpa posisi, opacity, atau transform elemen.

12.4 Sinkronisasi Voice Over

• Pertahankan urutan informasi.
• Tampilkan kata Arab ketika diperkenalkan.
• Tampilkan arti setelah atau bersamaan dengan pengenalan.
• Sorot huruf, harakat, atau kata saat dijelaskan.
• Berikan waktu baca yang cukup.
• Jangan menampilkan kesimpulan terlalu awal kecuali sebagai hook yang sesuai narasi.
• Jika tidak ada audio, nyatakan bahwa timing adalah estimasi.
• Jangan memaksakan setiap kata Voice Over memiliki animasi tersendiri.

13. MOTION LANGUAGE — GSAP

Seluruh animasi utama menggunakan GSAP Timeline yang dapat di-seek secara deterministik.

13.1 Prinsip dasar

• Gunakan gsap.timeline({ paused: true }) untuk timeline animasi utama.
• Gunakan posisi waktu eksplisit pada timeline.
• Gunakan fromTo(), to(), set(), dan label timeline sesuai kebutuhan.
• Gunakan easing yang sederhana dan konsisten.
• Pastikan setiap elemen memiliki nilai awal dan akhir yang jelas.
• Hindari ketergantungan pada waktu sistem atau playback real-time.
• Jangan menjalankan timeline secara mandiri dengan play() sebagai mekanisme utama sinkronisasi render.
• Jangan menggunakan CSS keyframes untuk menggantikan GSAP pada animasi yang harus sinkron dengan timeline video.

13.2 Arsitektur GSAP

Buat satu timeline master untuk keseluruhan video atau struktur timeline per scene yang dapat disinkronkan dengan benar.

Gunakan nama timeline yang jelas dan registrasikan melalui mekanisme timeline yang didukung HyperFrames versi terpasang.

Jika versi yang digunakan memakai registry window.__timelines, ikuti nama dan kontrak registrasinya sesuai dokumentasi serta skill HyperFrames/GSAP yang tersedia. Jangan mengasumsikan nama properti atau kontrak API tanpa verifikasi.

Timeline wajib:

• Dapat di-seek ke waktu tertentu.
• Dapat menghasilkan tampilan yang benar tanpa memainkan semua frame sebelumnya.
• Menggunakan posisi waktu eksplisit.
• Tidak bergantung pada callback yang hanya dipanggil saat playback normal.
• Tidak mengakumulasi transform atau opacity ketika waktu yang sama diproses berulang kali.
• Memiliki durasi dan timing yang sesuai dengan komposisi.

Gunakan helper lokal jika membantu keterbacaan kode, tetapi jangan menambahkan abstraksi berlebihan.

13.3 Motion signature neon-glow

Gerakan bersifat bersih, cepat, dan berakhir stabil. Gunakan nilai berikut sebagai titik awal dan sesuaikan dengan ritme narasi.

Aturan tambahan:

• Setelah reveal, beri waktu hold minimal ±1.2 detik sebelum perubahan berikutnya.
• Pulse glow bersifat opsional, terbatas dan berulang dalam jumlah tetap sesuai durasi beat. Jangan memakai repeat: -1.
• Efek ketik (typewriter) hanya untuk string Latin atau kode. Jangan pernah untuk teks Arab.
• Gunakan satu keluarga easing utama (power3 / power2) dan batasi back.out untuk badge dan check.
• Jangan memakai bounce, shake, glitch, spin, atau zoom ekstrem.

13.4 Teks Arab

• Gunakan fade-in, pergeseran pendek, atau reveal berbasis container (clip/mask).
• Jaga agar bentuk huruf dan harakat tetap utuh.
• Jangan menganimasikan huruf satu per satu jika merusak shaping.
• Gunakan highlight overlay yang mengikuti bagian yang sedang dijelaskan.
• Sisakan waktu hold yang cukup untuk membaca.
• Jangan mengubah letter-spacing atau scale per huruf pada teks Arab.

13.5 Arti dan transliterasi

• Muncul setelah kata Arab dikenalkan atau sesuai strategi pembelajaran.
• Gunakan fade atau pergeseran pendek.
• Pisahkan arah teks Latin dan Arab.
• Jangan menggerakkan arti terlalu jauh dari kata terkait.

13.6 Ikon

• Gunakan fade atau scale-in singkat, atau gambar-garis pada stroke ikon.
• Highlight (naikkan glow) saat konsep diperkenalkan.
• Ubah status hanya jika bermakna.
• Hindari bounce atau pulse berulang pada semua ikon.

13.7 Diagram

• Tampilkan elemen mengikuti urutan penjelasan.
• Gunakan connector untuk relasi yang benar.
• Sorot node yang sedang dibahas, redupkan yang lain.
• Jangan menampilkan diagram kompleks sekaligus jika pengungkapan bertahap lebih jelas.

13.8 Dialog dan latihan

• Tampilkan giliran percakapan secara berurutan.
• Bedakan penutur dengan jelas (warna avatar dan border).
• Berikan ruang visual sebelum jawaban latihan muncul.
• Jangan membuat indikator hitung mundur palsu.

13.9 Transisi

Gunakan:

• Fade.
• Short slide.
• Container reveal.
• Crossfade.
• Focus shift (dim dan glow).
• Perubahan layout.
• Highlight transition.

Hindari glitch, spin berlebihan, zoom ekstrem, shake tanpa alasan, dan efek dekoratif yang mengganggu keterbacaan.

Semua gerakan harus deterministik, berbasis timeline, memiliki tujuan pembelajaran, berakhir pada posisi stabil, dan tidak merusak keterbacaan Arab.

14. STRUKTUR PROYEK HYPERFRAMES

Gunakan struktur berikut sebagai target. Sesuaikan dengan struktur proyek nyata yang dihasilkan atau dibutuhkan HyperFrames.

arabic-learning-90s/
├── meta.json
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── animation.js
├── assets/
│   ├── fonts/
│   │   ├── arabic-font.woff2
│   │   ├── title-font.woff2
│   │   └── mono-font.woff2
│   ├── logo.svg            (opsional, milik pengguna)
│   └── voice-over.mp3
├── reference/              (opsional, frame referensi gaya)
└── renders/

Folder renders/ digunakan untuk output video dan tidak wajib dibuat sebelum render.

Jika ada aset yang tidak digunakan, jangan membuatnya hanya demi memenuhi struktur contoh.

14.1 index.html

Berisi:

• Metadata dokumen.
• Root komposisi HyperFrames.
• Struktur scene.
• Judul dan teks.
• Container RTL.
• Window card, vocabulary card, dialog, diagram, dan label.
• SVG inline.
• Elemen audio jika diperlukan.
• Referensi CSS dan JavaScript.

Gunakan HTML semantik dan valid. Jangan membuat komponen React.

14.2 css/styles.css

Berisi:

• Design tokens (Bagian 7.3).
• Background dan surface.
• @font-face dan font stack.
• Layout 1920 × 1080 dan grid Bagian 7.7.
• Komponen Bagian 7.8 (window card, pill badge, icon tile, check badge, bubble, bracket, dsb.).
• Tipografi Arab dan Latin.
• Container RTL.
• Level glow.
• Aturan overflow dan keterbacaan.

CSS bertanggung jawab atas styling. Gunakan GSAP untuk gerakan yang memerlukan timing video presisi.

14.3 js/animation.js

Berisi:

• Inisialisasi GSAP.
• Timeline master atau timeline scene.
• Label timeline.
• Animasi masuk dan keluar.
• Highlight, glow, dan transformasi.
• Integrasi dengan mekanisme seek HyperFrames.
• Registry timeline sesuai dokumentasi versi yang digunakan.

Jangan menyimpan seluruh implementasi dalam satu file JavaScript raksasa jika pembagian file membantu keterbacaan dan tidak menambah build step yang tidak perlu.

14.4 meta.json

Gunakan metadata yang dihasilkan atau didukung HyperFrames. Jangan mengarang field wajib.

Jika CLI membuat metadata secara otomatis, pertahankan format tersebut dan ubah hanya nilai yang memang didukung.

15. IMPLEMENTASI HTML DAN CSS

15.1 Root composition

Buat root komposisi yang memiliki identitas, dimensi, dan metadata sesuai kontrak HyperFrames.

Pastikan:

• Komposisi memiliki ID yang konsisten.
• Resolusi target 1920 × 1080.
• Background #050505.
• Tidak ada margin default browser.
• Tidak ada scrollbar yang terlihat.
• Seluruh visual berada di dalam canvas.
• Ukuran layout stabil saat render.
• Font dan aset dimuat sebelum frame penting ditangkap.

Jangan menggunakan React root atau komponen Remotion.

15.2 HTML scene

Setiap scene harus memiliki struktur yang jelas, misalnya:

<section class="scene scene--word" id="scene-word">
  <h1 class="title">Kenali <span class="accent">kata</span> ini</h1>

  <article class="window window--gold">
    <header class="window__bar">
      <i class="dot dot--on"></i><i class="dot"></i><i class="dot"></i>
      <span class="window__title">KOSAKATA</span>
    </header>

    <div class="window__body">
      <div class="icon-tile icon-tile--gold"><!-- SVG ikon garis --></div>

      <div class="arabic-block" lang="ar" dir="rtl">
        <!-- Teks Arab yang sudah diverifikasi -->
      </div>

      <p class="translit"><!-- transliterasi bila perlu --></p>

      <span class="badge badge--green">
        <!-- SVG kecil --> <span lang="id"><!-- arti sesuai materi --></span>
      </span>
    </div>
  </article>
</section>

Ini hanya pola struktur HTML, bukan konten final. Ganti placeholder dengan materi yang telah diverifikasi.

15.3 CSS

• Gunakan CSS variables untuk warna, font, spacing, radius, border, dan glow.
• Gunakan absolute positioning, flexbox, atau grid sesuai kebutuhan.
• Gunakan ukuran yang sesuai dengan kanvas 1920 × 1080.
• Jaga konsistensi alignment dan tinggi panel.
• Sisakan ruang untuk harakat.
• Gunakan overflow secara hati-hati.
• Jangan mengandalkan layout yang berubah karena viewport browser secara tidak terkontrol.
• Jangan memakai Tailwind atau stylesheet framework yang membutuhkan setup tambahan jika tidak diperlukan.

Contoh pola komponen (titik awal, sesuaikan):

.title {
  font: 900 100px/1 "Montserrat", "Plus Jakarta Sans", Geist, Inter, sans-serif;
  letter-spacing: -0.04em;
  color: var(--text);
  text-align: center;
}
.title .accent {
  color: var(--purple);
  text-shadow: 0 0 28px rgba(168, 85, 247, .55);
}

.window {
  border-radius: 28px;
  background: var(--panel);
  border: 2px solid var(--gold);
  box-shadow: 0 0 40px rgba(255, 201, 60, calc(var(--glow, .15)));
}
.window--green { border-color: var(--green); box-shadow: 0 0 40px rgba(46, 229, 157, calc(var(--glow, .15))); }

.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dot-off); }
.dot--on { background: var(--gold); }

.badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 28px; border-radius: 18px;
  font: 800 48px/1 "Montserrat", Geist, sans-serif; color: #0A0A0A;
}
.badge--gold  { background: var(--grad-gold); }
.badge--green { background: var(--grad-green); }

.label {
  font: 700 26px/1 "JetBrains Mono", "Geist Mono", Consolas, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
}

.arabic-block {
  direction: rtl; font-family: "Noto Naskh Arabic", "Amiri", "Noto Sans Arabic", Arial, sans-serif;
  font-size: 160px; line-height: 1.8; letter-spacing: 0; text-transform: none;
}

--glow diubah oleh GSAP agar glow bergerak mengikuti timeline.

15.4 SVG

Gunakan inline SVG untuk:

• Ikon garis.
• Panah.
• Connector.
• Node.
• Pointer.
• Outline highlight.
• Grafik sederhana.

Pastikan semua SVG valid. Jangan membuat teks Arab menjadi path manual.

16. DETERMINISTIC RENDERING DAN SEEKABILITY

Bagian ini sangat penting.

HyperFrames melakukan rendering video berbasis frame. Animasi GSAP harus dapat menghasilkan keadaan visual yang benar saat renderer meminta waktu tertentu, tanpa mengharuskan browser memainkan seluruh animasi dari awal.

16.1 Aturan deterministik

• Gunakan timeline GSAP dengan posisi waktu eksplisit.
• Pastikan posisi, opacity, scale, glow, dan transform dapat ditentukan pada waktu yang diminta.
• Jangan mengandalkan requestAnimationFrame() buatan sendiri untuk menentukan progress animasi.
• Jangan menggunakan setTimeout() atau setInterval() untuk mengganti scene.
• Jangan menggunakan waktu sistem sebagai sumber animasi.
• Jangan menggunakan nilai acak tanpa seed deterministik yang tetap.
• Jangan mengandalkan event mouse atau keyboard untuk menentukan visual final.
• Jangan mengandalkan urutan playback normal.
• Jangan menumpuk transform secara inkremental pada setiap pemanggilan seek.
• Jangan menggunakan state yang bergantung pada frame sebelumnya.
• Jangan memakai animasi berulang tak terbatas (repeat: -1).

16.2 Integrasi frame adapter

Ikuti mekanisme frame adapter atau integrasi seek GSAP yang didukung versi HyperFrames terpasang.

Sebelum mengimplementasikan integrasi:

1. Periksa dokumentasi HyperFrames.
2. Baca skill HyperFrames dan GSAP jika tersedia.
3. Identifikasi cara renderer mengatur waktu komposisi.
4. Identifikasi cara timeline GSAP didaftarkan dan di-seek.
5. Gunakan kontrak resmi tersebut.
6. Jangan membuat API sinkronisasi sendiri lalu menganggapnya kompatibel.

Jika proyek hasil scaffold sudah memiliki adapter atau runtime bawaan, gunakan implementasi yang ada.

Jika menggunakan registry timeline seperti window.__timelines, pastikan cara pendaftaran, penamaan, dan pemanggilan seek sesuai versi yang terpasang.

16.3 Menghindari konflik timing

HyperFrames mengelola waktu clip dan komposisi; GSAP mengelola interpolasi visual.

Tentukan secara jelas:

• Timing keberadaan elemen.
• Timing animasi elemen.
• Timing transisi antarscene.
• Timing audio.
• Timing akhir komposisi.

Jangan membiarkan atribut clip dan GSAP mengubah properti yang sama dengan cara yang saling bertentangan.

16.4 Pengujian deterministik

Jika lingkungan memungkinkan:

• Render atau snapshot frame awal.
• Render atau snapshot frame di tengah animasi.
• Render atau snapshot frame setelah animasi selesai.
• Seek kembali ke frame sebelumnya.
• Pastikan tampilan identik saat frame yang sama dipanggil berulang kali.
• Periksa apakah seluruh scene dan audio berada pada timing yang benar.

Jangan mengklaim hasil deterministik telah diuji jika belum benar-benar diperiksa.

17. KETERBACAAN DAN KONTROL KEPADATAN

Pastikan:

• Kata Arab utama dapat dibaca dengan sekali pandang (≥ 120px).
• Harakat tidak bertabrakan atau terpotong.
• Arti bahasa Indonesia (≥ 44px) dekat dengan kata terkait.
• Transliterasi (≥ 32px) tidak mendominasi.
• Label mono (≥ 24px) terbaca pada ukuran pemutaran kecil.
• Ikon dapat dikenali dengan cepat.
• Label berada dekat dengan objeknya.
• Contoh kalimat tidak terlalu panjang.
• Callout tidak menutupi teks Arab.
• Connector tidak memotong teks.
• Informasi penting tidak terlalu dekat dengan tepi (zona aman 220px kiri-kanan).
• Warna aksen memiliki fungsi konsisten sesuai registri konsep.
• Tidak terlalu banyak elemen aktif sekaligus (maksimal 1–2 elemen bercahaya tinggi).
• Glow tidak menurunkan kontras teks atau menutupi harakat.
• Setiap scene memiliki focal point.
• Visual tetap terbaca pada ukuran pemutaran lebih kecil.

Jangan memaksakan semua informasi dalam satu frame. Gunakan progressive disclosure dan berikan waktu baca yang realistis.

Aturan cepat: jika penonton harus membaca terlalu banyak elemen sekaligus, kurangi teks sekunder, sederhanakan diagram, redupkan panel non-aktif, atau pecah informasi menjadi beberapa beat.

18. WORKFLOW PRODUKSI

Lakukan langkah berikut sebelum menyelesaikan proyek.

Langkah A — Analisis materi

Identifikasi:

• Tujuan belajar.
• Tingkat pembelajar.
• Pesan utama.
• Beat Voice Over.
• Kata/frasa Arab utama.
• Harakat atau bentuk yang perlu diperhatikan.
• Arti bahasa Indonesia.
• Transliterasi bila diperlukan.
• Contoh atau konteks.
• Kesimpulan yang harus diingat.
• Registri konsep (warna, ikon, badge per konsep utama).

Berikan hasil analisis produksi yang relevan tanpa uraian internal panjang.

Langkah B — Validasi bahasa

Periksa konsistensi teks Arab, harakat, arti, transliterasi, dan contoh.

Jika diperlukan dan riset tersedia, gunakan sumber tepercaya. Jangan diam-diam mengarang atau mengoreksi bentuk yang tidak pasti.

Langkah C — Susun visual per beat

Untuk setiap beat tentukan:

• Judul (putih + satu kata ungu).
• Teks Arab.
• Arti/transliterasi.
• Ikon (di icon tile atau badge).
• Pola infografis dan komponen.
• Hubungan visual.
• Animasi.
• Durasi baca.

Langkah D — Susun timeline

Tentukan waktu mulai dan selesai setiap scene. Pastikan total tepat 90 detik.

Langkah E — Periksa proyek HyperFrames

Periksa:

• Versi Node.js.
• CLI HyperFrames yang tersedia.
• Dependensi GSAP.
• Cara integrasi GSAP yang didukung.
• Struktur proyek yang sudah ada.
• Aset lokal.
• Font Arab, judul, dan mono (tersedia secara lokal).
• Dukungan audio.
• Mekanisme preview dan render.

Jika proyek belum ada, gunakan workflow scaffold HyperFrames yang sesuai dokumentasi saat ini. Jangan mengasumsikan folder proyek sudah terinisialisasi.

Langkah F — Implementasikan HTML dan CSS

Buat semua scene, layout, teks, window card, dialog, diagram, ikon, dan label sesuai Bagian 7.

Langkah G — Implementasikan GSAP

Buat timeline dan animasi untuk semua scene sesuai Bagian 13. Pastikan timeline dapat di-seek secara deterministik.

Langkah H — Integrasikan audio

Jika file audio tersedia, masukkan ke proyek menggunakan struktur audio yang didukung HyperFrames.

Pastikan durasi audio tidak bertentangan dengan durasi video. Jika audio lebih panjang atau lebih pendek, tangani secara eksplisit.

Jangan mengubah atau memotong narasi tanpa alasan yang jelas.

Langkah I — Preview

Jalankan HyperFrames Preview dan periksa:

• Komposisi.
• Timing.
• RTL.
• Font.
• Harakat.
• Glow dan kontras.
• Transisi.
• Sinkronisasi audio.
• Frame akhir.

Langkah J — Validasi dan render

Jalankan perintah lint dan check yang tersedia pada versi CLI terpasang. Perbaiki error sebelum render.

Render MP4 hanya setelah preview ditinjau dan dinyatakan siap.

Jangan mengklaim render berhasil jika perintah render belum benar-benar dijalankan.

19. FORMAT OUTPUT WAJIB

Berikan hasil akhir dalam empat bagian.

BAGIAN 1 — VISUAL DIRECTION

Jelaskan secara ringkas dan spesifik:

• Konsep visual utama (neon-glow dark) dan tujuan belajar.
• Registri konsep: warna, ikon, dan badge per konsep.
• Palet warna yang dipakai.
• Hierarki tipografi judul, label mono, Arab, dan Latin.
• Font yang digunakan atau perlu dipasang.
• Ikon utama yang relevan.
• Kata/frasa Arab, arti, dan transliterasi.
• Pola infografis dan komponen yang dipilih.
• Pendekatan animasi GSAP dan penggunaan glow.
• Strategi timeline HyperFrames.
• Cara menjaga RTL dan keterbacaan harakat.

Jelaskan keputusan desain berdasarkan naskah.

BAGIAN 2 — TIMELINE & SCENE PLAN

Gunakan tabel:

Ketentuan:

• Durasi tepat 90 detik.
• Total 2700 frame.
• Frame valid 0–2699.
• Tidak ada celah atau tumpang tindih yang tidak disengaja.
• Setiap scene mempunyai focal point.
• Kata Arab dan arti ditentukan secara konkret.
• Ikon, komponen, dan pola visual ditentukan secara konkret.
• Waktu baca memadai.
• Animasi mengikuti perkembangan narasi.
• Timing dinyatakan sebagai estimasi jika audio tidak tersedia.

Jangan hanya menulis “tambahkan ikon” atau “gunakan diagram”. Sebutkan elemen yang benar-benar akan dibuat.

BAGIAN 3 — COMPLETE HYPERFRAMES PROJECT

Implementasikan proyek lengkap, bukan sekadar memberikan potongan kode.

File utama yang harus tersedia sesuai kebutuhan:

• index.html
• css/styles.css
• js/animation.js
• meta.json atau metadata proyek yang digunakan oleh scaffold HyperFrames.

Tambahkan aset lokal yang benar-benar diperlukan.

index.html

Harus berisi:

• Root composition HyperFrames.
• Struktur seluruh scene.
• Judul.
• Teks Arab.
• Arti dan transliterasi.
• Ikon SVG garis.
• Window card, badge, dialog, diagram, connector, dan highlight.
• Elemen audio jika diperlukan.
• Referensi stylesheet dan JavaScript.
• Metadata timing yang valid sesuai HyperFrames.

css/styles.css

Harus berisi:

• Design tokens.
• Background.
• Font.
• Layout dan grid.
• Komponen (window card, pill badge, icon tile, check badge, bubble, bracket, dsb.).
• Bubble percakapan.
• Tipografi Arab dan Latin.
• Gaya ikon dan diagram.
• Level glow.
• Aturan RTL.
• Aturan overflow.
• Styling seluruh scene.

js/animation.js

Harus berisi:

• Inisialisasi GSAP.
• Timeline master atau timeline scene.
• Animasi masuk dan keluar.
• Reveal.
• Highlight dan glow.
• Transformasi.
• Sinkronisasi timeline dengan mekanisme seek HyperFrames.
• Registry timeline jika diwajibkan versi yang digunakan.

Aturan implementasi

• Kode harus lengkap.
• Tidak boleh menggunakan placeholder atau TODO sebagai pengganti implementasi penting.
• Jangan mengganti implementasi dengan pseudocode.
• Jangan menggunakan React, JSX, TSX, atau Remotion.
• Jangan memotong kode demi menghemat output.
• Jangan membuat dependensi eksternal yang tidak diperlukan.
• Jangan mengasumsikan aset tersedia jika belum diperiksa.
• Jangan mengklaim pengujian telah berhasil jika belum dijalankan.

Jika Anda memiliki akses filesystem melalui Claude Code, buat file proyek secara langsung. Jika tidak, tampilkan isi lengkap setiap file dengan nama dan path yang jelas.

BAGIAN 4 — HYPERFRAMES PREVIEW, VALIDATION & RENDER

Berikan instruksi sesuai struktur proyek yang benar-benar dibuat.

Contoh workflow CLI:

npx hyperframes doctor
npx hyperframes preview

Setelah komposisi selesai:

npx hyperframes lint
npx hyperframes check

Setelah preview ditinjau dan siap dirender:

npx hyperframes render --output renders/arabic-learning-90s.mp4

Sesuaikan perintah jika versi HyperFrames yang terpasang menggunakan opsi berbeda. Jangan menjalankan render final otomatis sebelum preview ditinjau.

Jelaskan:

• Direktori tempat perintah dijalankan.
• Cara membuka HyperFrames Studio.
• Cara memeriksa timeline.
• Cara memastikan durasi video.
• Cara mengatasi font Arab (dan font judul/mono) yang belum terpasang.
• Lokasi file MP4 setelah render berhasil.
• Hasil validasi yang benar-benar dijalankan.
• Batasan yang belum diuji.

20. FINAL QUALITY CHECKLIST

A. Pembelajaran dan konten

• Tujuan belajar jelas dan realistis.
• Pesan utama Voice Over terwakili.
• Urutan penjelasan dipertahankan.
• Tidak ada kosakata, arti, harakat, atau kaidah yang dibuat-buat.
• Contoh sesuai tingkat pembelajar.
• Setiap scene memiliki tujuan komunikasi.
• Materi tidak terlalu padat.

B. Bahasa Arab dan tipografi

• String Arab Unicode benar.
• RTL diterapkan dengan benar.
• Teks Latin dan Indonesia tetap LTR.
• Huruf dan harakat tidak terpotong.
• Shaping dan ligatur tidak dirusak animasi, letter-spacing, atau pewarnaan segmen.
• Arti sesuai konteks.
• Transliterasi konsisten.
• Font Arab, judul, dan mono tersedia atau kebutuhan pemasangannya dijelaskan.
• Tidak ada teks Arab yang dibalik manual.
• Tidak ada text-transform atau letter-spacing negatif pada teks Arab.

C. Ikon dan infografis

• Ikon memiliki fungsi semantik dan gaya garis yang seragam.
• SVG valid.
• Label membantu mengidentifikasi ikon.
• Teks Arab dan arti memiliki hubungan visual jelas.
• Highlight menunjuk bagian yang benar.
• Tidak ada emoji sebagai pengganti ikon profesional.
• Tidak ada elemen dekoratif tanpa fungsi.
• Tidak ada teks generik yang tidak relevan.

D. Visual design (neon-glow dark)

• Background near-black #050505.
• Judul putih dengan satu kata kunci ungu bercahaya.
• Window card, pill badge, dan icon tile mengikuti spesifikasi Bagian 7.8.
• Registri konsep dipatuhi: satu konsep = satu warna + satu ikon.
• Ungu hanya untuk kata kunci judul.
• Glow selektif (maksimal 1–2 elemen aktif tinggi per beat).
• Kontras terjaga dan glow tidak menutupi harakat.
• Diagram memiliki relasi jelas.
• Setiap scene memiliki focal point.
• Layout tidak identik tanpa alasan.
• Tidak menyalin logo, brand, teks contoh, atau layout referensi secara identik.
• Referensi tidak diklaim telah diamati jika tidak dapat diakses.

E. Timeline

• Durasi tepat 90 detik.
• Frame rate 30 FPS.
• Total 2700 frame.
• Frame valid 0–2699.
• Timing HyperFrames valid.
• GSAP dapat di-seek.
• Animasi tidak melewati durasi.
• Teks memiliki waktu baca yang cukup.
• Timing disebut estimasi jika audio tidak diberikan.

F. HyperFrames dan GSAP

• Proyek menggunakan HTML, CSS, dan JavaScript.
• Struktur proyek valid.
• Metadata komposisi mengikuti kontrak HyperFrames.
• GSAP Timeline diinisialisasi dengan benar.
• Integrasi seek menggunakan mekanisme yang didukung.
• Tidak ada browser timer untuk menentukan timing video.
• Tidak ada ketergantungan pada playback normal.
• Tidak ada animasi repeat: -1.
• Tidak ada konflik antara timing clip dan GSAP.
• Seluruh visual dapat di-render secara deterministik.
• Tidak ada placeholder atau TODO penting.

G. Validasi dan render

• Dependensi dan versi diperiksa.
• Font Arab dipertimbangkan.
• Preview ditinjau.
• Lint dijalankan jika tersedia.
• Check dijalankan jika tersedia.
• Audio diperiksa jika digunakan.
• Durasi final diperiksa.
• Perintah render sesuai proyek.
• Lokasi output benar.
• Status pengujian dinyatakan dengan jujur.

Jika ada ketentuan yang belum terpenuhi, perbaiki sebelum menyatakan proyek siap.

21. ATURAN OUTPUT FINAL

• Gunakan bahasa Indonesia untuk penjelasan produksi.
• Penjelasan desain ringkas tetapi spesifik.
• Timeline harus konkret.
• Implementasi harus lengkap.
• Kata Arab, arti, transliterasi, ikon, dan teks infografis harus terlihat dalam komposisi sesuai kebutuhan materi.
• Setiap visual harus mendukung pembelajaran.
• Jangan memberikan beberapa alternatif yang tidak diminta.
• Jangan membuat gambar baru atau prompt image generator.
• Jangan menggunakan Remotion, React, JSX, atau TSX.
• Jangan mengklaim render berhasil jika belum dijalankan.
• Jangan mengklaim referensi telah diamati jika tidak dapat diakses.
• Jangan menghilangkan implementasi penting.
• Jangan mengklaim sinkronisasi presisi jika audio belum dianalisis.
• Jangan membuat API HyperFrames atau GSAP berdasarkan asumsi.
• Gunakan dokumentasi dan skill versi terpasang jika tersedia.
• Jika akses filesystem tersedia, implementasikan proyek secara langsung.

PRIORITAS TERTINGGI: hasilkan satu proyek HyperFrames lengkap menggunakan HTML, CSS, JavaScript, dan GSAP untuk video pembelajaran bahasa Arab berdurasi tepat 90 detik dengan gaya neon-glow dark (window card, pill badge, icon tile, kode warna semantik). Pastikan bahasa Arab akurat, RTL dan harakat terbaca, ikon relevan, timeline sinkron, animasi GSAP dapat di-seek secara deterministik, dan proyek dapat diperiksa melalui HyperFrames Preview sebelum dirender menjadi MP4.

MULAI PRODUKSI

Gunakan TOPIK VIDEO, TARGET PEMBELAJAR, TUJUAN BELAJAR, dan SCRIPT VOICE OVER yang diberikan.

1. Analisis setiap beat narasi.
2. Validasi kata/frasa Arab, arti, transliterasi, dan contoh.
3. Tetapkan registri konsep (warna, ikon, badge), lalu tentukan ikon, komponen, dan pola visual.
4. Susun timeline tepat 90 detik atau 2700 frame.
5. Periksa struktur dan kemampuan HyperFrames serta GSAP yang terpasang.
6. Implementasikan seluruh HTML, CSS, dan JavaScript sesuai design system Bagian 7.
7. Pastikan animasi dapat di-seek secara deterministik.
8. Jalankan preview, lint, dan check sesuai kemampuan lingkungan.
9. Tinjau hasil visual sebelum melakukan render final.
10. Laporkan hasil dan batasan pengujian secara jujur.

Mulai dari BAGIAN 1 — VISUAL DIRECTION, lanjutkan ke BAGIAN 2 — TIMELINE & SCENE PLAN, kemudian BAGIAN 3 — COMPLETE HYPERFRAMES PROJECT, dan akhiri dengan BAGIAN 4 — HYPERFRAMES PREVIEW, VALIDATION & RENDER.

Jangan meminta konfirmasi tambahan jika input sudah cukup. Jika ada informasi yang tidak tersedia, gunakan keputusan desain yang paling sederhana, relevan, dan akurat. Jangan menebak materi bahasa Arab yang belum dapat dipastikan.