⚡ Opus 5.5 Radar

## Hook
> Prompt "frame contract": minta Opus 5.5 tulis satu HTML dgn fungsi `renderFrame(t)` TULEN — setiap frame = fungsi masa t, jadi headless browser boleh render frame 0..359 dalam apa jua susunan dan hasilnya sama; itulah yang encoder video perlukan.

---

## Content

Pipeline reproduksibel (12s 1280x720 promo): Opus 5.5 tulis program yang melukis setiap frame, kemudian render program itu jadi MP4.

Idea satu ayat: **Minta Opus 5.5 bagi HTML dengan fungsi deterministik `renderFrame(t)` — BUKAN "sebuah video"** — kemudian biarkan headless browser panggil fungsi itu sekali per frame. Peraturan di separuh pertama prompt inilah yang menjadikan output boleh dirender frame-by-frame; cerita datang kedua, gaya terakhir.

**PROMPT (verbatim, dihantar tanpa edit):**

```
You are writing a program that renders a video. Output one complete, self-contained HTML file and nothing else.

Rules for the program (these make it renderable frame by frame):
1. A single <canvas> of exactly 1280x720, no CSS scaling, black page background.
2. Expose a global function window.renderFrame(t) that draws the frame at time t (seconds, 0 <= t < 12) from scratch. Everything on screen must be a pure function of t: no Date.now, no performance.now, no Math.random (use a seeded PRNG if you need noise), no accumulated state between calls, no requestAnimationFrame loop.
3. Also expose window.DURATION = 12 and window.FPS = 30. When the page is opened normally, play it once in a loop with requestAnimationFrame by calling renderFrame, so a human can preview it.
4. No external assets, fonts, images or libraries. Use system-ui for text.
5. The rhythm is 120 BPM: a beat every 0.5 s. Put every major cut, text entrance and impact on a beat time (a multiple of 0.5). List the beat plan as a comment at the top of the script.

The story (tell this, then decide the visuals):
A 12-second promo for "APIMODELS", an API gateway. Problem, then turn, then payoff:
- 0-3 s: a developer's screen is cluttered with many different API keys and SDK logos flying in from every side, overlapping, getting chaotic (draw them as simple rounded labels such as "image", "video", "LLM", "audio", "key_1", "key_2", "sdk", not real company logos).
- 3-4.5 s: everything snaps together on a beat and collapses into one glowing key.
- 4.5-9 s: from that one key, lines fan out to a grid of model cards that light up one per beat (label them "145 models", "image", "video", "LLM", "audio", "one endpoint").
- 9-12 s: clean end card: the word APIMODELS, the line "One key. Every model.", and "apimodels.app" small underneath; hold still for the last second.

Style: dark background, one accent colour (electric violet #7c5cff) plus white, motion with easing (easeOutCubic / easeInOutQuad written by you), subtle depth (scale and blur fall-off), no clutter in the final 3 seconds.

Before the code, do not explain. Return only the HTML.
```

**Renderer (render.mjs — Puppeteer, 25 baris):** load `promo.html`, matikan loop preview (`window.requestAnimationFrame = () => 0`), baca `DURATION`/`FPS`, kemudian loop `window.renderFrame(i/FPS)` + `canvas.toDataURL('image/png')` → tulis `frames/fNNNN.png`. Kemudian `ffmpeg` encode PNG sequence jadi H.264 dan mux audio.

**Kos sebenar (angka penulis, bukan benchmark):** call model ~7 minit; LaunchVideo laporkan ~4 minit dan ~90K input + 15K output token per film.

**Bila sesuai:** kinetic typography, UI walkthrough, animated chart, logo reveal, explainer, templat sosial yang boleh di-render semula dengan teks baharu. **SALAH** untuk apa-apa yang perlu nampak difilemkan — orang fotoreal, gerakan kamera semula jadi, kulit, fabrik, fizik. Tiada audio (tambah dgn ffmpeg). Anggap HTML sebagai kod yang belum diuji: render + periksa frame sebelum percaya.

## Hook
> Claude tak generate video — Claude TULIS CODE, render setiap frame terus jadi MP4. Ni 6 langkah buat motion video guna Claude Opus 5.5.

---

## Content

[Transkripsi auto (ASR) dari narasi video 55s dalam post @ammarr_anwar]

Nak buat video motion macam ni? Sekarang cukup dengan satu prompt je!

Claude tak generate video. Claude tulis code. Render setiap frame terus jadi MP4.

**Langkah 1 — Setup**
Satu folder untuk satu video. Pilih Opus 5.5, Effort High atau Max.

**Langkah 2 — Material**
Logo, voice over, music, screenshot. Lagi banyak bahan, lagi kurang Claude teka.

**Langkah 3 — Prompt**
Nyatakan material, konsep, kualiti, size dan nama file. Nombor go all out.

**Langkah 4 — Tiru gaya**
Suka gaya video orang lain? Bagi link, Claude kaji frame demi frame dan tulis style guide.

**Langkah 5 — Markah sendiri**
Suruh Claude bagi markah sendiri. Ulang sampai dapat markah yang tinggi.

**Langkah 6 — Export**
Export semua size dan simpan jadi skill.

Claude Opus 5.5 — buat sekali, guna banyak kali.

## Hook
> Belajar Claude Motion Video dalam satu class, terus apply jadi video kemas. Mockup phone pun boleh — cuma bagi material, lepas tu prompt dekat Claude.

---

## Content

Pagi tadi attend class @hazrilhafiz , dia ajar pasal Claude Motion Video. Dah belajar mesti la excited nak apply kan apa yang kita dah absorb dalam class tadi. Maka jadilah ini. TQ tuan @hazrilhafiz untuk class yang bermanfaat ni

—

[Author] Yang nak belajar buat video macam ni boleh tengok sini 👇 ammarrahimi.com/lp/cl…

@darkstaarx_: Lawa. Kemas. So kalau jenis mockup phone punya tutorial pun boleh? Just kasi material?
[Author] Boleh, tuan. just kena bagi je material, lepas tu nanti prompt dekat claude

@faisalpecey.legacy: Fuh. Menarik. Beli kt link tuan share ya?
[Author] Betul tuan. Class tu check kat link saya share

## Hook
> Claude Code boleh animate — cuma ramai orang tak install skill yang ajar ia buat macam tu. Ni 5 skill percuma, satu untuk setiap kerja.

---

## Content

Claude Code can animate. Most people just never install the skills that teach it how.
5 free ones, one per job:
1. Three.js (CloudAI-X/threejs-skills)
Interactive 3D scenes, lighting setup, camera controls, particle effects, GLTF models.
2. GSAP (greensock/gsap-skills)
The official GreenSock skill. Text reveal effects, timeline animation, ScrollTrigger, React integration.
3. Design DNA (zanwei/design-dna)
Reverse engineer any design: typography, layout analysis, color palette. Copy any UI style.
4. Motion Design (lottiefiles/motion-design-skill)
Lottie animation, SVG animation, interactive states, timeline and keyframes.
5. Genjutsu (AThevon/genjutsu)
Award-winning UI, creative direction, premium animation, modern layout, visual polish.
📌 Save or repost this for future reference.
Image credit: nocodealex

# Twoclipping — Templat Prompt UI Motion Seamless (Opus 5.5)

Prompt template penuh (verbatim) daripada @twoclipping — pergerakan UI Dribbble-level, satu bentuk
yang tidak pernah dipotong, morph dari button → loader → player → tab → command palette → loop.
Setiap gaya dikira dari masa dalam seek(t), spring closed-form, render Playwright + motion blur ffmpeg.

**Prompt verbatim:**

```text
Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use).

Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops.
Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.

120 BPM, 7 bars, something happens on every beat.
Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button.

1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames.
2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time.
3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob.
4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was.
5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read. Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters.
Ask me for the inputs, then show me the state list on the beat grid before you write any code.
```

**Kenapa penting:** ini templat rujukan terbaik untuk motion UI deterministik — corak "one shape, never cut"
+ spring closed-form yang boleh dipakai semula untuk video promo Eastel/ibubapa.

**Stats:** tiada stats rasmi (diambil dari post X @twoclipping + mirror aveniqa.com)
**Author:** @twoclipping
**Sumber:** https://x.com/twoclipping/status/2103273003555402193
**Tags:** opus-5.5, motion-design, ui-motion, prompt, kinetic

## Hook
> "Prompt ialah 10% video, 90% lagi ialah harness." Full-course 12 langkah untuk bina studio motion design berkode dengan Opus 5.5: kontrak render `seek(t)`, closed-form springs, beat grid, sound tersintesis, dan loop kritik yang paksa Opus baiki frame sendiri. Menghimpun SEMUA prompt verbatim yang mendefinisikan trend: setup, CLAUDE.md rules, one-liner showreel, varian, prompt brand, prompt reference, dan template XML spec.

---

## Content

**Penemuan utama:** Opus 5.5 tak keluarkan MP4 — ia tulis program. Satu fungsi `draw(t)` / `seek(t)` cat frame tepat bagi mana-mana saat; headless browser panggil 900 kali (15s @ 60fps), screenshot tiap frame, ffmpeg cantum. Opus utamakan route A zero-dependency (satu index.html + Playwright + ffmpeg) dan SKIP Remotion/HyperFrames melainkan diminta jelas.

**PROMPT 1 — Setup (shell):**
```
# 1. Runtime: Node 22+, ffmpeg, Python for audio analysis
brew install node ffmpeg python
pip install numpy librosa soundfile

# 2. A clean project and a headless browser
mkdir motion-studio && cd motion-studio && npm init -y
npm i -D playwright && npx playwright install chromium

# 3. Framework skills (optional, route B)
npx skills add remotion-dev/skills
npx skills add heygen-com/hyperframes

# 4. Hand-drawn look (optional)
claude plugin marketplace add buildwithhanif/claude-animation-skill
claude plugin install claude-animation@claude-animation-skill

# 5. Start Claude Code on Opus 5.5 at high effort
claude --model claude-opus-5-5
> /model   # pick Opus 5.5, set effort xhigh for one-shots, max for flagship pieces
```

**PROMPT 2 — CLAUDE.md (motion studio rules):**
```
# Motion studio rules

## Render contract
- Every film is a pure function of time: `window.seek(t)` paints frame t.
- No CSS transitions, no setTimeout, no requestAnimationFrame in render mode,
  no state carried between frames. Seeded noise only (mulberry32), never Math.random.
- Render with `node render.mjs`, encode H.264 yuv420p, CRF 16.

## Look
- Banned defaults: centered title on gradient, everything fading in,
  corner labels and frame borders, glow on UI chrome, generic particle bursts.
- One display face, one UI face. One accent color unless the brief says otherwise.
- Every 2 to 4 seconds something new must happen on screen.

## Sound
- Score and SFX are synthesized in code unless a track is supplied.
- Place hits on the measured beat grid (beats.json). Loudness -14 LUFS.

## Loop before you show me anything
1. Render one frame per beat as a contact sheet and LOOK at it.
2. Score it 1-10 on: hook in first 2s, readability at phone size,
   motion quality, variety, brand accuracy, sound sync.
3. Fix the 3 worst problems. Repeat until every score is 8+.
4. Only then do the full render.
```

**PROMPT 3 — One-liner showreel (viral asal):**
```
make a dynamic 15-second motion graphics video that shows what an
incredible motion designer you are, like it's your showreel for a résumé.
go all out.
```

**PROMPT 4 — Varian showreel (terbukti):**
```
# Longer, with a sound bar
make a dynamic 16:9, 60-second motion graphics showreel that shows your real creative limits.
S-tier sound design, no generic synth pads. Compose an original piano score and sync every
cut to it. Export 1080p MP4.

# Anti-slop guardrail
make a dynamic 10-second motion graphics video that introduces who you are as Opus 5.5.
Avoid frames and text in the corners, the usual giveaways of AI-made video.

# Story instead of techniques
use your showreel energy, but tell a story: the history of [TOPIC] from [START] to today,
surprise me with the storyboard. 45 seconds, vertical 9:16.

# Agency persona
make a 30-second showreel as if you were a niche branding studio for startup founders.
Create every graphic from scratch. One accent color. Every shot is a different technique.
```

**PROMPT 5 — Brand / product launch:**
```
Make a dynamic 20-second motion graphics video for [PRODUCT] ([URL]), with the energy
of a motion designer's showreel. Go all out.

Assets
- Visit the site. Use real screenshots (Playwright), the real logo, real colors and fonts.
  Save everything to ./assets and list what you found before you animate.
- Never redraw the product UI from imagination. Crop and animate the real thing.

Story (one beat each, 2 to 4 seconds)
1. Hook: the problem in 5 words of huge kinetic type.
2. The product appears, the UI assembles itself piece by piece.
3. Three features, each as a UI moment with a cursor doing a real action.
4. One number that proves it works: [METRIC].
5. Logo lockup + [CTA].

Sound
- Original music, 120 BPM, synthesized in code. UI clicks and whooshes on the beat.

Format: 1080x1920 (9:16) first, then 1:1 and 16:9 from the same timeline.
Before the full render, show me a contact sheet of one frame per beat.
```

**PROMPT 6 — Reference (nama look, suap frame):**
```
Reference: ./refs/launch.mp4 (and ./refs/frames/*.png)

1. Extract one frame every 0.5s with ffmpeg. Study them.
2. Write ./docs/style_guide.md: palette (hex), type (family, weight, tracking),
   shot lengths, transition types, camera moves, texture/grain, how text enters and exits.
3. Write ./docs/shotlist.md for a [DURATION]s video about [SUBJECT] in THAT style.
   Take the grammar of the reference, never its content, logos or characters.
4. Show me both files. Wait for my OK before any code.
```

**PROMPT 7 — XML spec template (UI morph, one shape never cut):**
```
<inputs>
Ask me for: my product + URL, 8 to 12 UI states that tell its story, the real data shown in
each state, brand colors + fonts + one accent, a royalty-free track near 120 BPM, formats.
</inputs>

<direction>
Product-film UI motion. One container never cuts: every state is the same element changing
size, radius and fill while its content swaps behind a short blur. A cursor drives every change.
Warm neutral canvas, one accent. Springs with at most a tiny overshoot.
Banned: bouncy easing, glows, gradients on UI chrome, particle bursts, dead time.
</direction>

<structure>
120 BPM, 8 bars, something happens on every beat.
logo → CTA button → email field (typed) → loader → success check → dashboard card
→ chart draws itself → tooltip on hover → ⌘K palette → toast → logo.
</structure>

<build>
1. One HTML file, one canvas, window.seek(t). No CSS transitions, no timers, no carried state.
2. Closed-form springs. A value with many targets = sum of one spring per change.
3. Text inside a morphing container enters after the morph starts, leaves before the next one.
4. Tab indicators: leading and trailing edges on different springs so they stretch.
5. Beat grid from the track (numpy/librosa). Start on a downbeat. UI sounds on measured peaks.
6. Render in headless Chrome at 60 fps, 4 subframes per frame, blended for motion blur.
</build>

<gotchas>
Never use will-change on anything the camera scales (blurry text).
The last frame must equal the first, cursor position and velocity included.
</gotchas>

<start>
Ask for the inputs, then show me the state list on the beat grid before writing code.
</start>
```

**Nota:** effort default = medium; setiap one-shot viral guna xhigh atau max. Guna medium untuk fix kecil/re-render, xhigh untuk filem baharu, max bila 3 saat pertama perlu membawa launch. Kelemahan one-liner = "brief contagion" (ratusan prompt serupa hasilkan reel yang berirama sama) — guna untuk uji setup sahaja.

<!--
- Nama fail: ~/content-koleksi/threads/movez-opus55-motion-studio-full-course.md
- Ingest: python3 ~/.hermes/scripts/capture_content.py "<body>" --title "..." --type script --category prompt --tags "prompt, opus-5.5, motion-design, code-video, render-contract, deterministic-render" --author "0xMovez (movez.substack.com)" --source-url "https://movez.substack.com/p/how-to-build-motion-design-studio" --hook "..."
- ID: dari respons API (jangan guna local max)
-->

## Hook
> Contoh prompt produksi penuh dari pustaka Remotion: satu arahan yang menetapkan kanvas (1080x700, 30fps, ~37s), palet warna, muzik, dan **8 scene dengan jumlah frame setiap satu** plus jujukan animasi tiap elemen. Corak ini (frame-count per scene + spring transition + palet hex) ialah rujukan terbaik untuk menulis brief launch video sendiri.

---

## Content

**Prompt (verbatim):**

```
Create a Remotion video (1080x700, 30fps, ~37s) for OpenClawd — an open source AI desktop agent. Dark theme (#0c0a09
  background, #fbbf24 amber accent). Background music: "Walen - HEADPHONK" with 1s fade-in and 2s fade-out at 40% volume. 8
  scenes in series:

  Scene 1 — Terminal Install (120 frames / 4s)
  Mac-style terminal window with traffic light dots. Types npx openclawd-cli character by character (1 frame/char). After
  typing, shows ASCII art logo "OPENCLAWD" in amber, then server output lines appearing progressively: version banner, SDK
  backends, 20+ providers/80+ models loaded, model names (Opus 4.6, GPT-5.3, Gemini 3, etc.), MCP servers connected, "Opening
  desktop app on :3001". Terminal slides in from bottom with 3D perspective (rotateX 20deg, slight rotateY oscillation).

  Scene 2 — Home Screen (150 frames / 5s)
  Desktop app window with centered "OpenClawd" title (Georgia serif), tagline "Open Source Alternative to Claude Cowork",
  rounded chat input with send button, and provider/model selector chips (Claude Code + Opus 4.6 + Attach). Spring-animated
  fade-in with staggered delays (title → tagline → input → controls).

  Scene 3 — Chat Interface (160 frames / 5.3s)
  Three-column layout: left sidebar with chat history (MCP Integration, Code Review, etc.), center with user message "Review my
   API code" and streaming assistant response about security findings (rate limiting, SQL injection, input validation), right
  panel showing progress steps (Reading → Security analysis → Applying fixes → Creating PR) and tool calls (filesystem.read,
  bash.exec, github.create_pr) with green checkmarks.

  Scene 4 — Provider Switch (130 frames / 4.3s)
  Two dropdown panels side by side. Left: 8 providers (Claude Code, OpenCode, OpenAI, Gemini, DeepSeek, Llama 4, MiniMax,
  Ollama) with colored dots and selection indicator. Right: 7 models (Opus 4.6, Sonnet 4.5, GPT-5.3 Codex, etc.) with
  descriptions. Bottom tagline: "Claude Code + OpenCode SDK — 20+ providers · Open Source models". Staggered item reveals.

  Scene 5 — MCP Catalog (140 frames / 4.7s)
  Modal overlay with "MCP Server Catalog — 20+ servers available". Category filter pills (All, Core, Database, Developer,
  Communication). 6 server cards with icons: Filesystem, Git, GitHub (installed), PostgreSQL, Slack, Puppeteer. Auth badges
  (green "No Auth" / amber "Requires Auth"). Install/Installed buttons with checkmarks.

  Scene 6 — Messaging Bots (120 frames / 4s)
  Full-screen "Your AI, everywhere you chat" with subtitle "Full tool access · Memory · Scheduling". 4 platform cards
  (WhatsApp, Telegram, Signal, iMessage) with SVG icons, green "Connected" status dots, and feature tags (Memory, Scheduling,
  Tools). Cards scale up with spring animation.

  Scene 7 — Logo Combo (180 frames / 6s)
  Three sub-scenes: (a) Intro with converging amber lines, center burst ring, floating particles, grid background. (b) "✦
  Introducing ✦" with word-by-word reveal: "Open Source AI Desktop" in 56px white text, model names below in gray monospace.
  (c) 8 provider icons in two rows with colored dots and labels, tagline "Claude Code + OpenCode SDK · 80+ models | Desktop ·
  Messaging · API".

  Scene 8 — GitHub CTA (120 frames / 4s)
  "100% OPEN SOURCE" label, spinning GitHub logo (rotates in from -180deg), orbiting amber star icons, "Star us on GitHub" in
  36px white, pulsing scale animation, "github.com/rohitg00/openclawd" in monospace with dark card background. Floating
  particles and subtle grid.

  All transitions use spring animations with fade + scale (0.95→1 in, 1→0.95 out). Each scene inside an AppWindow component
  (mac chrome with traffic lights). Color palette: #0c0a09 bg, #1c1917 surfaces, #292524 borders, #fbbf24 amber accent, #fafaf9
   white text, #a8a29e muted text, #78716c dim text. Fonts: Inter for UI, SF Mono for code, Georgia for branding.
```

**Guna semula:** tukar produk/palet, kekalkan struktur `Scene N — Name (frames / secs)` + arahan jujukan. Model terkini (Opus 5.5) boleh ganti nama model lama dalam contoh.

## Hook
> Template prompt "deterministic render pipeline": paksa Claude keluarkan SATU fail HTML dengan kontrak `window.DURATION` + `async window.seek(t)` supaya setiap piksel ialah fungsi tulen bagi `t` — tiada jam, timer, transition atau random tak-seeded. Ini yang buat render frame-exact dan boleh disemak sebagai diff. Termasuk kiraan kos token dan panggilan API BeatAPI.

---

## Content

**Prompt template (verbatim):**

```
Make a {LENGTH}s video about {TOPIC} for {AUDIENCE}.
Output ONE self-contained HTML file, {W}x{H}, no network requests.
Contract: set window.DURATION = {LENGTH}; expose async window.seek(t).
Every pixel is a pure function of t. No Date.now, requestAnimationFrame
loops, timers, CSS transitions, or unseeded Math.random.
Style: palette {HEX COLORS}, font {FONT}, motion "{e.g. snappy, no fades}".
Facts (use only these): {VERIFIED BRIEF}
Audio: {voiceover word timestamps, or target BPM with cuts on beats}.
First reply with a beat sheet and 4 keyframes only; write the file after I approve.
```

**Panggilan API BeatAPI (verbatim):**

```python
import os
from pathlib import Path
from openai import OpenAI

client = OpenAI(
    base_url="https://api.beatapi.io/v1",
    api_key=os.environ["BEATAPI_API_KEY"],
)
prompt = (
    "Write a self-contained six-second 1080x1080 HTML animation. "
    "Set window.DURATION=6 and expose async window.seek(t). "
    "Use only deterministic drawing; return HTML only, with no code fences."
)
response = client.chat.completions.create(
    model="claude-opus-5-5",
    messages=[{"role": "user", "content": prompt}],
    max_tokens=12000,
)
html = response.choices[0].message.content or ""
if not html.lstrip().lower().startswith("<!doctype html>"):
    raise ValueError("Review the model response before saving it as HTML")
Path("scene.html").write_text(html, encoding="utf-8")
```

**Nota:** Opus 5.5 keluarkan kod, bukan frame. Kontrak `seek(t)` = setiap piksel fungsi tulen bagi masa, jadi render boleh terus lompat ke mana-mana `t` tanpa replay.

## Hook
> Seorang engineer yang 5 tahun pimpin team AI di Grammarly kongsi 10 tip Claude Code dalam satu live session. Juzaila tulis semula untuk guru yang tak ada background coding — tip plan mode sahaja jimat 20 minit buat benda salah.

---

## Content

### Ringkasan (capture)
Video 4:37 · auto-caption TikTok + transkrip Whisper (small.en) + teks atas skrin. Kredit asal: engineer yang jalankan AI teams di Grammarly 5 tahun, kongsi "Claude secrets" dalam live call; Juzaila tulis semula untuk guru yang bina tools tanpa background coding. Hashtag asal: #claudeai #aiforteachers #teacherfounder #creatorsearchinsights #educationaltok

### Tip 1 — Suruh Claude tanya soalan DULU sebelum buat apa-apa
Dalam Claude Code, tekan `Shift+Tab` sebelum taip apa-apa — masuk **plan mode**. Claude berhenti dan tanya soalan, bukan terus bina benda salah selama 20 minit.
> Engineer tu cakap: AI ni cerminan cara kita berfikir. Output buruk biasanya tanda prompt malas. Jadi perlahankan sikit sebelum mula.

### Tip 2 — Pusingkan dial effort ke atas
Taip `/effort` dan pilih **extra high**. Ada hidden setting pada model yang orang tak pernah sentuh. Extra high hidupkan workflow yang lebih baik. Korang dah bayar untuk itu — guna sahaja.

### Tip 3 — Jangan minta "benda", minta "team"
Jangan cakap "build me a lesson planner". Cakap "build me a team with a designer, a builder, a tester, and someone who reviews all the work before it ships".
Dalam live call tu, Claude bina sendiri pipeline 4-fasa tanpa disuruh — hanya kerana diberitahu siapa dalam team.

### Tip 4 — Model mahal untuk manage, model murah untuk kerja
Engineer tu habiskan usage seminggu dalam dua hari, lepas tu betulkan. Sekarang model teratas hanya **direct**; model kecil buat kerja sebenar. Output sama, kos sebahagian kecil.

### Tip 5 — Bila sesuatu pecah, biasanya masalah versi
Tambah **Context 7** (server MCP dokumentasi) — dia bagi Claude dokumentasi semasa untuk apa sahaja yang korang sedang bina. Separuh masalah "kenapa ini tak jalan?" hilang, sebab Claude berhenti kerja dari maklumat basi.

### Tip 6 — Simpan semua dalam satu folder ("business operating system")
Mula setiap session dari folder itu. Claude terus tahu siapa korang, apa yang sedang dibina, dan apa yang dibuat kali lepas — tak payah re-explain diri setiap pagi.

### Tip 7 — Bina "ship gate"
Beritahu Claude tiada apa yang siap sehingga lulus set test penuh. Engineer tu cakap manusia benci tulis test, AI suka. Inilah beza antara benda yang user boleh guna dan demo yang pecah bila orang tekan butang salah.

### Tip 8 — Biar dia belajar dari setiap session
Selepas setiap feature, minta Claude tulis dalam fail dalam projek apa yang dia dah belajar. Setiap build buat build berikutnya lebih cepat. Kebanyakan orang tak buat ini dan mula dari kosong setiap kali.

### Tip 9 — Berhenti menaip, guna suara
Engineer tu prompt satu app penuh guna suara dengan tool "Whisper Flow" (teks atas skrin pencipta; produk sebenar kemungkinan **Wispr Flow**). Dia cakap, Claude bina. Untuk guru yang buat enam benda serentak, tip ni berbaloi cuba terus.

### Tip 10 — Pilih tool "boring" dengan sengaja
Bila bina dengan AI, guna framework paling biasa — yang AI dah nampak paling banyak contoh. Tool yang familiar = bug pelik kurang dan hallucination kurang. Ya, AI memang hallucinate.

### Penutup
"10 tips, semuanya boleh pakai malam ini." Kalau belum bina apa-apa tapi guru yang lemas dengan dokumentasi — pencipta ada starter kit untuk guru early childhood, tanpa coding, early access dalam bio.

### Nota capture (audit jujur)
- Transkrip datang dari **auto-caption TikTok** (`--write-subs --sub-langs all`); ASR TikTok sahaja tiada di `--skip-download` tanpa `--write-subs`.
- Disemak silang dengan **Whisper small.en** (faster-whisper, CPU) — dua enjin setuju pada semua tip; yang berbeza cuma nama tool dan perkataan "thing" (TikTok ASR dengar "think").
- Teks atas skrin disemak dengan tangkapan frame + OCR: "TIP NO 3, STOP ASKING FOR A THING", "A TOOL CALLED WHISPER FLOW", "CONTEXT 7".
- Bahagian intro ("shared his __ secrets") kedua-dua ASR tak jelas — ditulis "Claude secrets" ikut konteks ayat berikutnya ("ten Claude tips"), bukan verbatim.

**PROMPT (verbatim, diringkaskan hanya baris kosong berulang — teks penuh dikekalkan):**

```
I've included an MP4 file and an original link to a video that is called "Claude Pop." It's a pop song that is about increasing rate of progress and the experience of the singularity approaching.

I want you to independently do an end-to-end complete pass on making an updated version of this video. Use the exact same audio track and think and feel very deeply about what is the best way to visually represent all of the lyrics on screen. You do not need to anchor to the current style, you can do truly anything that you think might best let you visually express yourself, including abstract motion graphics.

You can use the internet freely to pull in references. You can look at motion design. I want you to make a new music video that has beautifully rendered JavaScript animations with a papery feel in a similar style to the reference that is created, but push the aesthetics in any direction you want and consider what is part of the modern zeitgeist.

Also, think about your current capabilities and what is realistic for you to be able to do. You can go through the full /asic folder and look at the other work that I've done. You should be able to use the skill mesh to look at the compendium of references that I've pulled, and also the skill video scoring to learn how to make JavaScript songs from references that are passed in (You shouldn't need to modify the song in any real way, but I want you to have this available to you so you can better creatively express yourself)

You can also use the ElevenLabs API to do sound design. There's documentation in /asic to do this, and you can see the API key.

There's also a foul API key that's available to you. I think what might make the most sense here is using the foul API key to generate some character sheets and probably having a pop protagonist that represents you. There's already an anchor point where Claude has a sunflower-esque character, and you could likely do an adapted version of this that is similar to the feminine vocals that are being delivered and is inspired by the Claude character, but maybe feels a bit more personified in some way.

I think you should be mindful of aesthetics here, and I don't want you to produce something that is GPT slop. Instead, I'd be more impressed if you come up with a coherent style that works well with the image gen models that are available via foul. Generate the style sheet. You can use the gen media documentation for seedance 2.5 that exists in my markdown files and come up with your own style that makes sense and that works well with the models.

Once you have your character sheet, you can make a few backup dancers and some supporting characters as you see fit. You can design your own sets with the foul API. You can insert the characters and then do seedance 2.5 video generations to serve as the base assets for this, and you could pass in the lyrics so you can generate individual scenes.

You don't need to have vocal singing, like visible lip movement, throughout the entire thing. Think like a regular music video where you have some inserts that are done independently and don't have the characters in them, or you see the characters doing something else entirely different. I think that for the world building for this, we want to create the sense of speeding up, and so I would like you to audit all of the different events, like the Navi Stokes and all of the Twitter hype around math getting eaten up. Think really critically about how to integrate all of the current memes that are in the zeitgeist on the Twitter timeline, and all of the feelings around AI progress.

Think about things like the Shinji meme and all of the words that are around him, and how you might be able to integrate this.

We need a very strong, compelling visual hook that gets people excited and appreciates the work that you've done here really quickly. You can also just go and study other music videos and understand what they've done really well. I think that K-pop is probably one of the best examples that we can pull from, and thinking about how they direct human attention and manage human psychology in the way that they use visual patterns.

This is probably your best approach, but taking more stylistic freedom instead of having to anchor to K-pop too intensely. The best version of this is seedance 2.5 generations with those image bases of environments and characters inserted into them with singing, and ideally we get good lip syncing. You can cut up the song and actually pass it in as a reference in seedance, if that's part of what seedance can handle, so that the timing is exactly right, I think it'd be very important for you to do that properly. I would think critically about how to do this, like really nailing the timing of the delivery of voices. You'll want to build out the right verification loops so that you can run seedance 2.5 as much as you need, and confirm that the audio is properly synced up.

I think after that, what might be fun is if you use your visual reasoning skills and your ability to build animations in JavaScript, and then reconstruct the video from scratch as sort of an overlay, so that the visual continuity of the base is really there. It's like that animation technique where you shoot first in traditional film and then draw over top of it. I think you could do this in such a way that we're only looking at the beautiful drawing that you've produced in JavaScript as an overlay, and we don't even see the base assets from seedance 2.5. So all the video gen work that you do is actually just a way to give you a strong foundation of a base to work with for your JavaScript animations. Just because seedance 2.5 has really good character representation and physics rendering for backgrounds, that gives you a lot of ammunition to then go and do your amazing JavaScript work that I know you're so good at.

It'd be good to have amazing motion graphics of the text lyrics that are actually embedded into the video itself. And you can think about this as you are composing shots. As you're making backgrounds and inserting characters, we can think about where we want to have lyrics be really big and really present, so the background can be less busy there, and you can position the characters perhaps on the right as lyrics appear on the left.

You also need to be open to going back and revisiting things in order to be able to reiterate. You're going to want to watch the entire video multiple times, take screenshots at individual parts, and think about if something is really up to the bar of quality that we need here. I trust that you can do this, and I think that it's really important to nail the style of animations. The reference GitHub attached of the source video that I'm talking about is good, but it's really not there. It could be much, much stronger, but it gives you a good foundation to work with.

You can also use search abilities and find other references to pull from for motion, for JavaScript, animations, et cetera, and integrate them. Your budget is as high as you want here, effectively as high as you want. I think that there's roughly two grand in foul credits. Again, be economical; don't go crazy, but spend what you want here and see what you can cook up
```

### Prompt 1 — Education Explainer Video (verbatim penuh)

```
Use the Remotion best practices skill.
Create an educational explainer video (1080x1920, 30fps, 30 seconds) that teaches "How AI Agents Work".

SAFE ZONE: All text and key content must stay within the safe zone — at least 150px from the top (platform search bars, status bar) and 170px from the bottom (navigation buttons, swipe-up UI). Side margins: 60px minimum. Nothing important should touch the edges. MINIMUM FONT SIZES: Headlines 56px+, body/subtitles 36px+, labels/small text 28px absolute minimum. Nothing under 28px — it's unreadable on mobile.

STEP 1 — RESEARCH & SCRIPT: Before writing any code, research the topic and write a 5-scene script. Each scene needs: a one-line headline, 1-2 sentences of explanation, and a visual description of what to animate. Show me the script and wait for approval before coding.

STEP 2 — DESIGN & ANIMATE: After I approve the script, build all 5 scenes with these specs:

VISUAL STYLE:
- Background: #0a0a0a
- Primary text: white
- Accent: #6366f1 (indigo)
- Success/emphasis: #22c55e (green)
- Font: Inter (weights 400, 600, 800)
- All icons/diagrams built as SVG components (no external assets needed)

ANIMATION RULES:
- Every element enters with spring({ damping: 200 }) — no linear motion
- Stagger related items by 8-12 frames
- Use TransitionSeries with 12-frame fade transitions between scenes
- Diagrams and flowcharts should draw themselves (SVG stroke-dashoffset animation)
- Key numbers use count-up animation with interpolate() and tabular-nums
- Final scene: particle effect background (10-15 circles drifting upward)
Each scene should have a clear visual metaphor — diagrams, flowcharts, icons, or step-by-step animations. No walls of text. Think Kurzgesagt meets Fireship: dense information, beautiful motion, fast pacing.

PREVIEW: After building, launch Remotion Studio (npx remotion studio) so I can preview the video in my browser.
```

Tukar topik sahaja: "How AI Agents Work" → "How Blockchain Works" / "How DNS Works" / "How Photosynthesis Works". Semua visual dijana sebagai SVG — **zero aset luar**.

### Prompt 4 — Avatar Video with Animated Overlays (verbatim penuh)

```
Use the Remotion best practices skill.
I've placed my talking-head video in public/avatar.mp4. This is a 9:16 vertical video (1080x1920) of me talking to camera — a selfie-style shot where my face is in the lower 60% of the frame, with open space above my head.
Create a Remotion composition (1080x1920, 30fps) that plays this video FULL FRAME as the background layer, then overlays animated graphics on top — specifically in the open space above my head (roughly the top 35-40% of the frame). The video itself is never cropped, split, or resized. It plays edge-to-edge at its original 1080x1920 resolution.

SAFE ZONE: All overlay text and graphics must stay within the safe zone — at least 150px from the top (platform search bars, status bar) and at least 170px from the bottom (navigation buttons, swipe-up UI). Side margins: 60px minimum. MINIMUM FONT SIZES: Headlines 56px+, body/subtitles 36px+, labels/small text 28px absolute minimum. Nothing under 28px — it's unreadable on mobile.

STEP 1 — TRANSCRIBE & PLAN: Use Whisper to transcribe public/avatar.mp4. Analyze the transcript to identify:
- The total duration (set composition length to match the video)
- 3-5 key topic segments with their start timestamps
- For each segment, propose an overlay graphic to display in the top portion of the frame (above my head). Examples:
  - Topic title with a large step number (e.g., "01" faded in background, "Elements of AI" as headline)
  - Keyword pill/badge that highlights the current topic
  - Simple animated icon or diagram illustrating the concept
  - Progress bar or step indicator showing where we are in the video
  - Animated caption/quote pulling a key phrase from what I'm saying
Show me the transcript segments and proposed overlay for each. Wait for approval before coding.

STEP 2 — BUILD:

BASE LAYER — FULL-FRAME AVATAR VIDEO:
- <OffthreadVideo src={staticFile("avatar.mp4")} /> filling the entire 1080x1920 composition
- style={{ width: "100%", height: "100%", objectFit: "cover" }}
- This is the background. It plays from frame 0 for the full duration.
- Audio from this video is the composition's audio track (me speaking)
- Do NOT crop, resize, split, or put this in a panel. It IS the full frame.

OVERLAY LAYER — ANIMATED GRAPHICS (positioned in top ~35% of frame, above my head):
- Use AbsoluteFill on top of the video layer
- All graphics positioned in the top portion of the frame (y: 150px to ~700px) — this is the open space above my head
- Add a subtle dark gradient overlay ONLY in the top 40% of the frame (transparent at bottom, rgba(0,0,0,0.6) at top) so white text is readable against any background
For each topic segment, display an overlay timed to the transcript:

OVERLAY STYLE (like the reference image):
- Large faded step number in background ("01", "02", etc.) — Inter 800, ~200px, rgba(255,255,255,0.08)
- Topic headline below it — Inter 700, 56-64px, white
- Keyword badge — small rounded pill with glass-morphism background, 32px text
- Animated progress bar under the badge — thin line that fills to show progress through current segment, accent color #22c55e
- Each overlay enters with spring({ damping: 200 }) at its segment's start timestamp
- Previous overlay fades out (opacity 0 over 10 frames) as the new one enters
- Use Sequence components with from={Math.round(timestamp * fps)} to sync to speech

OPTIONAL BOTTOM OVERLAY — CAPTIONS:
- If you can extract word-level timestamps from Whisper, add animated captions in the lower portion of the frame (above bottom safe zone, around y: 1600-1700px)
- Style: bold white text, 36px, with a subtle text shadow for readability
- Highlight the current word in accent color (#6366f1)

COLORS: Accent #6366f1 (indigo), secondary #22c55e (green), text white

FONT: Inter (weights 400, 600, 700, 800)

PREVIEW: After building, launch Remotion Studio (npx remotion studio) so I can preview the video in my browser.
```

### Prompt 2, 3, 5 (petikan sahaja — halaman asal memotong penuh)

- **#2 Product Demo + Launch Video** — `IMPORTANT — PRODUCT IMAGES: Use the Claude in Chrome MCP tools to navigate to the website, read the page, and find product screenshots/images the site already displays (hero images, product UI screenshots, feature images, app previews). These are images the company designed to showcase their product`
- **#3 Google Reviews Testimonial Video** — `If Playwright can't load Google reviews directly, use an alternative: search for the business name + "reviews" and scrape from the search results card, or use the Google Maps page. Show me the business info and 3 selected reviews. Wait for approval before coding.`
- **#5 Data Visualization Infographic** — `- Dashboard title (from your analysis) fades in at frame 0, top safe zone, Inter 800, 36px` / `- Source subtitle fades in at frame 5, Inter 400, 16px, #64748b` / `- All panels use matching glass-morphism card style`

|---|
| GSAP | 30 |
| Canvas | 8 |
| Three.js | 7 |
| WebGL | 2 |
| CSS | 1 |
| d3-geo | 1 |
| SVG | 1 |

**Tag:** promo 16 · text 16 · explainer 11 · brand 11 · **malaysia 11** · social 9 · product 9 · 3d 9 · retro 9 · festive 6 · background 6 · handmade 6 · photos 5 · food 3 · travel 3 · data 3 · cute 2

Gaya Malaysia: Festive Raya, Merdeka, Kopitiam, Pasar malam, Batik fashion, Kampung sunset, Borneo rainforest, Deepavali, Chinese heritage, Malaysian heritage.

**Tetapan dalam UI:** Format (9:16 / 4:5 / 1:1 / 16:9) · Saiz (480/720/1080p) · Panjang (6/8/10/15/30s) · Bunyi (Off / Effects / Effects+music). Nilai ini **dimasukkan ke dalam prompt** melalui placeholder `{size}` dan `{duration}`.

## Struktur prompt.txt dia (4 blok, prosa)

1. **Look and motion** — perihal rupa + gerakan dalam ayat biasa, termasuk peristiwa spesifik ("a red cross for the old way and a tick for the new way")
2. **Type and colour** — font, berat, palet hex sebenar
3. **Sound** — satu bunyi dinamakan untuk SETIAP peristiwa visual ("a soft bubbly pop for each tile", "a friendly low 'nope' for the cross")
4. **Output** — saiz, panjang, dan arahan render

Ditambah guardrail: *"Only use facts I give you and never invent numbers."*

## 5 keputusan seni bina yang buat ia rasa mahal

1. **Gaya = data.** Setiap gaya satu folder dengan `prompt.txt`; registry JSON menyenaraikannya; skrip validasi memeriksa sebelum commit. Tambah gaya = tambah folder, bukan edit kod app.
2. **Pratonton berdisiplin.** Tile tunjuk **still segera** + main loop 4s hanya bila di skrin; demo hidup hanya dalam paparan detail. Komit perf dia merekodkan: halaman sedia **0.3s lawan 2.5s**, CPU scroll **0.4s lawan 12s**, heap **2MB lawan 47MB**.
3. **Label enjin per gaya** (GSAP/Canvas/Three.js/WebGL/CSS/SVG/d3) — memberitahu Claude perpustakaan mana, tanpa dijelaskan setiap kali.
4. **Tile dijana, bukan dirakam** — `tiles.mjs` render loop 4s atas jam maya, jadi pratonton pun deterministik dan ringan.
5. **Prompt prosa, bukan spesifikasi teknikal.** Ia sasar **sembang Claude web** ("beri saya MP4"), jadi ia menerangkan RUPA; butiran kejuruteraan diserahkan pada model.

## Kelemahan (kalau kita nak lawan)

1. **Tiada warisan/versi.** Prompt disalin keluar; tiada rekod gaya mana menghasilkan hasil apa, tiada metrik. Ia galeri, bukan sistem pembelajaran.
2. **Tiada dedupe atau provenance.** Tiada kredit sumber, tiada tarikh, tiada pengarang asal bagi teknik.
3. **Prompt statik.** Tiada ingatan brand — anda tampal hex setiap kali.
4. **Tiada penjanaan automatik.** Ia tak boleh render; ia hanya beri teks. Semua kerja di Claude anda.
5. **Hak cipta tidak jelas** (tiada LICENSE) — menyukarkan penggunaan komersial oleh orang lain, dan menyekat sumbangan luar.
6. **Satu bahasa** (Inggeris), walaupun bergaya Malaysia.

## Apa KITA sudah ambil (dilaksana 28 Sep 2026)

| Ambilan | Status |
|---|---|
| Gaya jadi **data**, bukan kod | ✅ `public/opus55/generator/styles.json` — 17 gaya |
| **Label enjin** per gaya | ✅ setiap entri ada `engine` |
| Ringkasan gaya + carian gaya | ✅ grid gaya + carian |
| Tetapan output masuk prompt (format/saiz/panjang/bunyi) | ✅ 5 format, 3 saiz, 5 panjang, 3 mod bunyi |
| Prompt **prosa** untuk sembang web | ✅ **Mod Web** baharu |
| Prompt **teknikal** untuk Claude Code | ✅ Mod Code (6 blok) — kita **lebih kuat** di sini |
| Guardrail "jangan reka nombor" | ✅ dalam mod web |
| **Moat BM/Malaysia** | ✅ Raya, Merdeka, Kopitiam, Batik, Pasar malam dalam registry |

## Di mana kita sudah menang

- **Dua mod** (Code + Web). Dia hanya satu.
- **6 blok teknikal** dengan `<gotchas>` sebenar (Chromium, headless background process, localhost ffmpeg, -14 LUFS) — dia tiada lapisan ini.
- **Warisan**: setiap capture masuk Content Bank dengan ID, pengarang, URL sumber, tanda statistik, dan skop penemuan dikendalikan skrip. Gaya yang menang boleh dikesan kemudian.
- **Penjanaan sebenar**: VPS kita ada Playwright + ffmpeg — kita boleh **render**, bukan sekadar beri teks.

## Dua keputusan

1. **Adakah kita nak pratonton hidup per gaya (tile.webp + loop) macam dia?** Cadangan saya: **YA, tetapi P2.** Ia bahagian yang paling mahal (perlu 17 demo HTML berasingan + skrip tile). Lakukan hanya selepas gaya stabil. Mulakan dengan **satu** demo hidup bagi gaya paling popular sebagai ujian.
2. **Panggil dia apa?** Cadangan saya: kekal **"Opus 5.5 Radar"** untuk halaman penemuan, dan **"Penjana Prompt"** untuk alat. Nama berasingan mengelirukan; dua halaman ini satu sistem.

### Pipeline sebenar (sama setiap kali)

```
tulis HTML / Canvas / WebGL
      ↓
setiap frame = fungsi masa: renderFrame(t)
      ↓
headless Chrome tangkap frame (boleh selari beberapa halaman)
      ↓
ffmpeg encode + cantum + campur audio → final.mp4
      ↓
sample frame jadi contact sheet → periksa → betulkan kod → render semula
```

- **Clock maya:** `requestAnimationFrame`, timer, `Date`, animasi CSS **diganti** dengan jam deterministik. Setiap frame jadi seek yang boleh diramal → **prompt sama = video sama setiap kali**. Boleh masuk CI.
- **Random berseed** ganti `Math.random()` → goyangan sama setiap render, frame tak berkelip.

### Tiga teknik teras

1. **Ia TIDAK BOLEH DENGAR audio.** Penyelesaian: decode lagu dengan Python, kira tempo / beat grid / tenaga per bar / drop, simpan sebagai **jadual**, dan setiap visual baca jadual itu. Ringkasnya: *ia tak dapat dengar lagu, jadi ia mengukur lagu.*
2. **Satu timeline untuk gambar dan bunyi.** Letak tempo, shot list, dan senarai event (pintu terhempas, nombor mendarat) dalam SATU struktur data yang dibaca oleh kod lukis DAN kod muzik. Bunyi jatuh tepat pada aksi sebab mereka kongsi data masa yang sama.
3. **Biar ia tengok hasil sendiri.** Sample frame jadi contact sheet (1 still setiap 0.5s) → periksa pace, framing, dead air → betulkan kod → render semula. Langkah ini **menangkap bug setiap kali**, tanpa gagal.

### Susunan kerja yang betul

1. **Plan beat grid + shot list SEBELUM tulis kod lukis** — tempo + seksyen (intro/build/peak/rehat/ending), cut atas downbeat, 10-20 shot dalam SATU dunia yang berterusan (bukan slaid berasingan).
2. **Sahkan fakta dulu, baru brief.** Dalam ujian $55: v1 salah, v2 betul — satu-satunya beza ialah brief yang sudah disemak fakta. *Ia menyelidik pantas tapi menyusun kepingan benar jadi cerita yang lebih kemas daripada kebenaran.*
3. **Biar gambar ikut bunyi.** Sintesis narasi → ukur tempoh sebenar → baru susun visual. Cuba time-stretch audio untuk padan gambar = drift lebih 10 saat.
4. **Jangan biar kerja panjang tamat bersama jawapan.** Dalam mod headless, proses latar mati bila turn tamat. Render di foreground berperingkat, atau tulis dalam prompt: jangan berhenti sampai render siap.

### Audio — batasan sebenar

- **Opus 5.5 tiada enjin audio terbina.** Ia tak boleh generate suara.
- Suara latar datang dari luar: MiniMax, ElevenLabs, atau TTS lain, ditambah selepas visual siap.
- Muzik boleh **disintesis dalam kod** (Web Audio API — dram, bes, pad) kalau anda nak kosongkan fail audio. Untuk SFX: muat turun dari Mixkit, letak ikut **puncak sebenar**, bukan mula fail.

### Kos — angka sebenar

| Output | Kos API | Masa | Turn |
|---|---|---|---|
| Klip 84 saat | $2.96 | ~24 min | 48 |
| 176 saat | $6.68 | ~47 min | 109 |
| 156 saat (pas 1) | $8.62 | ~69 min | 141 |
| 156 saat (pas 2) | $14.79 | ~132 min | 230 |
| 5 video (jumlah) | **≥$55.41** | — | 8 run |

- LaunchVideo: ~90k token input + 15k output **setiap film** (~100k/film), ~4 minit.
- **"Mahal" itu soal STRUKTUR, bukan harga unit.** Pipeline tetap = marginal ~0 selepas dibina. Opus 5.5 **bina semula alat setiap video** — itu yang anda bayar.
- Kalau setiap video perlu reka bentuk visual sendiri + riset sendiri → Opus 5.5 menang. Kalau satu gaya setiap minggu → pipeline tetap lebih murah.

### Skill percuma yang boleh dipasang

| Skill | Apa |
|---|---|
| `iart-ai/javascript-animation-skills` (MIT) | `javascript-animation` (lukis + storyboard + render MP4 + self-check) dan `soundtrack` (muzik Web Audio atas tempo map + sync check) |
| Remotion Agent Skills | 28 fail peraturan modular — spring, staggered entrance, transisi, subtitle |
| HyperFrames (HeyGen, Apache-2.0) | HTML biasa terus — lebih mesra model. Ada `/media-use` untuk urus aset |
| OpusClip skill | `npx skills add opus-pro/opus-skills` — potong/edit/post video dari terminal |

Keperluan minimum: Node 18+, `playwright-core`, ffmpeg, Chrome. **Tiada API key.**

### Butiran kejuruteraan yang jimat masa

- **`npx hyperframes lint` sebelum render** — kalau gagal, hantar error balik ke model untuk auto-baiki.
- **Letak guideline reka bentuk + component library + kod contoh dalam prefix tetap** prompt. Dengan cache read $0.20/MTok, panggilan berulang jadi murah.
- **Draft separuh resolusi, motion blur off**; render semula hanya shot yang berubah. Final pass baru penuh.
- **Tetapkan safe margin + saiz font maksimum dalam prompt** — kurangkan masalah layout dengan banyak.
- **Aset SVG** — Claude tulis terus (XML teks), warna/font brand tepat, setiap elemen boleh diberi ID untuk disasarkan animasi kemudian.

### Had sebenar

Bukan model video generatif: **tiada footage fotoreal dunia sebenar, tiada 3D kompleks, tiada audio.** Kualiti terhad pada apa yang boleh dibuat dalam browser dengan CSS/JS. Tapi untuk demo produk, brand spot, klip sosial — ini dah memadai dan **deterministik** (tiada halusinasi subjek, tiada artifak pelik).

### Corak prompt wizard (4 fasa) — sedia guna

1. **Interview** — tanya nak terangkan apa, untuk siapa, di mana akan dipos. Bahagian terakhir tu yang tetapkan saiz + panjang (4:5 LinkedIn, 16:9 laman, loop pendek newsletter).
2. **Storyboard** — tulis skrip atas skrin + senarai scene bertempoh + tawarkan DUA arah visual. **Anda luluskan sebelum ia bina apa-apa.**
3. **Build** — satu fail HTML, ada kontrol playback + shortcut sembunyikan supaya boleh rakam bersih.
4. **Refine** — ubah pace, perkataan, gaya, atau minta versi saiz lain.

### Model & versi

- **Model ID:** `claude-opus-5-5`. Keluaran 22 Sep 2026. Context 1M token, output maks 128K.
- **Harga:** $4 / MTok input, $20 / MTok output, **cache read $0.20**. (Opus 5: $5/$25/$0.50.) ~40% lebih murah.
- **Perlu Claude Code v2.1.280+.** Kalau `/model` tak senaraikan Opus 5.5 → `claude update`.
- Aliases: `opus` → Opus 5.5 pada Anthropic API, AWS, Bedrock, Google Cloud. **Microsoft Foundry masih resolve ke Opus 4.6** — kena pin ID penuh di situ.
- Terminal-Bench 4.0 naik 52.3% → **66.4%**; output >30% lebih pantas.

### Effort — ini yang paling kerap disalah set

| Setting | Nasihat |
|---|---|
| Mula | **`high`** (default). Bukan xhigh. |
| `low` / `medium` | Guna bebas — kawalan utama untuk kos & latency |
| `xhigh` / `max` | HANYA bila anda sudah ukur ada kenaikan kualiti |

- **Opus 5.5 fikir lebih banyak setiap turn** berbanding Opus 5 — porting `xhigh` dari config lama beli turn yang lebih panjang DAN lebih mahal.
- **Effort mengawal berapa banyak ia FIKIR, bukan berapa panjang ia CAKAP.** Turunkan effort tak memendekkan jawapan dengan boleh dipercayai — minta ringkas secara berasingan.
- **Tetapan effort lama TIDAK reset** bila tukar model. Kalau ia dalam `settings.json` atau env var, pergi cari di situ.
- `MAX_THINKING_TOKENS=0` + `effort xhigh` = **HTTP 400** pada setiap request (thinking tak boleh dimatikan atas `high`). Di `xhigh`/`max`, set `max_tokens` besar — mula 64k.

### Yang perlu DIBUANG dari CLAUDE.md anda

Ini berlawanan dengan nasihat lama. Arahan yang berguna pada Opus 4.8 jadi **merugikan** pada Opus 5.5:

- ❌ **"Verify at the end"** → over-verification, membazir.
- ❌ **"Double-check"** → ia sudah betul sendiri.
- ❌ **"Report high-severity issues only"** (dalam review) → ia **lapor kurang daripada yang ia nampak**.
- ❌ `MAX_THINKING_TOKENS=0` dengan xhigh → pecah.

Kesan audit (ini yang penting):
```bash
grep -rns -i "verify|double-check|re-check" \
  ~/.claude/CLAUDE.md ./CLAUDE.md ./.claude/agents/ ./.claude/skills/
```
Agent dan skill tersuai ialah **tempat persembunyian kegemaran** — ditulis sekali, berfungsi, tak pernah dibuka lagi.

### Yang perlu DITAMBAH

- ✅ **Cap subagent delegation** — Opus 5.5 mendelegasi lebih banyak dengan sendirinya.
- ✅ **"Keep responses focused, brief, and concise. Keep disclaimers and caveats short."** — Opus 5.5 menjawab lebih panjang daripada model Opus sebelum ini, dan effort TIDAK memendekkannya. Kena minta.

### Yang perlu DILARAS

- **Beri spec penuh di awal** — masih berkesan, lebih baik lagi kalau anda juga biarkan ia berjalan.
- **Titik mula effort** — `high`, dengan `low`/`medium` kerap. Bukan xhigh.

Tweet: *"WOW. motion designers are not ready for opus 5.5. this entire video is code. opus picked the music, downloaded the sfx, built every frame and synced it all to the beat by itself. steal the prompt ↓"*

**PROMPT** (verbatim):

```
<inputs>
Ask me for: the product name and a one-line promise, 3 to 5 UI moments to show, one accent color, 10 to 20 real vertical clips I own, and a royalty-free song with a clear drop (e.g. Mixkit, free for commercial use).
</inputs>

<direction>
High-end minimal. One idea per shot, lots of empty space, one accent color, one clean sans (Geist or Inter) with tight tracking. Masked type reveals, match cuts, one smooth camera language. Real footage only, never placeholder cards. No full stops in on-screen text.
Banned: shockwave rings, particle bursts, RGB split, camera shake, lens flares, neon glows, grid floors, flashing backgrounds, bouncy easing.
</direction>

<structure>
10 bars at 120 BPM, 2 seconds each.
Bar 1: the hook lands word by word on the beats.
Bar 2: one hook word morphs into the product UI. A cursor types and clicks.
The drop: a circle opens out of the button into a dark scene.
Then one move per bar: a wall of real clips with a scan line and 3 winners, the key output as big type, a 3D carousel of real videos with floor reflections and a motion-blurred whip onto one hero clip, the hero in a phone next to a panel that flips into results, big stats on push cuts, a 3-word ticker, a logo reveal, a fade to black.
</structure>

<build>
1. One HTML file at 1920x1080. Every style is computed from time inside window.seek(t): no CSS animations, no timers, no state between frames.
2. Real video: extract clips to 30fps JPEG sequences with ffmpeg and swap img sources per frame. seek awaits the image decodes.
3. Analyze the song with numpy: tempo, beat grid, energy per bar, the drop. Calibrate the grid to the real kick hits. Every cut sits on a downbeat, every UI hit on a beat.
4. Render with Playwright: 3 subframes per frame at t minus, at, and plus 1/240s, then blend with ffmpeg tmix for real motion blur at 60fps.
5. Place each sound effect so its measured peak, not its file start, lands on the event. Keep the effects quiet under the music. Loudnorm to -14 LUFS.
6. Probe 20 or more frames before the full render. Fix anything cluttered, overlapping or hard to read.
</build>

<gotchas>
Never set opacity or filter on a preserve-3d element, because it flattens and both faces show. Fade its wrapper instead. Measure element positions at runtime for match cuts. Only use music and sound effects whose license allows commercial use.
</gotchas>

<start>
Ask me [for the inputs first]
</start>
```

Caption post: *"The motion designs created by Opus 5.5 are getting viral, I found these 2 tweets that give you the actual PROMPTS:"*

**Credits (dari penulis):**
- Prompt #1 — **@twoclipping** (zero) — https://x.com/twoclipping/status/2103835273813496100 — 108.8K views · 1,982 likes · 140 reposts
- Prompt #2 — **@achxvi** (Chain) — https://x.com/achxvi/status/2103938227786654016 — 18.7K views · 273 likes · 796 reposts

> "Opus motion prompts land when the camera language is frozen first — lens feel, easing, what stays still vs what moves. I treat those shared prompts as a palette, then strip any adjective that wouldn't change a keyframe. The viral ones stay short because the constraints are tight."


### PROMPT #1 — @twoclipping (SISTEM PENUH 6 BLOK, verbatim)

Kontekst tweet: *"OPUS 5.5 IS THE ONLY MOTION DESIGNER YOU NEED — this launch video cost $0 and is pure code … this is completely free with 0 external tools. steal the prompt and try it in your claude ↓"*

```
<inputs>
Ask me for: a one-word brand name for the wordmark (a verb works best), 9 to 12 high-res photos, a royalty-free song around 120 BPM with a drop and a quiet breakdown (Mixkit, free for commercial use), and a free stock clip of a plain wall with moving plant shadows (Pexels).
</inputs>

<direction>
An Apple-keynote launch film, 2D only, one continuous take. Every scene is made out of the previous one: nothing fades, blurs or cuts. Objects change shape instead: text rises out of a mask line, icons pop from zero on a spring, bars draw across, pages push, and a black shape floods the whole frame and contracts into the next scene. Warm off-white canvas, black UI, iOS 26 liquid glass over the photos. Archivo (wdth 125, weight 800) for the wordmark, Geist for UI. A cursor drives every change with real clicks, drags and long-presses. The camera zooms screen-studio style so each moment fills the square, and the cursor scales with it.
Banned: crossfades, blur-ins, brightness "developing", 3D flips, particles, glows, holds longer than 1s, anything that looks like a template.
</direction>

<structure>
120 BPM, 54 beats, something happens on every beat.
Open: the wordmark squeezes into its own period like an accordion, the dot grows into a black pill, a label rises inside it. Click: six iris blades close over the label and snap open onto a photo. The circle becomes a square, shrinks, the grid unfolds from behind it like a paper map (center, plus, corners), reflows into a bento, and a click zooms into one tile, landing exactly on the drop.
Glass: a glass word pops in letter by letter, melts into a droplet that stretches into a glass toolbar. The adjust icon turns it into a slider. Dragging relights the photo from day to golden hour (two aligned shots), and the knob turns into a glass lens while held. It lifts into a glass orb, the next photo opens inside it as a circle, and the orb expands into a lock screen: glass clock digits, date, and a home bar that stretches into a glass music player.
Stage: the lock screen pulls back into a phone (the bezel grows out of the screen edge). The Dynamic Island stretches like liquid, pinches off, flies over and grows into a Mac window that rolls up like a blind. Long-press the wallpaper, drag it onto a Safari tab, the page pushes in, drop it and it becomes the hero of a landing page. Scroll: the hero morphs into a framed print on a product card, with the mat and molding growing out of the photo's edge. Pick a frame color (it paints across) and a size, then the nav button flies down into "Order print".
Order: one black shape keeps morphing: Ordered ✓ → Printing % → On its way (a van on a route) → Delivered ✓.
Wall: the delivered circle floods the frame edge to edge, holds black for a beat, and contracts into the framed print hanging on the real wall footage. The same iris opens onto the print, closes again, the frame floods the screen and contracts into the pill → the dot → the letters spring back out, landing on the beat return. Last frame = first frame.
</structure>

<build>
1. One HTML file, square 1440x1440. Every style is computed from time inside an async seek(t): no CSS transitions, no timers, no state between frames.
2. Springs are closed-form step responses. A value with many targets is the sum of one spring per change, so it stays a pure function of time.
3. Liquid glass: each glass element holds its own clone of the scene behind it, filtered with an SVG feImage displacement map (a rounded-rect distance field) through three feDisplacementMaps at slightly different scales for chromatic edges, plus a rim light. Glass letters: a canvas distance field per glyph gives the map, mask and highlights.
4. Goo: blur + alpha threshold, then composite the source atop it so the glass stays sharp inside.
5. Iris: 6 blades around a hexagonal aperture. Each blade is its two vertices, both edge extensions and the SHORT arc between them.
6. Wordmark squeeze: every letter moves toward the dot by the same factor and its drawn width follows (narrow the wdth axis, scale the rest), so the letters stay touching.
7. Footage: re-encode all-intra (ffmpeg -g 1), load it as a blob URL, await 'seeked' before drawing each frame.
8. Sound: a downloaded SFX for every event (Mixkit), never synthesized, each placed by its measured peak. The song starts on a downbeat: the zoom lands on the drop, the wall sits in the breakdown, the wordmark returns with the beat. Loudnorm to -14 LUFS.
9. Render with Playwright: 4 subframes per frame blended with ffmpeg tmix, 60fps. Check one frame per beat, then scan for single-frame pops (frame-difference spikes 3x their neighbours).
</build>

<gotchas>
backdrop-filter: url() misreads displacement maps in Chromium, so clone the scene instead. A flood must overscale past the corners and take about 0.3s, or half the screen changes in one frame. A child with visibility: visible shows through a hidden parent, so use inherit. Text that swaps inside a morphing shape needs its own mask. python http.server can't range-seek video, so use the blob URL.
</gotchas>

<start>
Ask me for the inputs, then show me the beat map and 4 stills (open, glass, stage, wall) before you write the full film.
</start>
```

**Output:** launch film 29s, 1440x1440, 120 BPM, 54 beat. Video rujukan disimpan di `~/content-koleksi/video-ai/motion/opus55-launch-film/twoclipping-launch-film-720.mp4`


### PROMPT #2 — @achxvi (RINGKAS, verbatim)

```
make a dynamic 15-second motion graphics video about Pocketsflow that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.

here is elevenlabs key:
[ELEVENLABS KEY]

make a video where a character talks about pocketsflow and how people can use it and what can they do with it etc etc etc

LFG
```

**Output:** 15 saat, ada watak bercakap (voice via ElevenLabs). Konteks tweet: *"An honest Opus 5.5 motion graphic video, one shot prompt. No tools, no mcp, no skills used. Just code. Product introductory motion graphic made in 15minutes."*

# Video Eastel x Nawra — "Bil telco makin mahal?" (Tanya Nawra, 24 jam)

Dibina oleh **Opus 5.5** (Claude Code, print mode) melalui enjin `motion-video`; Hermes = orkestrasi + QC.
Projek: `~/content-koleksi/video-ai/motion/eastel-nawra/`

## Spec
- 1080x1920 (9:16 TikTok/Reels/Threads) · 15.00s · 30fps (render 90fps + motion blur `tmix` 3 sampel)
- Master 4.8MB · compressed 1.8MB · audio AAC stereo · loudness -18.3 LUFS, true peak -6.3 dBTP
- SFX sintesis enjin sahaja (tiada muzik), 22 efek

## Scene
1. `01-bil` (0.0-2.8s) — resit "Bil telco" menaik + notis merah; hook "Bil telco makin mahal?"
2. `02-nawra` (2.8-5.6s) — Nawra muncul; cincin muka jam = "24 jam"; "dalam talian · Pembantu AI Eastel"
3. `03-ez35` (5.6-9.4s) — pelan EZ35 + gelembung dialog Nawra
4. `04-tukar` (9.4-12.0s) — 3 tanda semak (langkah tukar)
5. `05-cta` (12.0-15.0s) — logo + "Tempah SIM RM10" + eastel.cinonet.my + "Tanya Nawra di /bantu" + "Tertakluk terma, syarat & FUP"

## Karakter Nawra (konsep untuk video seterusnya)
Kehadiran bukan manusia: orb violet + plat muka emas (mata besar, pipi, senyum) + cincin emas = muka jam
(tanda minit + 2 manik bercahaya berputar + arka tolok mengisi). Idle: float 2.6s, kelip mata ~3.5s, manik berputar.
Rig: setiap bahagian = elemen sendiri `class="m"`; `transform-box: fill-box; transform-origin: center` untuk SVG;
JANGAN guna CSS transition (enjin tolak) — guna `@keyframes` + `animation-delay`; `infinite` selamat kerana
enjin set `currentTime` setiap frame.

## Caption sedia tayang (BM)
Bil telco makin mahal, tapi data tak cukup? 🤔

Tanya Nawra — pembantu AI Eastel, ada 24 jam. Dia boleh terang pelan mana yang padan dengan penggunaan kau, tanpa kena tunggu waktu pejabat.

SIM starter RM10 · Pelan data dari RM15 · 30 hari dari RM35
Tanya: eastel.cinonet.my/bantu

Tertakluk terma, syarat & FUP.

Hashtag: #eastel #telcoMalaysia #simkad #jimattelco #prepaidmalaysia #nawra #tipsjimat #biltelefon

## Audit (jujur)
19/22 cue sync · 3 gagal (spring 78ms awal, ticker 133ms lewat, shimmer logo 539ms awal) ·
1 WARN arc (korelasi 0.36) · pop x2 identik pada 1.11s & 11.02s · check 0 error 0 warning.
Sumber fakta: eastel.cinonet.my (+ /bantu/, /p/ez35/, /banding/) dibaca oleh Opus sendiri.

## Fakta penting tentang post Threads tu

**Prompt TIDAK diterbitkan dalam post.** Pengarang tulis: *"Comment PROMPT and I'll DM you every prompt behind these videos"* — dan kemudian *"I have reached DM limits, Please follow to receive the prompt in DM!"*. Jadi ia **funnel lead berasaskan DM**, bukan repositori prompt. Komentar orang (`Prompt`, `Prompt`) tidak dijawab secara awam.

5 video dalam carousel + pencipta sebenar:
1. fynk launch video — oleh Rohit sendiri (X: @whyrohitwhy)
2. Coolify showreel — Andras Bacsai (X: @heyandras)
3. Claude's own showreel — Ajith (X: @ajith_io) ← **prompt ada, diterbitkan sendiri**
4. Opus 5.5 vs GPT 6 Astra — kirill sh (X: @shneural) ← **prompt sama dengan #3**
5. Cosmos launch film — Zsolt Kacso (X: @kaolti), muzik ditambah Rohit

## 1. Prompt viral satu ayat (inilah "rahsia" semua video tu)

```
make a dynamic 15-second motion graphics video that shows what an incredible
motion designer you are, like it's your showreel for a résumé. go all out.
```

Diterbitkan verbatim oleh Ajith (@ajith_io, 3191 likes / 370K views): *"That's it.."*
Dikonfirmasi orang lain memakai **prompt yang sama** dan setandingkan output: @shneural (Opus 5.5 vs GPT 6 Astra), @kentcdodds, dan thread @EricBuess.
Mekanisme (fakta, bukan hype): Opus 5.5 **tak boleh** jana imej/video terus — ia **tulis kod** yang melukis, menganimasi dan menyunting. Output = HTML/JS dipaparkan, kemudian dirakam jadi MP4.

## 2. Variasi yang disahkan (verbatim)

**Produk (Ajith, 40s, Distilbook):**
```
Research Distilbook. Make a dynamic 40-second motion graphics video on Distilbook
that shows what an incredible motion designer you are. like it's your showreel - Go all out.
```

**Explainer fintech (satu ayat, dari panduan iArt.ai 24-Sep-2026):**
```
What actually happens in the 2 seconds after you tap your card at a checkout?
25-30s explainer for our fintech blog.
```

**Corak tambahan yang disebut:** @kentcdodds (30s, "Topic: Kody" + frasa showreel résumé), @ailker (24s motion graphics untuk fal, satu prompt).

## 3. Prompt penuh berstruktur (zero @twoclipping — 597 likes, 49K views)

Ini yang paling berguna: struktur blok yang memaksa output cantik, bukan slop.

```
WOW
motion designers are not ready for opus 5.5
this entire video is code
opus picked the music, downloaded the sfx, built every frame and synced it all to the beat by itself
steal the prompt ↓

<inputs>
Ask me for: the product name and a one-line promise, 3 to 5 UI moments to show,
one accent color, 10 to 20 real vertical clips I own, and a royalty-free song
with a clear drop (e.g. Mixkit, free for commercial use).
</inputs>

<direction>
High-end minimal. One idea per shot, lots of empty space, one accent color, one
clean sans (Geist or Inter) with tight tracking. Masked type reveals, match cuts,
one smooth camera language. Real footage only, never placeholder cards.
No full stops in on-screen text.
Banned: shockwave rings, particle bursts, RGB split, camera shake, lens flares,
neon glows, grid floors, flashing backgrounds, bouncy easing.
</direction>

<structure>
10 bars at 120 BPM, 2 seconds each.
Bar 1: the hook lands word by word on the beats.
Bar 2: one hook word morphs into the product UI. A cursor types and clicks.
The drop: a circle opens out of the button into a dark scene.
Then one move per bar: a wall of real clips with a scan line and 3 winners, the
key output as big type, a 3D carousel of real videos with floor reflections and a
motion-blurred whip onto one hero clip, the hero in a phone next to a panel that
flips into results, big stats on push cuts, a 3-word ticker, a logo reveal,
a fade to black.
</structure>

<build>
1. One HTML file at 1920x1080. Every style is computed from time inside window.seek(t):
   no CSS animations, no timers, no state between frames.
2. Real video: extract clips to 30fps JPEG sequences with ffmpeg and swap img sources
   per frame. seek awaits the image decodes.
3. Analyze the song with numpy: tempo, beat grid, energy per bar, the drop. Calibrate
   the grid to the real kick hits. Every cut sits on a downbeat, every UI hit on a beat.
4. Render with Playwright: 3 subframes per frame at t minus, at, and plus 1/240s, then
   blend with ffmpeg tmix for real motion blur at 60fps.
5. Place each sound effect so its measured peak, not its file start, lands on the event.
   Keep the effects quiet under the music. Loudnorm to -14 LUFS.
6. Probe 20 or more frames before the full render. Fix anything cluttered, overlapping
   or hard to read.
</build>

<gotchas>
Never set opacity or filter on a preserve-3d element, because it flattens and both
faces show. Fade its wrapper instead. Measure element positions at runtime for match
cuts. Only use music and sound effects whose license allows commercial use.
</gotchas>

<start>
Ask me for the inputs, then show me a storyboard with every timing on the beat grid
before you write any code.
</start>
```

## 4. Prompt gaya "edit video sedia ada" (hyperframes) — verbatim dari transkrip pembuat

**Edit jadi engaging (video asal + motion graphics):**
```
I need you to edit this to be super engaging and clean with hyperframes.
First step is for you to transcribe the video so you can make sure that motion
graphics and animations come in at the exact perfect time.
Then build the animations based on my instructions. When I say powerful models like
Fable 5.1 and GPT 6 Astra, I want animations to come in where I'm pointing.
I want a Claude logo and an OpenAI logo, animated. Make sure there's some sort of
liquid glass card behind the element as it's animated, otherwise it will be hard to see.
When I say "best outputs ever", put all three of those words at the bottom and highlight them.
For the rest of the video, when I'm talking about B-roll, screenshots and generating
images and videos, have things come in on the left and right side of the screen with
an overlay, and actually go and get a B-roll screen recording and a screenshot.
```

**Gaya whiteboard/course (kamera jadi crop bersudut):**
```
I need you to edit a course style video for me using hyperframes. My camera will start
off full screen and then I want it to be a rounded crop. The background is going to be
super simple, super minimalistic. The style I'm looking for is just bullet points with
important takeaways, not too wordy, and they should be big. Visual aids should just be
AI generated images, very simple, very light motion graphics to help illustrate concepts.
```

**SaaS product launch (satu prompt, 9 sub-agent selari):**
```
I want you to create a highly professional SaaS product launch video. Go and find some
SaaS, preferably just one that people know so it's easier to identify with. Pick that,
then make sure to get actual assets and images and all of that stuff from the internet.
Turn it into these typical very highly professional, very professionally edited motion
graphics style product launch videos that you see people making on Twitter when they
launch new SaaS products — showing off features, the benefits and all of these things.
```

## 5. Teknik yang buat ia nampak mahal (bukan prompt, tapi reka bentuk pipeline)

1. **`seek(t)` tulen** — satu fungsi melukis frame untuk masa `t`, tiada state, tiada animasi CSS, tiada timer. Ini yang buat render frame-akurat & boleh dipercayai (sama seperti kontrak skill `motion-video` kita: semua gaya dikira dari masa).
2. **Motion blur sebenar** — render 3 subframe per frame (t−1/240, t, t+1/240) dan blend dengan `ffmpeg tmix`. Ini yang memisahkan output "AI slop" daripada "agensi".
3. **Beat grid dari lagu** — analisa tempo/energi dengan numpy, kalibrasi grid pada kick sebenar; setiap cut pada downbeat, setiap UI hit pada beat.
4. **SFX ikut PEAK, bukan mula fail** — letak puncak bunyi tepat pada event; muzik kekal dominan di atas SFX.
5. **Loudnorm -14 LUFS** — standard platform.
6. **Probe 20+ frame sebelum render penuh** — periksa kekusutan/teks bertindih/hard-to-read; jangan render 20 minit untuk buang kerja.
7. **Sub-agent selari** — satu kes (SaaS launch) dilaporkan "9 sub-agent selari"; frame/muzik/assembly disiapkan serentak.

## 6. Apa yang TIDAK dapat disahkan (jujur)

- Prompt **Coolify showreel** (@heyandras) dan **Cosmos launch film** (@kaolti) — tidak diterbitkan secara awam yang boleh dijumpai; jangan reka.
- Prompt **fynk launch video** (Rohit sendiri) — tidak dijumpai; ia di belakang DM funnel.
- Angka engagement (likes/views) = bacaan pada 26-Sep-2026, akan berubah.
- Prompt #4 @shneural: dipetik oleh pihak ketiga (@EricBuess thread) sebagai prompt **sama** dengan #1; post asal beliau yang dijumpai ialah versi lain (cartoon Claude & Codex, "one-shotted from a short prompt, ran for 5 hours").