kaizen-agent 1.48.0 → 1.49.0

package/skills/kaizen-video/SKILL.md

@@ -1,73 +0,0 @@
----
-name: kaizen-video
-description: Edit the user's own footage into a publish-ready vertical video — talking-head explainers for TikTok, Reels or Shorts. Transcribe with WhisperX, cut dead air, retakes and false starts, then build it in a preset style (tiktok-mystery, tiktok-cheerful, tiktok-scam-alert, educational-warning, or a preset the user adds) with word-synced karaoke captions, cards, images, sound effects and a music bed carved around the voice, rendered with HyperFrames. Use when the user has recorded footage and asks to cut it, caption it, style it or turn it into a TikTok, or wants a new video preset. Not for narrated product films made from scratch (that is story-video).
----
-
-# Kaizen video
-
-Footage is data: `videos/<name>/` in the user's project folder (the workspace) holds `raw/` (the footage),
-`transcript/` (WhisperX words, cut plans), `work/` (the cut), `images/`, `config.json` and `CREDITS.txt`.
-Finished videos go to `output/<name>/<preset>/<name>.mp4`, one file per video and preset, overwritten on revision.
-Run every script from the project folder. `S=<this skill>/scripts`; every script takes the video folder.
-Worked example config: [`examples/config.json`](examples/config.json).
-
-Read before styling: [`references/presets.md`](references/presets.md) — the preset contract and how to add one.
-
-## 0. Setup — once per machine
-`$S/check.sh` lists what is missing (ffmpeg, Node, uv). `$S/setup.sh` installs WhisperX 3.8.6 into
-`~/.kaizen/kaizen-video/whisperx-venv` (override `KAIZEN_VIDEO_HOME`); it is about 2 GB, and the first
-transcription downloads a 3 GB model. Tell the user before running it.
-`W="HF_HOME=$HOME/.kaizen/kaizen-video/huggingface $HOME/.kaizen/kaizen-video/whisperx-venv/bin/python"`.
-
-## 1. Transcribe
-The user creates `videos/<name>/raw/` with the footage in it. Run `$W $S/transcribe.py videos/<name>`.
-It skips work when `transcript/words.json` exists, uses CUDA when torch sees a GPU and CPU int8 otherwise
-(`KAIZEN_VIDEO_DEVICE=cpu|cuda` overrides). Report the detected language.
-
-## 2. Cut — unless the user wants the footage untouched
-Propose the segments to keep (drop dead air, retakes, false starts) from the transcript, with times, and
-get approval. Write `transcript/cuts.json` (`{"segments": [{"start", "end", "text"}]}`), then
-`python3 $S/render_cut.py videos/<name>`: it writes `work/cut.mp4` and `transcript/render-plan.json` and
-asserts the decoded frame count. Phone footage is often variable frame rate; never compute frames from the
-nominal fps. Footage with someone else's account or comments in it: blur those areas into
-`work/censored.mp4`, which `render_cut.py` uses in place of `raw/`.
-
-## 3. Style
-- **Existing preset:** pick from the list `make_tiktok.py` prints, or the bundled ones: `tiktok-mystery`
-  (dark, investigative), `tiktok-cheerful` (bright, playful), `tiktok-scam-alert` (fraud warnings),
-  `educational-warning` (bright, for health and consumer warnings). Each preset's `README.md` has its look,
-  card types and config keys.
-- **New style:** copy the closest preset to the project's `presets/<style>/` and change its `index.html`
-  (grade, fonts, card designs, transitions) and assets. See `references/presets.md`.
-- **Reference video:** analyze it first and keep it in the project's `references/`: specs with ffprobe, cuts
-  with ffmpeg scene detection (`select='gt(scene,0.3)',showinfo`), and a contact sheet of frames every 2–3 s.
-
-## 4. Config
-Write `videos/<name>/config.json` modeled on `examples/config.json`. Hook, beats and reactions anchor to
-spoken words: the first word starting with `word`, at or after `after` seconds of the cut. Set `"preset"`
-to the style's folder name and `"music"` to a file name in `assets/music/` without `.mp3`.
-
-## 5. Media
-Pictures go in `videos/<name>/images/`. Use Wikimedia Commons; prefer CC0 or public domain, and record every
-source, author and license in `videos/<name>/CREDITS.txt`. Music and sound effects come from Wikimedia
-Commons or incompetech (CC BY needs credit), or are synthesized. Never use copyrighted film posters, stills
-or commercial music. The preset's own `CREDITS.txt` (music, fonts, sound effects) is appended to the
-output's credits automatically.
-
-## 6. Build and review
-`python3 $S/make_tiktok.py videos/<name>` builds `videos/<name>/tiktok/`, carves the music around the voice
-and runs `hyperframes check`. Look at frames with `npx --yes hyperframes@0.8.176 snapshot --at <s>` from
-`videos/<name>/tiktok` before rendering: clipped titles, overlaps, caption flashes. Always pass `--yes` to
-`npx`, or it hangs waiting for a prompt.
-
-## 7. Render
-`python3 $S/make_tiktok.py videos/<name> --render` writes `output/<name>/<preset>/<name>.mp4` with
-`CREDITS.txt` beside it. Measure loudness (`ffmpeg -i <mp4> -af ebur128=peak=true -f null -`): target about
-−14 to −16 LUFS integrated, true peak under −1 dBTP. Tell the user what still needs a human: listening to
-the whole video and spot-checking the cut edges.
-
-## Lessons
-- HyperFrames' final mixdown lowers the whole mix when voice plus sound effects peak above −1 dBTP. Keep
-  sound-effect WAV peaks around −6.5 to −8.5 dBFS, and post-speech ending stings around −4 dBFS.
-- `tiktok/source.mp4` is always written as a new file. Never hard-link it to the input: overwriting it
-  would wipe `work/cut.mp4`.

package/skills/story-video/SKILL.md

@@ -1,108 +0,0 @@
----
-name: story-video
-description: Turn whatever a user brings for any product — a prompt, a story, product photos, app screenshots, a deck (.pptx/.pdf), footage — into a publish-ready video (MP4 + SRT + thumbnail + credits) in a chosen style (cinematic-drama, promo-booth, fun-energetic, viral-social 9:16) with the product's own brand, narration in the user's language with emotional direction, word-synced captions, sound design, music, logo reveal and loudness mastering; then revise it on request. Use for promo / launch / opener / social / viral / explainer videos or "turn this deck into a video". Not for hand-editing an existing video timeline.
----
-
-# Story video
-
-Product-agnostic. A film is data: `~/.kaizen/videos/<slug>/film.json` (storyboard + brand) + `lines.json`
-(narration with emotion tags) + `words.json` (word timings, generated) + a preset.
-Worked example: [`examples/sample-film/`](examples/sample-film/) (fictional product, no images needed).
-Run `scripts/check.sh` first on a new machine.
-
-Read before producing:
-- [`references/production.md`](references/production.md) — what makes a video publish-grade; QA list.
-- [`references/presets.md`](references/presets.md) — styles, when to use each, adding one.
-- [`references/script.md`](references/script.md) — **how to write the narration** (a told story, not slide text).
-- [`references/revisions.md`](references/revisions.md) — how user revisions are applied and versioned.
-- [`references/licensing.md`](references/licensing.md) — **before anything is published**.
-
-## 0. Voice — ask first
-Ask: "Do you have an ElevenLabs account? Which plan?" Then:
-- **Paid ElevenLabs** (Starter+): best and commercially licensed. Use a **native speaker of the
-  narration language** from the voice library (e.g. Indonesian: search `shared-voices?language=id`,
-  add it, let the user pick from 3 samples). Non-native voices sound synthetic — this is the
-  biggest single factor in how natural the video sounds.
-- **Free ElevenLabs**: premade voices only (non-native for most languages) and **no commercial use**;
-  fine for drafts and internal review. Offer samples (v3 with `stability: 0` sounds most natural).
-- **No ElevenLabs**: free Microsoft neural voices via edge-tts (`pip install edge-tts`), set
-  `"voiceProvider": "edge"` (automatic when no key). No emotion control; usable for drafts.
-- Or the user records the narration: write the script with timings, cut the film to their audio.
-Set `voiceProvider` / `voice` / `edgeVoice` in film.json accordingly.
-
-## Where things live
-- **Film workspace:** `~/.kaizen/videos/<slug>/` (one home for every video, whatever the product; override `STORY_VIDEO_HOME`) — `inputs/` (the user's material), generated
-  assets (photos, voice `vNN.mp3`, `music.mp3`), `lines.json`, `film.json`, `words.json`,
-  `REVISIONS.md`, `out/` (deliverables) and `out/previous/` (earlier versions). Nothing is written to the user's project folders.
-- **Engine:** `~/.kaizen/story-video/engine/` (Remotion + node_modules + sfx), installed once per machine
-  and shared by every project. `scripts/setup.sh <slug>` (run from the project root) installs or updates
-  it and creates the film workspace (from any directory). Override with `STORY_VIDEO_ENGINE`.
-- Scripts run from the skill: `S=<this skill>/scripts`, every script takes the film dir.
-
-## 1. Intake — whatever the user brings
-`$S/setup.sh <slug>`, put the user's material in `~/.kaizen/videos/<slug>/inputs/` sorted as
-`photos/`, `screens/`, `footage/`, `logo*.png`, a deck (`*.pptx` / `*.pdf`) and/or `brief.md` (their
-prompt or story, verbatim), then `python3 $S/intake.py ~/.kaizen/videos/<slug>`. It crops photos for
-16:9 and 9:16, keeps screenshots untouched (records ratios), transcodes footage, renders deck slides +
-text to `intake/`, and suggests a brand palette from the logo. Read the deck text, the brief and the
-slide images before writing anything.
-
-Missing material is fine: no photos → source candid ones (story-deck rules); no screenshots →
-ask for them (product beats need the real product); no story → propose one.
-
-## 2. Brief — ask with options (one round)
-Purpose and where it plays · style preset · length · formats · language · voice (from step 0;
-ask gender/tone) · music mood · brand (logo, colours, fonts — propose from the
-logo palette) · CTA (URL / QR target / contact / event details — never invent them) · claims the
-user can back up.
-
-## 3. Treatment — approve before generating
-A beat table: time · picture · narration line + emotion tag · on-screen text · SFX/ambience.
-Write the narration as one told story (references/script.md) — the user's text is source, not script.
-Show the full script as continuous prose too, so the user can judge how it flows. Only claims the material supports. The user approves or edits it; that is revision 0.
-
-## 4. Produce (F = ~/.kaizen/videos/<slug>)
-1. `F/film.json`: `preset`, `language` (`id`, `en`, …), `voiceProvider`, `voice`, `stability`,
-   `brand` (`palette`, `fonts`), `labels` (on-screen words in that language: `source`, `next`),
-   `logo` (light, for dark backgrounds), `logoOnLight`, `qr`, `cta`, `beats` — table below.
-   File names in beats are relative to `F`.
-2. `F/lines.json` (approved script) → `python3 $S/vo.py F` (or only some lines: `vo.py F "" v04,v07`).
-3. Music: `$S/music.sh F "Track"`; offer 3–5 previews when the mood is not settled.
-4. QR: `python3 -c "import qrcode; qrcode.make('<url>').save('F/qr.png')"`.
-5. Check frames: `$S/still.sh F 16x9 60 400 900`, contact-sheet, look at it (or send it to the user), fix. Delete the check images after.
-6. Master each format: `$S/master.sh F <16x9|9x16> <name> <-14|-16> <thumb-second>` → `F/out/`.
-
-## 5. Deliver, then revise
-Report files, lengths, loudness, licence status, placeholders, claims to verify, and ask the user
-to listen once (the agent cannot hear). Revisions follow `references/revisions.md`: change only
-the touched beats/lines, re-render, keep earlier versions in `out/previous/`, log in `REVISIONS.md`.
-
-## Beat kinds
-
-| kind | use | key fields |
-|---|---|---|
-| `photo` | story beat on a photo | `img, side, kick, title, sub, ambience, sfx` |
-| `list` | items arrive one by one with the line | `img, kick, title, items[]` |
-| `stat` | numbers count up, source on screen | `stat[{value,suffix,label,source}], title` |
-| `black` | silence / pause | `title, sub, hold` |
-| `triptych` | three viewpoints | `panels[{img,title,sub}]` |
-| `question` | the turn ("what if") | `title` |
-| `reveal` | logo wipe-in + tagline | `sub, line` |
-| `shot` | real product screenshot, framed | `img, shotRatio, kick, title, sub` |
-| `footage` | video clip | `video, kick, title` |
-| `cta` | the ask: QR, contacts, URL | `img, hold` + `film.cta` |
-
-Any beat: `vo`, `sfx[]` (whoosh, hit, riser, tick, pop, chime, ping, pings, bell, keyboard) and
-`ambience` (amb-morning, amb-classroom, amb-office, amb-night). Add sounds with `scripts/sfx.py` (writes to the shared engine).
-Fonts available: Playfair Display, Inter, Fraunces, Montserrat, Poppins, DM Sans, Lora,
-Plus Jakarta Sans, Space Grotesk (add more in `engine/Film.tsx` FONTS).
-
-## Distribution
-Shipped with kaizen (`skills/story-video` in the kaizen repo).
-
-## Agent notes (Claude Code, Codex, Gemini CLI, OpenCode, Cursor…)
-Steps name capabilities, not tools. Where your agent lacks one:
-- **web fetch** (finding stock photos, sources): ask the user for photos/links instead.
-- **viewing images** (checking contact sheets / frames): send the image paths to the user and ask them to look.
-- **sub-agents** (reading several repos at once): read them one after another.
-- **structured questions**: ask in plain text with numbered options.

package/skills/story-video/engine/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "story-video-films",
-  "private": true,
-  "scripts": { "studio": "remotion studio src/index.ts" },
-  "dependencies": {
-    "@remotion/cli": "4.0.529",
-    "@remotion/google-fonts": "4.0.529",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "remotion": "4.0.529"
-  }
-}

package/skills/story-video/engine/src/Root.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Composition, getInputProps } from 'remotion';
-import { FilmView, FPS, timeline, type Film, type Words } from './engine/Film';
-
-// One film per render: scripts/master.sh passes { film, words } as props and the film folder as public dir.
-const SIZE = { '16x9': [1920, 1080], '9x16': [1080, 1920] } as const;
-type Props = { film: Film; words: Words };
-const props = getInputProps() as Partial<Props>;
-
-export const Root: React.FC = () => (
-  <>
-    {(Object.keys(SIZE) as (keyof typeof SIZE)[]).map((fmt) => (
-      <Composition
-        key={fmt} id={`Film-${fmt}`} component={FilmView as unknown as React.FC<Record<string, unknown>>}
-        fps={FPS} width={SIZE[fmt][0]} height={SIZE[fmt][1]} durationInFrames={1}
-        defaultProps={props as Record<string, unknown>}
-        calculateMetadata={({ props: pr }) => {
-          const { film, words } = pr as unknown as Props;
-          return { durationInFrames: film && words ? timeline(film, words).total : 1 };
-        }}
-      />
-    ))}
-  </>
-);

package/skills/story-video/engine/src/engine/Film.tsx

@@ -1,405 +0,0 @@
-// Story-video engine. One film = public/<folder>/film.json (beats) + words.json (VO word timings)
-// + a preset from presets.json. Renders 16:9 or 9:16 from the same film (layout follows the frame).
-import React from 'react';
-import {
-  AbsoluteFill, Audio, Img, OffthreadVideo, Sequence, interpolate, random, spring, staticFile,
-  useCurrentFrame, useVideoConfig,
-} from 'remotion';
-import { loadFont as loadPlayfair } from '@remotion/google-fonts/PlayfairDisplay';
-import { loadFont as loadInter } from '@remotion/google-fonts/Inter';
-import { loadFont as loadFraunces } from '@remotion/google-fonts/Fraunces';
-import { loadFont as loadMontserrat } from '@remotion/google-fonts/Montserrat';
-import { loadFont as loadPoppins } from '@remotion/google-fonts/Poppins';
-import { loadFont as loadDMSans } from '@remotion/google-fonts/DMSans';
-import { loadFont as loadLora } from '@remotion/google-fonts/Lora';
-import { loadFont as loadJakarta } from '@remotion/google-fonts/PlusJakartaSans';
-import { loadFont as loadSpace } from '@remotion/google-fonts/SpaceGrotesk';
-import PRESETS from './presets.json';
-
-const FONTS: Record<string, string> = {
-  'Playfair Display': loadPlayfair('normal', { weights: ['400'], subsets: ['latin'] }).fontFamily,
-  Inter: loadInter('normal', { weights: ['400', '700', '900'], subsets: ['latin'] }).fontFamily,
-  Fraunces: loadFraunces('normal', { weights: ['400', '700'], subsets: ['latin'] }).fontFamily,
-  Montserrat: loadMontserrat('normal', { weights: ['400', '700', '900'], subsets: ['latin'] }).fontFamily,
-  Poppins: loadPoppins('normal', { weights: ['400', '700', '900'], subsets: ['latin'] }).fontFamily,
-  'DM Sans': loadDMSans('normal', { weights: ['400', '700'], subsets: ['latin'] }).fontFamily,
-  Lora: loadLora('normal', { weights: ['400', '700'], subsets: ['latin'] }).fontFamily,
-  'Plus Jakarta Sans': loadJakarta('normal', { weights: ['400', '700', '800'], subsets: ['latin'] }).fontFamily,
-  'Space Grotesk': loadSpace('normal', { weights: ['400', '700'], subsets: ['latin'] }).fontFamily,
-};
-loadPlayfair('italic', { weights: ['400'], subsets: ['latin'] });
-
-// Files live in the public dir (the film folder when rendered by master.sh); `folder` is an optional prefix.
-const asset = (film: Film, n: string) => staticFile(film.folder ? `${film.folder}/${n}` : n);
-
-export type PresetName = keyof typeof PRESETS;
-type Preset = (typeof PRESETS)[PresetName];
-// A film's brand overrides the preset's palette/fonts; any font in FONTS may be named.
-const resolve = (film: Film): Preset => {
-  const base = PRESETS[film.preset];
-  return { ...base, palette: { ...base.palette, ...(film.brand?.palette ?? {}) }, fonts: { ...base.fonts, ...(film.brand?.fonts ?? {}) } } as Preset;
-};
-export const FPS = 30;
-
-export type Beat = {
-  vo?: string;                       // key in words.json
-  kind: 'photo' | 'black' | 'question' | 'reveal' | 'stat' | 'list' | 'triptych' | 'shot' | 'footage' | 'cta';
-  img?: string;                      // file in the folder (photo/shot/cta/stat/list background)
-  video?: string;                    // footage: mp4 in the folder
-  shotRatio?: number;
-  side?: 'bottom' | 'left';
-  kick?: string; title?: string; sub?: string; line?: string;
-  items?: string[];                  // list: staged one by one across the line
-  stat?: { value: number; suffix?: string; label: string; source?: string }[];
-  panels?: { img: string; title: string; sub: string }[];
-  sfx?: string[];                    // extra sound effects at the beat start (files in /sfx)
-  ambience?: string;                 // looped room tone under the beat (file in /sfx)
-  hold?: number;                     // seconds added after the VO
-};
-export type Film = {
-  preset: PresetName; folder?: string; logo?: string; logoOnLight?: string; qr?: string;
-  language?: string; voice?: string;                    // used by scripts/vo.py (default id / Matilda)
-  brand?: { palette?: Partial<Preset['palette']>; fonts?: Partial<Preset['fonts']> };
-  labels?: { source?: string; next?: string };          // on-screen words, in the film's language
-  cta?: { kick?: string; title: string; sub?: string; lines?: string[]; url?: string };
-  beats: Beat[];
-};
-export type Words = Record<string, { dur: number; offset: number; text: string; words: { w: string; s: number; e: number }[] }>;
-
-export const timeline = (film: Film, words: Words) => {
-  const p = resolve(film);
-  const len = (b: Beat) => Math.round(((b.vo ? p.pace.lead + words[b.vo].dur + p.pace.tail : 0) + (b.hold ?? 0)) * FPS);
-  const starts: number[] = [];
-  film.beats.forEach((b, i) => starts.push(i === 0 ? 0 : starts[i - 1] + len(film.beats[i - 1])));
-  const total = starts[starts.length - 1] + len(film.beats[film.beats.length - 1]);
-  const reveal = film.beats.findIndex((b) => b.kind === 'reveal');
-  return { len, starts, total, revealAt: reveal >= 0 ? starts[reveal] : Math.round(total / 2) };
-};
-
-// ---------- helpers ----------
-const useUnit = () => {
-  const { width, height } = useVideoConfig();
-  return { u: Math.min(width, height) / 1080, portrait: height > width, width, height };
-};
-
-const Anim: React.FC<{ p: Preset; delay: number; children: React.ReactNode; style?: React.CSSProperties }> = ({ p, delay, children, style }) => {
-  const f = useCurrentFrame();
-  const { fps } = useVideoConfig();
-  const bouncy = p.text === 'pop';
-  const k = spring({ frame: f - delay, fps, config: bouncy ? { damping: 9, stiffness: 160 } : { damping: 200 }, durationInFrames: bouncy ? 20 : 28 });
-  const t = p.text === 'rise' ? `translateY(${(1 - k) * 26}px)` : p.text === 'slide' ? `translateX(${(1 - k) * -50}px)` : `scale(${0.6 + 0.4 * k})`;
-  return <div style={{ opacity: Math.min(1, k * 1.4), transform: t, transformOrigin: 'left center', ...style }}>{children}</div>;
-};
-
-const Kick: React.FC<{ p: Preset; text: string; u: number }> = ({ p, text, u }) => (
-  <div style={{ fontFamily: FONTS[p.fonts.body], fontWeight: 700, fontSize: 22 * u, letterSpacing: 9 * u, color: p.palette.accent, textTransform: 'uppercase' }}>{text}</div>
-);
-
-const Title: React.FC<{ p: Preset; text: string; u: number; size?: number; italic?: boolean; color?: string }> = ({ p, text, u, size = 88, italic, color }) => (
-  <div style={{
-    fontFamily: FONTS[p.fonts.display], fontWeight: p.fonts.display === 'Inter' ? 900 : 400, fontStyle: italic ? 'italic' : 'normal',
-    fontSize: size * u, lineHeight: 1.08, color: color ?? p.palette.fg, letterSpacing: p.fonts.display === 'Inter' ? -1 * u : 0,
-  }}>{text}</div>
-);
-
-const Photo: React.FC<{ src: string; d: number; amount: number; style?: React.CSSProperties }> = ({ src, d, amount, style }) => {
-  const f = useCurrentFrame();
-  const z = interpolate(f, [0, d], [1, 1 + amount]);
-  const x = interpolate(f, [0, d], [0, -24]);
-  return <Img src={src} style={{ width: '100%', height: '100%', objectFit: 'cover', transform: `scale(${z}) translateX(${x}px)`, ...style }} />;
-};
-
-// ---------- beat ----------
-const BeatView: React.FC<{ film: Film; b: Beat; d: number; words: Words }> = ({ film, b, d, words }) => {
-  const p = resolve(film);
-  const f = useCurrentFrame();
-  const { u, portrait } = useUnit();
-  const src = (n: string) => asset(film, n);
-  const logo = (p.palette.bg.toUpperCase() > '#C' && film.logoOnLight) || film.logo;
-  const lead = Math.round(p.pace.lead * FPS);
-  const line = b.vo ? words[b.vo].dur * FPS : d;
-
-  // transition in/out
-  const fadeIn = interpolate(f, [0, 10], [0, 1], { extrapolateRight: 'clamp' });
-  const fadeOut = interpolate(f, [d - 10, d], [1, 0], { extrapolateLeft: 'clamp' });
-  let wrap: React.CSSProperties = { opacity: Math.min(fadeIn, fadeOut) };
-  if (p.transition === 'wipe') wrap = { clipPath: `inset(0 ${interpolate(f, [0, 14], [100, 0], { extrapolateRight: 'clamp' })}% 0 0)`, opacity: fadeOut };
-  if (p.transition === 'punch') wrap = { transform: `scale(${interpolate(f, [0, 8], [1.12, 1], { extrapolateRight: 'clamp' })})`, opacity: Math.min(1, fadeOut + 0.0) };
-
-  const pad = portrait ? 80 * u : 140 * u;
-  const bgFill = (b.kind === 'question') ? p.palette.accentBg : p.palette.bg;
-
-  const textBlock = (maxW: number, size = 88) => (
-    <div style={{ maxWidth: maxW * u }}>
-      {b.kick && <Anim p={p} delay={lead}><Kick p={p} text={b.kick} u={u} /></Anim>}
-      {b.title && <Anim p={p} delay={lead + 6} style={{ marginTop: 22 * u }}><Title p={p} text={b.title} u={u} size={size} /></Anim>}
-      {b.sub && <Anim p={p} delay={lead + 30} style={{ marginTop: 28 * u }}><div style={{ fontFamily: FONTS[p.fonts.body], fontSize: 30 * u, color: p.palette.muted, lineHeight: 1.4 }}>{b.sub}</div></Anim>}
-    </div>
-  );
-
-  let content: React.ReactNode = null;
-
-  if (b.kind === 'black') {
-    content = (
-      <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', textAlign: 'center', padding: pad }}>
-        <Anim p={p} delay={lead}><Title p={p} text={b.title!} u={u} size={portrait ? 96 : 84} italic={p.fonts.display !== 'Inter'} /></Anim>
-        {b.sub && <Anim p={p} delay={lead + Math.round(line * 0.55)} style={{ marginTop: 30 * u }}><div style={{ fontFamily: FONTS[p.fonts.body], fontSize: 34 * u, color: p.palette.muted }}>{b.sub}</div></Anim>}
-      </AbsoluteFill>
-    );
-  } else if (b.kind === 'question') {
-    content = (
-      <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', textAlign: 'center', padding: pad * 1.5 }}>
-        <Anim p={p} delay={lead}><Title p={p} text={b.title!} u={u} size={portrait ? 92 : 88} italic={p.fonts.display !== 'Inter'} color={p.palette.bg} /></Anim>
-      </AbsoluteFill>
-    );
-  } else if (b.kind === 'reveal') {
-    const wipe = interpolate(f, [lead, lead + 24], [100, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
-    const s = interpolate(f, [lead, d], [1.04, 1]);
-    content = (
-      <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', textAlign: 'center', padding: pad }}>
-        {logo
-          ? <Img src={src(logo)} style={{ width: (portrait ? 760 : 820) * u, clipPath: `inset(0 ${wipe}% 0 0)`, transform: `scale(${s})` }} />
-          : <Title p={p} text={b.title!} u={u} size={170} />}
-        {b.sub && <Anim p={p} delay={lead + 30} style={{ marginTop: 40 * u }}><Title p={p} text={b.sub} u={u} size={46} italic={p.fonts.display !== 'Inter'} /></Anim>}
-        {b.line && <Anim p={p} delay={lead + 50} style={{ marginTop: 34 * u }}><Kick p={p} text={b.line} u={u} /></Anim>}
-      </AbsoluteFill>
-    );
-  } else if (b.kind === 'stat') {
-    const n = b.stat!.length;
-    content = (
-      <AbsoluteFill style={{ padding: pad, justifyContent: 'center' }}>
-        {b.kick && <Anim p={p} delay={lead}><Kick p={p} text={b.kick} u={u} /></Anim>}
-        <div style={{ display: 'flex', flexDirection: portrait ? 'column' : 'row', gap: 70 * u, marginTop: 40 * u }}>
-          {b.stat!.map((st, i) => {
-            const at = lead + Math.round((line * i) / n);
-            const v = interpolate(f, [at, at + 40], [0, st.value], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
-            return (
-              <Anim key={i} p={p} delay={at}>
-                <div style={{ fontFamily: FONTS[p.fonts.display], fontSize: 150 * u, color: p.palette.accent, lineHeight: 1 }}>
-                  {Math.round(v).toLocaleString('id-ID')}{st.suffix ?? ''}
-                </div>
-                <div style={{ fontFamily: FONTS[p.fonts.body], fontSize: 30 * u, color: p.palette.muted, marginTop: 12 * u, maxWidth: 560 * u }}>{st.label}</div>
-              </Anim>
-            );
-          })}
-        </div>
-        {b.title && <Anim p={p} delay={lead + Math.round(line * 0.7)} style={{ marginTop: 50 * u }}><Title p={p} text={b.title} u={u} size={52} italic={p.fonts.display !== 'Inter'} /></Anim>}
-        {b.stat!.some((s) => s.source) && (
-          <div style={{ position: 'absolute', left: pad, bottom: (portrait ? 330 : 70) * u, fontFamily: FONTS[p.fonts.body], fontSize: 18 * u, color: p.palette.muted, opacity: 0.8 }}>
-            {film.labels?.source ?? 'Sumber'}: {b.stat!.map((s) => s.source).filter(Boolean).join(' · ')}
-          </div>
-        )}
-      </AbsoluteFill>
-    );
-  } else if (b.kind === 'triptych') {
-    const cw = portrait ? 300 : 420, ch = portrait ? 420 : 520;
-    content = (
-      <AbsoluteFill style={{ padding: pad, justifyContent: 'center' }}>
-        {b.kick && <Anim p={p} delay={lead}><Kick p={p} text={b.kick} u={u} /></Anim>}
-        {b.title && <Anim p={p} delay={lead + 4} style={{ marginTop: 18 * u }}><Title p={p} text={b.title} u={u} size={60} /></Anim>}
-        <div style={{ display: 'flex', gap: 36 * u, marginTop: 50 * u }}>
-          {b.panels!.map((pn, i) => (
-            <Anim key={i} p={p} delay={lead + Math.round((line * (i + 0.3)) / 3)}>
-              <div style={{ width: cw * u, height: ch * u, overflow: 'hidden', border: `2px solid ${p.palette.accent}` }}><Img src={src(pn.img)} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
-              <div style={{ fontFamily: FONTS[p.fonts.display], fontSize: 34 * u, color: p.palette.fg, marginTop: 16 * u }}>{pn.title}</div>
-              <div style={{ fontFamily: FONTS[p.fonts.body], fontSize: 22 * u, color: p.palette.muted, marginTop: 6 * u, maxWidth: cw * u }}>{pn.sub}</div>
-            </Anim>
-          ))}
-        </div>
-      </AbsoluteFill>
-    );
-  } else if (b.kind === 'shot') {
-    const sw = (portrait ? 920 : 1040) * u, sh = sw / (b.shotRatio ?? 1.6);
-    content = (
-      <AbsoluteFill style={{ padding: pad, flexDirection: portrait ? 'column' : 'row', alignItems: 'center', justifyContent: 'space-between', gap: 50 * u }}>
-        {textBlock(portrait ? 900 : 560, 72)}
-        <Anim p={p} delay={lead + 10}>
-          <div style={{ padding: 10 * u, background: '#F3EDE3', border: `2px solid ${p.palette.accent}`, transform: `scale(${interpolate(f, [0, d], [1, 1.04])})` }}>
-            <Img src={src(b.img!)} style={{ width: sw, height: sh, display: 'block' }} />
-          </div>
-        </Anim>
-      </AbsoluteFill>
-    );
-  } else if (b.kind === 'cta') {
-    const c = film.cta!;
-    content = (
-      <AbsoluteFill>
-        {b.img && <AbsoluteFill style={{ opacity: 0.35 }}><Photo src={src(b.img)} d={d} amount={p.kenburns} /></AbsoluteFill>}
-        <AbsoluteFill style={{ padding: pad, justifyContent: 'center', alignItems: portrait ? 'center' : 'flex-start', textAlign: portrait ? 'center' : 'left' }}>
-          <Anim p={p} delay={lead}><Kick p={p} text={c.kick ?? film.labels?.next ?? 'Langkah berikutnya'} u={u} /></Anim>
-          <Anim p={p} delay={lead + 6} style={{ marginTop: 24 * u }}><Title p={p} text={c.title} u={u} size={portrait ? 96 : 86} /></Anim>
-          {c.sub && <Anim p={p} delay={lead + 30} style={{ marginTop: 40 * u }}><Kick p={p} text={c.sub} u={u} /></Anim>}
-          {(c.lines ?? []).map((l, i) => (
-            <Anim key={i} p={p} delay={lead + 36 + i * 6} style={{ marginTop: 12 * u }}><div style={{ fontFamily: FONTS[p.fonts.body], fontSize: 38 * u, color: p.palette.fg }}>{l}</div></Anim>
-          ))}
-          {c.url && <Anim p={p} delay={lead + 48} style={{ marginTop: 12 * u }}><div style={{ fontFamily: FONTS[p.fonts.body], fontSize: 34 * u, color: p.palette.muted }}>{c.url}</div></Anim>}
-          {portrait && film.qr && <Anim p={p} delay={lead + 54} style={{ marginTop: 50 * u }}><Img src={src(film.qr)} style={{ width: 360 * u, height: 360 * u, borderRadius: 8 }} /></Anim>}
-          {logo && <Anim p={p} delay={lead + 64} style={{ marginTop: 60 * u }}><Img src={src(logo)} style={{ width: 360 * u }} /></Anim>}
-        </AbsoluteFill>
-        {!portrait && film.qr && (
-          <Anim p={p} delay={lead + 54} style={{ position: 'absolute', right: pad, bottom: 150 * u }}>
-            <Img src={src(film.qr)} style={{ width: 330 * u, height: 330 * u, borderRadius: 6 }} />
-          </Anim>
-        )}
-      </AbsoluteFill>
-    );
-  } else {
-    // photo | footage | list — the layout depends on the preset
-    const media = b.kind === 'footage' && b.video
-      ? <OffthreadVideo src={src(b.video)} muted style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-      : b.img ? <Photo src={src(b.img)} d={d} amount={p.kenburns} /> : null;
-    const items = b.items && (
-      <div style={{ marginTop: 34 * u }}>
-        {b.items.map((it, i) => (
-          <Anim key={i} p={p} delay={lead + 20 + Math.round(((line - 20) * i) / b.items!.length)} style={{ marginTop: 10 * u }}>
-            <div style={{ fontFamily: FONTS[p.fonts.display], fontStyle: p.fonts.display === 'Inter' ? 'normal' : 'italic', fontSize: 40 * u, color: p.palette.accent }}>{it}</div>
-          </Anim>
-        ))}
-      </div>
-    );
-    if (p.layout === 'window' && !portrait) {
-      const open = interpolate(f, [lead, lead + 18], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
-      content = (
-        <AbsoluteFill style={{ flexDirection: 'row' }}>
-          <div style={{ width: '52%', padding: `0 ${pad}px`, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>{textBlock(820, 76)}{items}</div>
-          <div style={{ width: '40%', margin: `${110 * u}px 0`, overflow: 'hidden', border: `2px solid ${p.palette.accent}`, clipPath: `inset(${(1 - open) * 50}% 0 ${(1 - open) * 50}% 0)` }}>{media}</div>
-        </AbsoluteFill>
-      );
-    } else if (p.layout === 'card' && !portrait) {
-      const k = spring({ frame: f - lead, fps: FPS, config: { damping: 10 } });
-      content = (
-        <AbsoluteFill style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <div style={{ width: '50%', padding: `0 ${pad}px` }}>{textBlock(780, 80)}{items}</div>
-          <div style={{ width: 760 * u, height: 760 * u, borderRadius: 40 * u, overflow: 'hidden', transform: `rotate(${(1 - k) * 8 + 2}deg) scale(${0.8 + 0.2 * k})`, boxShadow: '0 30px 80px rgba(0,0,0,0.25)' }}>{media}</div>
-        </AbsoluteFill>
-      );
-    } else {
-      const top = portrait && p.captions === 'kinetic';
-      const bottom = !top && (portrait || b.side !== 'left');
-      content = (
-        <AbsoluteFill>
-          <AbsoluteFill style={{ overflow: 'hidden' }}>{media}</AbsoluteFill>
-          <AbsoluteFill style={{ background: top
-            ? `linear-gradient(to bottom, ${p.palette.bg}E6 0%, transparent 40%, transparent 55%, ${p.palette.bg}CC 100%)`
-            : bottom
-            ? `linear-gradient(to top, ${p.palette.bg}F0 0%, ${p.palette.bg}99 35%, transparent 65%)`
-            : `linear-gradient(to right, ${p.palette.bg}F2 0%, ${p.palette.bg}AA 40%, transparent 70%)` }} />
-          <AbsoluteFill style={{ padding: top ? `${200 * u}px ${pad}px 0` : bottom ? `0 ${pad}px ${(portrait ? 420 : 150) * u}px` : `0 ${pad}px`, justifyContent: top ? 'flex-start' : bottom ? 'flex-end' : 'center' }}>
-            {textBlock(bottom ? 1400 : 900, portrait ? 92 : bottom ? 92 : 80)}{items}
-          </AbsoluteFill>
-        </AbsoluteFill>
-      );
-    }
-  }
-
-  return <AbsoluteFill style={{ background: bgFill, ...wrap }}>{content}</AbsoluteFill>;
-};
-
-// ---------- captions ----------
-const Captions: React.FC<{ film: Film; words: Words; starts: number[] }> = ({ film, words, starts }) => {
-  const p = resolve(film);
-  const f = useCurrentFrame();
-  const { u, portrait } = useUnit();
-  if (p.captions === 'none') return null;
-  const i = starts.findLastIndex((s) => s <= f);
-  const b = film.beats[i];
-  if (!b?.vo || b.kind === 'cta') return null;
-  const t = (f - starts[i]) / FPS - p.pace.lead;
-  const ws = words[b.vo].words;
-  if (t < -0.1 || t > words[b.vo].dur + 0.4) return null;
-  const cur = Math.max(0, ws.findLastIndex((w) => w.s <= t));
-
-  if (p.captions === 'kinetic') {
-    const per = ws.slice(Math.floor(cur / 3) * 3, Math.floor(cur / 3) * 3 + 3).join('').length > 16 ? 2 : 3;
-    const g0 = Math.floor(cur / per) * per;
-    const group = ws.slice(g0, g0 + per);
-    const k = spring({ frame: Math.round((t - ws[g0].s) * FPS), fps: FPS, config: { damping: 10, stiffness: 180 }, durationInFrames: 10 });
-    return (
-      <AbsoluteFill style={{ justifyContent: 'flex-end', alignItems: 'center', paddingBottom: (portrait ? 300 : 120) * u }}>
-        <div style={{ transform: `scale(${0.85 + 0.15 * k})`, display: 'flex', flexWrap: 'wrap', justifyContent: 'center', maxWidth: (portrait ? 940 : 1500) * u }}>
-          {group.map((w, j) => (
-            <span key={j} style={{
-              fontFamily: FONTS.Inter, fontWeight: 900, fontSize: (portrait ? 84 : 72) * u, lineHeight: 1.15, textTransform: 'uppercase',
-              color: g0 + j === cur ? p.palette.accent : '#FFFFFF', margin: `0 ${10 * u}px`,
-              WebkitTextStroke: `${3 * u}px #000`, paintOrder: 'stroke', textShadow: `0 ${6 * u}px ${18 * u}px rgba(0,0,0,0.6)`,
-            }}>{w.w}</span>
-          ))}
-        </div>
-      </AbsoluteFill>
-    );
-  }
-  // subtitle: chunks of up to 7 words, broken at sentence punctuation
-  const chunks: number[][] = [];
-  let c: number[] = [];
-  ws.forEach((w, j) => { c.push(j); if (c.length >= 7 || /[.,?!]$/.test(w.w)) { chunks.push(c); c = []; } });
-  if (c.length) chunks.push(c);
-  const chunk = chunks.find((ch) => ch.includes(cur)) ?? chunks[0];
-  const light = p.palette.bg.toUpperCase() > '#C';
-  return (
-    <AbsoluteFill style={{ justifyContent: 'flex-end', alignItems: 'center', paddingBottom: (portrait ? 220 : 56) * u }}>
-      <div style={{
-        fontFamily: FONTS[p.fonts.body], fontSize: (portrait ? 40 : 32) * u, color: light ? p.palette.fg : '#FFFFFF', textAlign: 'center',
-        background: light ? 'rgba(255,255,255,0.75)' : 'rgba(0,0,0,0.45)', padding: `${8 * u}px ${18 * u}px`, borderRadius: 6 * u, maxWidth: 1500 * u,
-      }}>{chunk.map((j) => ws[j].w).join(' ')}</div>
-    </AbsoluteFill>
-  );
-};
-
-// ---------- texture ----------
-const Texture: React.FC<{ p: Preset; starts: number[] }> = ({ p, starts }) => {
-  const f = useCurrentFrame();
-  const { width, height } = useVideoConfig();
-  const sinceCut = f - (starts.findLast((s) => s <= f) ?? 0);
-  const leak = p.grade.leak ? interpolate(sinceCut, [0, 8, 26], [0, 0.55, 0], { extrapolateRight: 'clamp' }) : 0;
-  return (
-    <>
-      {p.grade.vignette > 0 && <AbsoluteFill style={{ background: `radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,${p.grade.vignette}) 100%)` }} />}
-      {leak > 0 && <AbsoluteFill style={{ background: `radial-gradient(circle at ${20 + random(Math.floor(f / 40)) * 60}% 30%, rgba(255,190,120,${leak}) 0%, transparent 55%)`, mixBlendMode: 'screen' }} />}
-      {p.grade.grain > 0 && (
-        <AbsoluteFill style={{ opacity: p.grade.grain, mixBlendMode: 'overlay' }}>
-          <svg width={width} height={height}>
-            <filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed={f % 50} /></filter>
-            <rect width="100%" height="100%" filter="url(#g)" />
-          </svg>
-        </AbsoluteFill>
-      )}
-    </>
-  );
-};
-
-// ---------- film ----------
-// Props-driven: the render passes { film, words } (scripts/master.sh), the public dir is the film folder.
-export const FilmView: React.FC<{ film: Film; words: Words }> = ({ film, words }) => {
-  const p = resolve(film);
-  const { len, starts, total, revealAt } = timeline(film, words);
-  const music = (fr: number) => interpolate(
-    fr, [0, 30, revealAt - 15, revealAt + 10, revealAt + 90, total - 60, total],
-    [0, p.music.base, p.music.base, p.music.lift, p.music.base + 0.04, p.music.base + 0.04, 0],
-    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
-  const sfx = (name: string, vol = 0.6) => name ? <Audio src={staticFile(`sfx/${name}.mp3`)} volume={vol} /> : null;
-  return (
-    <AbsoluteFill style={{ background: p.palette.bg }}>
-      <Audio src={asset(film, p.music.track)} volume={music} />
-      {film.beats.map((b, i) => {
-        const lead = Math.round(p.pace.lead * FPS);
-        const fx = b.kind === 'reveal' ? p.sfx.reveal : b.kind === 'question' ? p.sfx.question : i > 0 ? p.sfx.cut : '';
-        return (
-          <Sequence key={i} from={starts[i]} durationInFrames={len(b)}>
-            <BeatView film={film} b={b} d={len(b)} words={words} />
-            {fx && sfx(fx, b.kind === 'reveal' ? 0.7 : 0.35)}
-            {(b.sfx ?? []).map((s, j) => <Sequence key={j} from={lead}>{sfx(s, 0.45)}</Sequence>)}
-            {b.ambience && <Audio src={staticFile(`sfx/${b.ambience}.mp3`)} volume={0.18} loop />}
-            {p.sfx.text && b.title && i > 0 && <Sequence from={lead + 6}>{sfx(p.sfx.text, 0.25)}</Sequence>}
-            {b.vo && (
-              <Sequence from={lead}>
-                <Audio src={asset(film, `${b.vo}.mp3`)} trimBefore={Math.round(words[b.vo].offset * FPS)} />
-              </Sequence>
-            )}
-          </Sequence>
-        );
-      })}
-      <Texture p={p} starts={starts} />
-      <Captions film={film} words={words} starts={starts} />
-    </AbsoluteFill>
-  );
-};