wizz-method 2.21.0 → 2.23.0

package/src/skills-lib/wizz-video-styles/SKILL.md

@@ -29,13 +29,15 @@ Scripts live in this skill's `scripts/`; run them from the project root (the his
    - B-roll or stock, a physical product, food, a place?
    - Niche, goal of the piece (follow, comment, save, click), duration.
    Never pick a style the material cannot feed. "Talking head" needs a person on camera; "motion editorial" needs nothing but a voice; "macro / ASMR" needs a physical product filmed close.
-2. **Pick the style** with [references/style-picker.md](references/style-picker.md): material decides which styles are possible, niche and goal rank them. Mixed is allowed and common: person on camera for the hook and the CTA, another style in the middle. Before deciding, run `node scripts/references.mjs history` in the project: if the last two pieces used the same style, do not pick it a third time unless the user wants a series; choose another style the material allows, or keep it only for the hook and CTA.
-3. **Open the style card** in `references/styles/` and follow it: rhythm, captions, palette, typography, motion, music, SFX, hook, CTA, and its "do not" list.
+2. **Pick the style** with [references/style-picker.md](references/style-picker.md): material decides which styles are possible, niche and goal rank them. Mixed is allowed and common: person on camera for the hook and the CTA, another style in the middle. Before deciding, run `node scripts/references.mjs history` in the project: if the last two pieces used the same style, do not pick it a third time unless the user wants a series; choose another style the material allows, or keep it only for the hook and CTA. Also run `node scripts/taste.mjs show`: what this user already approved or rejected in this project outranks the catalogue's ranking.
+3. **Open the style card** in `references/styles/` (or, for an art-directed film rather than a reach format, a film style from [references/film-styles.md](references/film-styles.md)) and follow it: rhythm, captions, palette, typography, motion, music, SFX, hook, CTA, and its "do not" list. Where the card is silent on how things move, use [references/motion-laws.md](references/motion-laws.md).
 4. **Get fresh references and watch two** before editing: `node scripts/references.mjs pick --style <key>` returns measured references plus, for styles generated in code, current viral videos from the awesome-opus5-5-videos list, skipping everything this project already used. Reading a card is not watching a video. For how those generated videos were briefed, see [references/generated-prompts.md](references/generated-prompts.md).
-5. **Audio:** music and SFX choices from [references/audio.md](references/audio.md); the redistributable kit is in `assets/audio/` (credits in `assets/audio/CREDITS.md`).
-6. **Hand over** to `wizz-video-effects` with the card's SFX ceiling and music level, then to Remotion.
-7. **Look at the final file**: extract frames and compare them side by side with a contact sheet of one reference.
-8. **Record the piece**: `node scripts/references.mjs record --style <key> --piece <slug> --refs <ids watched>`. It writes `_wizz-output/video-styles/historico.json`, which is what keeps the next piece from repeating the same references and look.
+5. **Pieces drawn in code** (no footage): run the story, look and storyboard check-ins of [references/check-ins.md](references/check-ins.md) before building, with the panels timed on `scripts/beat_grid.py`.
+6. **Audio:** music and SFX choices from [references/audio.md](references/audio.md); the redistributable kit is in `assets/audio/` (credits in `assets/audio/CREDITS.md`).
+7. **Hand over** to `wizz-video-effects` with the card's SFX ceiling and music level, then to Remotion.
+8. **Look at the final file**: extract frames and compare them side by side with a contact sheet of one reference.
+9. **Record the piece**: `node scripts/references.mjs record --style <key> --piece <slug> --refs <ids watched>`. It writes `_wizz-output/video-styles/historico.json`, which is what keeps the next piece from repeating the same references and look.
+10. **Record the user's verdict** after they review it (with two versions, offer `python3 scripts/blind_review.py prepare <dir> a.mp4 b.mp4` first), in their words: `node scripts/taste.mjs add --verdict approved|rejected --piece <slug> --style <key> --quote "..." --lesson "..."` (appends to `_wizz-output/video-styles/gosto.md`; the narrowest lesson the reaction supports).
 
 ## What the measurements say across every style
 
@@ -52,15 +54,22 @@ Details and the per-style table: [references/measured-patterns.md](references/me
 |---|---|
 | [references/style-picker.md](references/style-picker.md) | **start here.** Material and niche → which styles |
 | [references/styles/](references/styles/) | one card per style: recipe, references, do-not list |
+| [references/motion-laws.md](references/motion-laws.md) | how things move when the card is silent: easing, scale, cuts, fades, springs, word cadence (measured on horizontal brand films) |
 | [references/measured-patterns.md](references/measured-patterns.md) | the numbers behind the cards, per style and per niche |
 | [references/audio.md](references/audio.md) | music and SFX per style, the kit, libraries and licences |
 | [references/research-method.md](references/research-method.md) | how the catalogue was measured, its limits, how to add a niche or a style |
 | `data/references.json` | every measured short: link, channel, views, niche, style, metrics |
+| [references/film-styles.md](references/film-styles.md) | 59 art-directed film styles drawn in code (lemo-opuscar, not measured): index, how to build them in HyperFrames for 9:16, what the test renders taught |
+| [references/insert-recipes.md](references/insert-recipes.md) | b-roll treatments cut into a style (collage b-roll), drawn in code, not measured |
 | [references/generated-prompts.md](references/generated-prompts.md) | prompts of viral code-generated videos, grouped by style, and how they run here |
 | `scripts/analyze.sh` | measures one short (cuts, music bed, SFX heuristics, loudness, contact sheet) |
+| `scripts/blind_review.py` | blind side-by-side page for two or more versions, answer key hidden until the pick |
+| `scripts/taste.mjs` | the user's approved and rejected verdicts for this project, read before choosing and appended after review |
 | `scripts/references.mjs` | fresh references per style without repeats, and the project's history of styles used |
-| `scripts/beat_grid.py` | BPM, beats and downbeats of a song, so cuts snap to the music (lyric video, kinetic typography) |
+| [references/check-ins.md](references/check-ins.md) | story, look and storyboard approvals before building a piece drawn in code, plus the beat map |
+| `scripts/beat_grid.py` | BPM, beats, downbeats, loudest hits and drops of a song, so cuts and the payoff snap to the music |
 | `assets/remotion/editorial/` | Remotion template of the motion editorial style |
+| `assets/film-styles/` | three film styles rebuilt as 9:16 HyperFrames compositions (swiss-motion, risograph, dark-keynote), plus the risograph as a Remotion component, all gated |
 | `assets/audio/` | licensed music beds and SFX that may ship with a project |
 
 ## Out of scope

package/src/skills-lib/wizz-video-styles/assets/film-styles/dark-keynote.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=1080, height=1920" />
+<title>dark-keynote · 9:16 example</title>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<style>
+  body { margin: 0; background: #07090D; }
+  #root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: "Inter", "Helvetica Neue", sans-serif; color: #E8ECF2; }
+  .stage { position: absolute; inset: 0;
+    background: radial-gradient(ellipse 80% 40% at 50% 8%, #151A24 0%, transparent 70%),
+                radial-gradient(circle at 78% 62%, rgba(110,140,255,0.07) 0%, transparent 45%),
+                radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%), #07090D; }
+  .grid { position: absolute; inset: 0;
+    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+    background-size: 48px 48px; }
+  .card { position: absolute; width: 560px; height: 116px; border-radius: 22px; background: #141922;
+    border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 40px rgba(0,0,0,0.45); }
+  .card .ico { position: absolute; left: 24px; top: 28px; width: 60px; height: 60px; border-radius: 14px; background: #1E2531; }
+  .card .l1 { position: absolute; left: 104px; top: 30px; width: 300px; height: 18px; border-radius: 9px; background: #3A4352; }
+  .card .l2 { position: absolute; left: 104px; top: 64px; width: 200px; height: 14px; border-radius: 7px; background: #262D39; }
+  .card .badge { position: absolute; right: 22px; top: 22px; width: 40px; height: 40px; border-radius: 20px; background: #E5484D;
+    font: 600 20px/40px "JetBrains Mono", Menlo, monospace; text-align: center; color: #fff; }
+  #btn { position: absolute; left: 340px; top: 1180px; width: 400px; height: 120px; border-radius: 60px; background: #1A2029;
+    border: 1px solid rgba(255,255,255,0.1); font: 600 40px/120px Inter, "Helvetica Neue", sans-serif; text-align: center; color: #9AA4B2; }
+  #cursor { position: absolute; left: 0; top: 0; width: 44px; height: 56px; }
+  #big { position: absolute; left: 0; top: 560px; width: 1080px; text-align: center; font: 700 520px/1 "Inter Tight", "Helvetica Neue", sans-serif;
+    letter-spacing: -0.045em; color: #B7F34A; text-shadow: 0 0 80px rgba(183,243,74,0.35); }
+  #label { position: absolute; left: 0; top: 1120px; width: 1080px; text-align: center; font: 500 30px "JetBrains Mono", Menlo, monospace; letter-spacing: 0.18em; color: #8A94A3; }
+  #toast { position: absolute; left: 240px; top: 1400px; width: 600px; height: 92px; border-radius: 46px; background: rgba(20,25,34,0.9);
+    border: 1px solid rgba(255,255,255,0.12); font: 500 38px/92px Inter, "Helvetica Neue", sans-serif; text-align: center; }
+  #toast i { display: inline-block; width: 14px; height: 14px; border-radius: 7px; background: #B7F34A; margin-right: 16px; vertical-align: middle; }
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="main" data-width="1080" data-height="1920" data-duration="6" data-fps="24">
+  <section id="scene" class="clip" data-start="0" data-duration="6" data-track-index="1" style="position:absolute;inset:0">
+    <div class="stage"></div><div class="grid"></div>
+    <div id="cards"></div>
+    <div id="btn">unificar</div>
+    <div id="big">1</div>
+    <div id="label">PAINEL · NO LUGAR DE 9 ABAS</div>
+    <div id="toast"><i></i>tudo num lugar só</div>
+    <svg id="cursor" viewBox="0 0 22 28"><path d="M1 1 L1 22 L7 16.5 L11 26 L14.5 24.5 L10.5 15 L18 15 Z" fill="#fff" stroke="#000" stroke-width="1.2"/></svg>
+  </section>
+</div>
+<script>
+  // 9 cards on the 48 px grid, fixed positions (no random)
+  const pos = [[96,288],[432,416],[144,544],[480,672],[96,800],[432,928],[192,1056],[480,1184],[96,1312]];
+  const holder = document.getElementById("cards");
+  pos.forEach(([x, y], i) => {
+    const c = document.createElement("div"); c.className = "card"; c.style.left = x + "px"; c.style.top = y + "px";
+    c.innerHTML = '<div class="ico"></div><div class="l1"></div><div class="l2"></div><div class="badge">' + (i + 2) + '</div>';
+    holder.appendChild(c);
+  });
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+  const beat = 0.5;
+  // spawns: drop + small overshoot, one per half beat (problem state, red badges)
+  tl.from(".card", { y: -60, opacity: 0, duration: 0.25, ease: "back.out(1.3)", stagger: beat / 2 }, 0.1);
+  tl.to(".card", { x: (i) => (i % 2 ? 4 : -4), duration: 0.05, ease: "none", repeat: 5, yoyo: true }, 2.4); // tremble
+  tl.from("#btn", { scale: 0.6, opacity: 0, duration: 0.25, ease: "back.out(1.3)" }, 2.5);
+  // cursor flies on a curve to the button, lands on the beat at 3.0
+  tl.fromTo("#cursor", { x: 900, y: 1480 }, { x: 560, y: 1250, duration: 0.5, ease: "power3.out" }, 2.5);
+  tl.to("#cursor", { scale: 0.85, duration: 0.06, ease: "none", yoyo: true, repeat: 1 }, 3.0);
+  tl.to("#btn", { backgroundColor: "#B7F34A", color: "#0A0D10", duration: 0.08, ease: "none" }, 3.0);
+  // turn: cards retract into the button, one per eighth note
+  tl.to(".card", { x: (i) => 540 - 280 - pos[i][0], y: (i) => 1240 - 58 - pos[i][1], scale: 0.2, opacity: 0, duration: 0.3, ease: "power3.in", stagger: 0.06 }, 3.15);
+  tl.to(["#btn", "#cursor"], { scaleY: 0.02, scaleX: 0.4, opacity: 0, duration: 0.2, ease: "power3.in" }, 3.85);
+  // the number gets its own screen, no caption over it
+  tl.from("#big", { scale: 0.7, opacity: 0, duration: 0.3, ease: "back.out(1.3)" }, 3.9);
+  tl.from("#label", { y: 20, opacity: 0, duration: 0.2, ease: "power2.out" }, 4.0);
+  tl.from("#toast", { y: 24, opacity: 0, duration: 0.16, ease: "power2.out" }, 4.25);
+  window.__timelines["main"] = tl;
+</script>
+</body>
+</html>

package/src/skills-lib/wizz-video-styles/assets/film-styles/remotion/Riso.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+
+// Risograph Print (lemo-opuscar card), rebuilt for Remotion: each plate is one ink
+// printed with multiply; tints are a dotted mask; registration is fixed per shot,
+// with one kick on the accent and a drift that snaps back on the downbeat.
+const PAPER = "#F4EEE2";
+const TEAL = "#00838A";
+const ORANGE = "#FF7477";
+const clamp = { extrapolateLeft: "clamp", extrapolateRight: "clamp" } as const;
+
+const Tint: React.FC<{ ink: string; dot: number; style: React.CSSProperties }> = ({ ink, dot, style }) => {
+  const mask = `radial-gradient(circle, #000 ${dot}px, transparent ${dot + 0.6}px)`;
+  return <div style={{ position: "absolute", background: ink, WebkitMaskImage: mask, maskImage: mask, WebkitMaskSize: "7px 7px", maskSize: "7px 7px", ...style }} />;
+};
+
+const Title: React.FC<{ ink: string; style?: React.CSSProperties }> = ({ ink, style }) => (
+  <div style={{ position: "absolute", left: 110, top: 310, width: 900, fontFamily: "Futura, 'Avenir Next', sans-serif", fontWeight: 800, fontSize: 150, lineHeight: 0.92, letterSpacing: "-0.02em", color: ink, ...style }}>
+    <div>anúncio</div>
+    <div>que vende</div>
+  </div>
+);
+
+export const Riso: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const t = frame / fps;
+
+  const hillY = interpolate(t, [0, 0.6], [100, 0], { ...clamp, easing: Easing.out(Easing.cubic) });
+  const titleClip = interpolate(t, [0.25, 0.75], [100, 0], { ...clamp, easing: Easing.out(Easing.quad) });
+  const roller = interpolate(t, [1, 2], [0, 1], clamp);
+  // sun rises on twos: 18 steps over 1.5 s
+  const sunStep = Math.floor(interpolate(t, [1.4, 2.9], [0, 18], clamp));
+  const sunY = 320 - (320 * sunStep) / 18;
+  // kick on the accent at 3.0, ringing back
+  const kick = t < 3 ? 0 : t < 3.04 ? 1 : interpolate(t, [3.04, 3.34], [1, 0], { ...clamp, easing: Easing.out(Easing.elastic(1.5)) });
+  const p2x = -2 - 12 * kick;
+  const p2y = 2 + 8 * kick;
+  // drift through the hold, snap back on the downbeat
+  const p1x = t < 3.4 ? 2 : t < 4.6 ? interpolate(t, [3.4, 4.6], [2, 22]) : 2;
+  const p2on = t < 5;
+
+  const plate: React.CSSProperties = { position: "absolute", inset: -40, mixBlendMode: "multiply" };
+  return (
+    <AbsoluteFill style={{ background: PAPER }}>
+      <div style={{ ...plate, transform: `translate(${p1x}px, -1px)` }}>
+        <Tint ink={TEAL} dot={2.2} style={{ left: 0, top: 290, width: 1160, height: 570 }} />
+        <div style={{ position: "absolute", left: -100, top: 1180, width: 1400, height: 900, borderRadius: "50% 50% 0 0", background: TEAL, transform: `translateY(${hillY}px)` }} />
+        <Title ink={TEAL} style={{ clipPath: `inset(0 0 ${titleClip}% 0)` }} />
+      </div>
+      {p2on && (
+        <div style={{ ...plate, transform: `translate(${p2x}px, ${p2y}px)`, clipPath: `inset(0 0 ${100 - roller * 100}% 0)` }}>
+          <div style={{ position: "absolute", left: 380, top: 820, width: 520, height: 520, borderRadius: "50%", background: ORANGE, transform: `translateY(${sunY}px)` }} />
+          <Title ink={ORANGE} style={{ transform: "translate(9px, 7px)", opacity: 0.9 }} />
+          <Tint ink={ORANGE} dot={2} style={{ left: 0, top: 1350, width: 1160, height: 250 }} />
+        </div>
+      )}
+      {roller > 0 && roller < 1 && (
+        <div style={{ position: "absolute", left: 0, top: -40 + roller * 2000, width: 1080, height: 30, background: "rgba(255,116,119,0.35)", mixBlendMode: "multiply" }} />
+      )}
+    </AbsoluteFill>
+  );
+};

package/src/skills-lib/wizz-video-styles/assets/film-styles/risograph.html

@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=1080, height=1920" />
+<title>risograph · 9:16 example</title>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<style>
+  body { margin: 0; background: #F4EEE2; }
+  #root { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-family: "Futura", "Avenir Next", sans-serif; }
+  .paper { position: absolute; inset: 0; background: #F4EEE2; }
+  /* each plate is one ink, printed with multiply so overlaps mix */
+  .plate { position: absolute; inset: -40px; mix-blend-mode: multiply; }
+  .teal { --ink: #00838A; }
+  .orange { --ink: #FF7477; }
+  .solid { position: absolute; background: var(--ink); }
+  .tint { position: absolute; background: var(--ink);
+    -webkit-mask-image: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + 0.6px));
+    -webkit-mask-size: 7px 7px; mask-image: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + 0.6px)); mask-size: 7px 7px; }
+  .title { position: absolute; left: 110px; width: 900px; font-weight: 800; font-size: 150px; line-height: 0.92; letter-spacing: -0.02em; color: var(--ink); }
+  .grain { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.35; }
+  #roller { position: absolute; left: 0; width: 1080px; height: 30px; background: rgba(255,116,119,0.35); mix-blend-mode: multiply; }
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="main" data-width="1080" data-height="1920" data-duration="6" data-fps="24">
+  <section id="scene" class="clip" data-start="0" data-duration="6" data-track-index="1" style="position:absolute;inset:0">
+    <div class="paper"></div>
+    <!-- plate 1: teal, offset +2px/-1px -->
+    <div id="p1" class="plate teal">
+      <div class="tint" style="--dot:2.2px; left:0; top:290px; width:1160px; height:570px"></div>
+      <div id="hill" class="solid" style="left:-100px; top:1180px; width:1400px; height:900px; border-radius:50% 50% 0 0"></div>
+      <div id="t1" class="title" style="top:310px"><span style="display:block">anúncio</span><span style="display:block">que vende</span></div>
+          </div>
+    <!-- plate 2: orange, offset -2px/+2px, arrives by roller sweep -->
+    <div id="p2" class="plate orange">
+      <div id="sun" class="solid" style="left:380px; top:820px; width:520px; height:520px; border-radius:50%"></div>
+      <div id="t2" class="title" style="top:310px; transform: translate(9px,7px); opacity:0.9"><span style="display:block">anúncio</span><span style="display:block">que vende</span></div>
+      <div class="tint" style="--dot:2px; left:0; top:1350px; width:1160px; height:250px"></div>
+    </div>
+    <svg class="grain" width="1080" height="1920"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7"/><feColorMatrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -1.2 1.1"/></filter><rect width="1080" height="1920" filter="url(#n)"/></svg>
+    <div id="roller"></div>
+  </section>
+</div>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+  tl.set("#p1", { x: 2, y: -1 }, 0);
+  tl.set("#p2", { x: -2, y: 2 }, 0);
+  // one-plate version first: teal alone is a complete frame
+  tl.from("#t1", { clipPath: "inset(0 0 100% 0)", duration: 0.5, ease: "power2.out" }, 0.25);
+  tl.from("#hill", { y: 100, duration: 0.6, ease: "power3.out" }, 0.0);
+  // roller sweep prints the orange plate top to bottom (1.0 - 2.0)
+  tl.fromTo("#p2", { clipPath: "inset(0 0 100% 0)" }, { clipPath: "inset(0 0 0% 0)", duration: 1.0, ease: "none" }, 1.0);
+  tl.fromTo("#roller", { y: -40 }, { y: 1960, duration: 1.0, ease: "none" }, 1.0);
+  // sun rises on twos (12 fps steps)
+  tl.fromTo("#sun", { y: 320 }, { y: 0, duration: 1.5, ease: "steps(18)" }, 1.4);
+  // kick: registration jumps on the accent at 3.0 and rings back
+  tl.to("#p2", { x: -14, y: 10, duration: 0.04, ease: "none" }, 3.0);
+  tl.to("#p2", { x: -2, y: 2, duration: 0.3, ease: "elastic.out(1, 0.35)" }, 3.04);
+  // drift through the hold, snap back on the downbeat
+  tl.to("#p1", { x: 22, duration: 1.2, ease: "none" }, 3.4);
+  tl.to("#p1", { x: 2, duration: 0.05, ease: "none" }, 4.6);
+  // ending: one ink left (the orange plate lifts away)
+  tl.to("#p2", { opacity: 0, duration: 0.05, ease: "none" }, 5.0);
+  window.__timelines["main"] = tl;
+</script>
+</body>
+</html>

package/src/skills-lib/wizz-video-styles/assets/film-styles/swiss-motion.html

@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=1080, height=1920" />
+<title>swiss-motion · 9:16 example</title>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<style>
+  body { margin: 0; background: #EAE9E5; }
+  #root { position: relative; width: 1080px; height: 1920px; overflow: hidden;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111; }
+  .fill { position: absolute; inset: 0; background: #EAE9E5; }
+  .vline { position: absolute; top: 0; width: 1px; height: 1920px; background: #D3D1CB; transform-origin: top; }
+  .hline { position: absolute; left: 0; height: 1px; width: 1080px; background: #D3D1CB; transform-origin: left; }
+  #num { position: absolute; left: 60px; top: 330px; width: 900px; height: 760px; overflow: hidden; }
+  #num span { display: block; font-size: 900px; font-weight: 700; line-height: 760px; letter-spacing: -0.04em; margin-left: -40px; }
+  .row { position: absolute; left: 72px; height: 120px; overflow: hidden; width: 940px; }
+  .row span { display: block; font-size: 112px; font-weight: 700; line-height: 120px; letter-spacing: -0.03em; }
+  .lead { color: #8E8C86; }
+  #signal { position: absolute; left: 0; top: 1470px; width: 180px; height: 48px; background: #E30613; }
+  #readout { position: absolute; left: 72px; top: 1530px; font-size: 22px; font-weight: 500; width: 600px; }
+  .note { position: absolute; font-size: 21px; font-weight: 500; border-top: 1px solid #111; padding-top: 8px; width: 300px; }
+  #knife { position: absolute; left: 0; top: 700px; height: 4px; width: 1080px; background: #111; transform-origin: left; }
+  #end { position: absolute; left: 72px; top: 640px; height: 110px; overflow: hidden; width: 600px; }
+  #end span { display: block; font-size: 96px; font-weight: 700; line-height: 110px; letter-spacing: -0.03em; }
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="main" data-width="1080" data-height="1920" data-duration="6" data-fps="24">
+  <section id="scene" class="clip" data-start="0" data-duration="6" data-track-index="1" style="position:absolute;inset:0">
+    <div class="fill"></div>
+    <div id="grid"></div>
+    <div id="num"><span>3</span></div>
+    <div id="knife"></div>
+    <div class="row" style="top:1100px"><span class="lead">regras para</span></div>
+    <div class="row" style="top:1220px"><span>um reel que</span></div>
+    <div class="row" style="top:1340px"><span>segura o dedo.</span></div>
+    <div class="note" style="left:72px;top:270px">grade 6 col · 72 px</div>
+    <div class="note" style="left:708px;top:270px">120 bpm · 0.5 s</div>
+    <div id="signal"></div>
+    <div id="readout">x 0 · no grid</div>
+    <div id="end"><span>wizz.</span></div>
+  </section>
+</div>
+<script>
+  // Grid: 6 columns, 72 px margins, 24 px gutters, rows every 120 px
+  const grid = document.getElementById("grid");
+  const colW = (1080 - 2 * 72 - 5 * 24) / 6;
+  for (let i = 0; i <= 6; i++) {
+    const x = 72 + i * (colW + 24) - (i === 6 ? 24 : 0);
+    const v = document.createElement("div"); v.className = "vline"; v.style.left = x + "px"; grid.appendChild(v);
+  }
+  for (let y = 120; y < 1920; y += 120) {
+    const h = document.createElement("div"); h.className = "hline"; h.style.top = y + "px"; grid.appendChild(h);
+  }
+  const ease = (t) => { // cubic-bezier(.7,0,.2,1)
+    let lo = 0, hi = 1, x;
+    for (let i = 0; i < 30; i++) { const m = (lo + hi) / 2; x = 3*(1-m)*(1-m)*m*0.7 + 3*(1-m)*m*m*0.2 + m*m*m; if (x < t) lo = m; else hi = m; }
+    const m = (lo + hi) / 2; return 3*(1-m)*m*m + m*m*m;
+  };
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+  tl.from(".vline", { scaleY: 0, duration: 0.5, ease: "none", stagger: 0.03 }, 0);
+  tl.from(".hline", { scaleX: 0, duration: 0.5, ease: "none", stagger: 0.015 }, 0.1);
+  tl.from(".note", { clipPath: "inset(0 100% 0 0)", duration: 0.25, ease }, 0.25);
+  // numeral climbs one module at a time, landing on the beat at 1.0
+  [0.1, 0.225, 0.35, 0.475].forEach((t, i) => tl.fromTo("#num span", { y: 760 - i * 190 }, { y: 760 - (i + 1) * 190, duration: 0.12, ease, immediateRender: i === 0 }, t));
+  // words rise out of their clip rect, each landing on a beat
+  tl.from(".row span", { y: 130, duration: 0.25, ease, stagger: 0.25 }, 0.6);
+  // the exception: linear, unsnapped, pauses mid-flight
+  tl.fromTo("#signal", { x: -200 }, { x: 430, duration: 0.6, ease: "none" }, 2.9);
+  tl.to("#signal", { x: 1100, duration: 0.7, ease: "none" }, 3.8);
+  tl.set("#readout", { textContent: "x 430 · fora do grid" }, 3.1);
+  tl.set("#readout", { textContent: "x — · saiu" }, 4.5);
+  // knife cut through the numeral, which collapses to its midline
+  tl.from("#knife", { scaleX: 0, duration: 0.25, ease: "none" }, 4.0);
+  tl.to("#num", { scaleY: 0, transformOrigin: "50% 50%", duration: 0.25, ease }, 4.25);
+  tl.to("#knife", { scaleX: 0, transformOrigin: "right", duration: 0.2, ease }, 4.5);
+  tl.to("#readout", { y: -40, opacity: 0, duration: 0.2, ease }, 4.75);
+  tl.from("#end span", { y: 120, duration: 0.25, ease }, 4.75);
+  window.__timelines["main"] = tl;
+</script>
+</body>
+</html>

package/src/skills-lib/wizz-video-styles/references/check-ins.md

@@ -0,0 +1,25 @@
+# Check-ins for a piece drawn in code
+
+For pieces with no footage, built in HyperFrames (motion editorial, animated explainer, UI morph, kinetic typography, collage inserts). Drawing a whole film and then hearing "that's not it" wastes the most time; three short approvals before the build catch it while it is cheap. Idea from [cth9191/animate](https://github.com/cth9191/animate) (MIT), written here for this pipeline.
+
+Each check-in shows something and waits. Nothing from the next step is made before the user answers.
+
+1. **Story.** A numbered beat table: what each beat says, its length, the fact it claims (checked on the web when it is a fact). Approve or change the beats.
+2. **Look.** 2 to 4 still frames at full size in the chosen style card's palette and type. When the look comes from a reference, put each frame side by side with it. A thumbs up per frame; a rejected frame is redrawn, not argued.
+3. **Storyboard.** One key frame per beat, with the sound under it and the transition into the next beat. The user answers by panel number ("4 and 7 no"); only the rejected panels change.
+4. **Build.** No check-in: animate the approved panels, render, and run the checks of `wizz-video-effects`.
+5. **Delivery.** The file plus the measured checks: cuts on the beat grid, the payoff on the loudest hit, loudness. The user's notes start a revision of the panels they name, and the verdict goes to `scripts/taste.mjs`.
+
+## Beat map
+
+With a music track, run `scripts/beat_grid.py <track> --fps <fps>` before the storyboard, so the panels are timed to the music and not to a guessed BPM:
+
+- `downbeat_frames`: where the scene changes land.
+- `hits`: the loudest beats; the payoff (the number, the reveal, the logo) goes on the loudest one.
+- `drops`: where the energy jumps; the piece changes gear there (a new section, a faster rhythm).
+
+Put the beat time on each storyboard panel, so the user approves the timing together with the image.
+
+## A character that acts
+
+When the piece has a character (a mascot, a drawn presenter), the emotions section of the `ANIMATION_GUIDE.md` in [JohnHeibel/ClaudeAnimationBase](https://github.com/JohnHeibel/ClaudeAnimationBase) (MIT) is the reference for acting: each emotion is a pose, eyes, mouth and a timing, not a face swap. Read it before the storyboard and give each panel the emotion the character plays. For a film where Claude itself appears, the kit is installable as the CLI `claude-animation-base` (designer area) and renders Clawd directly.

package/src/skills-lib/wizz-video-styles/references/film-styles/DIRECTOR.md

@@ -0,0 +1,139 @@
+<!-- Vendored from lemo-opuscar (https://github.com/lemomo-ai/lemo-opuscar/tree/413a6bd6/DIRECTOR.md), MIT, (c) 2026 LemoLab. Its references to AGENTS.md, TECHNIQUE.md and the render tools are that repo's; here the build is HyperFrames (../film-styles.md). -->
+
+# Directing a Lemo-Opuscar film
+
+The directing method behind every film in this library. Pair it with one `styles/<slug>/STYLE.md` (the style) and [`TECHNIQUE.md`](https://github.com/lemomo-ai/lemo-opuscar/blob/413a6bd6/TECHNIQUE.md) (how to build).
+
+You are the director, not a tech demo. A film is judged in this order: **sound, rhythm, camera, directing** (performance, staging, emotional arc). Good-looking frames are only the starting point.
+
+---
+
+## 1. Take the brief
+
+The user gives a style and a topic, sometimes more (length, language, voice, must-have shots, brand rules). Everything else is your decision. Ask once, in a single message (AGENTS.md, Workflow), then no more questions. Defaults:
+
+- Length **30–60 s**; shorter and tight beats padded. Beyond two or three minutes multiplies time and token cost: tell the user.
+- 1920×1080 at 24 fps by default; an output frame rate set in the style's `STYLE.md` (30 or 60 fps, for example) wins, and is what you pass to `--fps` and `mux.sh`; other sizes (vertical 1080×1920, for example) with `--size WxH` on the render tools.
+- Voice and subtitles in the language the user writes in. Subtitles burned in and exported as `.srt`.
+- Loudness −14 LUFS.
+
+Say it in the questions when it matters: a good Chinese voice uses Microsoft's online service (edge-tts) and needs a connection; offline, Kokoro reads Chinese but sounds plain (TECHNIQUE.md §4).
+
+Requests that only change the plan:
+
+- **No voice, or no subtitles.** Drop those steps and say so in the treatment.
+- **Their own voice recording.** Use it as it is; transcribe it with faster-whisper for word timings.
+- **Their own material**: logos, photos, footage, and for styles built from real material (the Evidence Films) their own data, scans, imagery or CAD. Ask whether they have any; what they give comes first, and the sources in the `STYLE.md` are the fallback. Before you download from those sources, tell the user what you will fetch, from where and under which licence. Rights: section 12.
+
+## 2. Find a benchmark first
+
+Before writing anything, pick one or two reference works (films, title sequences, games, ads) that set the bar for this style **and this topic**. They are your choice, made for the user's film; don't borrow the demo's. Write down:
+
+- **What to learn**: composition, pacing, camera grammar, colour logic, score structure.
+- **What not to take**: characters, designs, melodies, specific shots, logos, fonts.
+
+The benchmark lifts quality more than any rule below.
+
+## 3. Shape the story
+
+- **One subject, one goal, one turn.** A character (or a single object, product or idea) wants something, something changes, it ends differently from how it began.
+- **Hook in the first 3 seconds.** No slow logo reveal before anything happens.
+- **An ending that echoes.** Bookend the opening, reveal the scale, or let the character do the thing right the second time.
+- **One native move**: a moment only this medium can do (a fold that becomes a transition, ink that blooms into the next scene, a type grid that snaps into the logo). Put it at the emotional peak. `STYLE.md` lists the medium's native moves; pick or invent the one your story needs.
+- **Cut the extras.** One gag the audience reads at thumbnail size beats three they can't. If a beat needs explaining, remove it.
+
+## 4. Write the treatment
+
+Write `TREATMENT.md` before drawing anything, and before you open the style's `DEMO.md` or demo code (an Edit & Documentary style gathers its material first: AGENTS.md, "Treatment first"):
+
+1. **Three candidate structures**, a few lines each (for example: a single journey, a before/after, a countdown, a list that turns), then the one you chose and why. Choose the opening image, the ending and the shape of the score from the topic too; the first idea that comes to mind for a style is usually its cliché.
+2. **Logline and arc**: one sentence, then setup → turn → ending.
+3. **Benchmark**: learn / don't learn (section 2).
+4. **Shot list**: for every shot, the framing (wide / full / medium / close / insert), angle, camera move (push, pull, pan, track, crane, zoom), duration, and **why** it is shot that way.
+5. **Beat sheet**, second by second.
+6. **Cue map**: tempo, bar grid, instrumentation per section, and on which beat every cut, key action and subtitle lands.
+7. **Sound design table**: for each section, the ambience bed, the main foley and the music state.
+8. **Subtitle and title design**: the type is part of the style.
+
+## 5. Prove the look
+
+- **With characters**: draw a model sheet (turnaround, 3–4 expressions, 2–3 key poses, palette) plus two style frames.
+- **Without characters**: three style frames from the film, one of them the signature shot.
+
+Render them with the real drawing code, not a mock-up, and check them yourself against the `STYLE.md` before going on.
+
+### The storyboard (only if the user asked for one)
+
+Render 6–9 key shots with the real drawing code, tiled into one sheet (`core/render/sheet.py`) with shot number, framing, duration and line under each. Send it with the logline and what you are least sure about, and **wait for approval**. If the user didn't ask for one, don't stop.
+
+## 6. Sound is half the film
+
+- **Every visible action has a sound**: landings, page turns, cuts, drips, clicks, cloth. Match the material (paper, wood, metal, ink and glass all sound different).
+- **Three layers**: ambience (room, wind, rain, city), foley (tied to actions) and music. Duck the music under dialogue and key foley.
+- **At least two real silences**, or near-silences, before the turn or the emotional peak. The first sound after the silence should be one of the most important sounds in the film.
+- **Use sound as a transition** at least twice: bring the next scene's sound in early (J-cut) or let the last scene's sound run over the cut (L-cut).
+- **Avoid generic "piano and strings".** Score in the instruments of the style's sound palette.
+
+## 7. Rhythm: the music grid comes first
+
+- Write the cue map before animating. The picture locks to the grid, and a script checks every cue (TECHNIQUE.md §3).
+- **Vary the pace**: alternate fast and slow, include one clear acceleration or deceleration, and give the audience one breath (a long take or a held pause). A film at one even speed has failed.
+- One action, one sound, one cut, but don't cut on every beat. Leave time to see.
+- **Pace for the viewer, not the clock**:
+  - Hold every subtitle at least 1.8 s, and never shorter than the spoken line + 0.6 s.
+  - After text finishes animating in, hold it for roughly (letters ÷ 15 + 1.5) s in English, (characters ÷ 4.5 + 1.5) s in Chinese; `readcheck.mjs` checks this for you.
+  - Hold a title card at least 4 s.
+  - Give failures and gags enough time to be understood.
+  - Fast is fine; make it fast with fewer words per screen, not by cutting before people finish reading.
+
+## 8. Camera: every shot needs a reason
+
+- Use at least **four different camera moves** and real changes of framing. 2D has a camera too: push, pull, parallax, focus pulls, frames within frames.
+- **One signature shot** people remember: a oner, a scale reveal, a transition made from the medium itself.
+- **Design transitions inside the medium** (a page turn, a carved line growing, ink spreading), as one consistent grammar. Avoid default fades and hard cuts.
+- At key moments the subject fills at least a third of the frame height, with clear staging and a readable silhouette.
+
+## 9. Performance
+
+- **Anticipation, action, follow-through** on every meaningful move. Characters change emotion. They do not just slide across the screen.
+- **Motion continuity**, especially for characters built from code rigs:
+  - Blend every pose with keyframes and easing; never switch poses inside an `if`. The only exception is a deliberate one-frame comic pop.
+  - Check shoulders and arms on a large action test sheet (reach, raise, run, kneel) before shooting (TECHNIQUE.md §10).
+  - Held props sit **between the palms**, at a depth between the two arms. A hand-over interpolates from one palm to the other. A rolling object turns by distance ÷ radius.
+  - Step through key actions at 0.2 s intervals, enlarged.
+- Check every expression at final size, especially eyebrow direction: "worried" and "angry" are one flip apart.
+
+## 10. The failures we saw most
+
+- Subject too small, too far away, or pushed against the frame edge.
+- Too dark to read, or a colour laid on the same colour (red on red).
+- Subtitles covering the subject.
+- A gag or failure too fast to understand.
+- Blank frames in transitions.
+- A timed effect (iris, zoom, follow cam) that doesn't track the subject after the camera moves (one world → screen function, TECHNIQUE.md §2).
+
+## 11. Before you deliver
+
+- Run the review loop (TECHNIQUE.md §8): contact sheets, 0.2 s strips of key actions, one full-speed viewing with sound.
+- **One fix round.** Fix everything the review and the checks below find in one round, then check once more. Small fixes that second check turns up (a level, a frame) belong to the same round; anything bigger, tell the user in one line when you deliver. The user's notes after delivery are new rounds: change only what they ask.
+- **Not the demo again.** After the treatment, read `DEMO.md` and compare: structure, opening, signature shot, camera path, score shape, ending. At least four of the six must differ; rethink the ones that match. Before delivery, put your contact sheet next to the demo poster (`styles/<slug>/poster.jpg`) as a last check.
+- Voice: every line transcribes back correctly (speech-to-text check). For Chinese, one misheard character in a short line is normal: listen, and if it is right, let the check expect what the model heard (TECHNIQUE.md §4).
+- Loudness about −14 LUFS; no black frames, no NaN frames; subtitles in sync and not covering key action.
+- Every row of the sound design table is actually in the mix.
+- No LemoLab sign-off: `grep -rniE "lemo ?lab|opus 5\.5" <project folder>` finds nothing outside `LICENSE`, `CREDITS` and the library's path in `LIB=` lines, and you have watched the last seconds of the film (text drawn into an image can't be grepped).
+
+**Deliver**, in the project folder (the complete list):
+
+- `<name>.mp4` (24 fps unless `STYLE.md` sets another rate, about −14 LUFS) and `poster.jpg`;
+- `<name>.srt`, when the film has narration, dialogue or subtitles;
+- `TREATMENT.md`;
+- `CREDITS`: every third-party asset in the film (sample libraries, music, fonts, images, the voice engine) with its source and licence (TECHNIQUE.md §11);
+- the source, with a one-command `build.sh` (TECHNIQUE.md §2).
+
+**Tell the user**, in their language: where the project folder and the film are; that `CREDITS` lists the third-party assets in the film and their licences; and that they are responsible for the materials they use in it.
+
+## 12. Copyright red lines
+
+- References teach grammar only. Don't copy characters, designs, melodies, shots, logos or type designs.
+- No existing works, games, brands or events appear in the film unless the user owns them or has the right to use them. That includes the logos, photos and footage the user hands you: use them when they say they have the right, otherwise draw fictional stand-ins.
+- Some of our demos are unofficial fan films of real events or characters. Keep the style, and never carry those names, marks or characters into a user's film.