@popcraft/kit 0.53.4 → 0.53.5

package/dist/chunks/chunk-MXIJUG2C.js

@@ -0,0 +1,260 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  SHARD,
+  blinking,
+  cell,
+  clockFrames,
+  cursor,
+  fitGround,
+  ground,
+  lockup,
+  minimap,
+  mono,
+  scan,
+  steps,
+  termBrand,
+  termLine,
+  termWindow,
+  tuiBox
+} from "./chunk-EO4LNCIK.js";
+import {
+  camera,
+  float,
+  reelCuts,
+  reelSheet,
+  seenAt,
+  wideCut
+} from "./chunk-YUJ6YBZ6.js";
+import {
+  clicks,
+  glide,
+  pointer
+} from "./chunk-2PJUAVAE.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-3YQOE5KZ.js";
+import {
+  score
+} from "./chunk-KHGNV7UQ.js";
+import {
+  cutOn,
+  hz
+} from "./chunk-CLQ3FUJI.js";
+import {
+  hide,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/style-terminal-feature-demo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = score("edm");
+var { beat } = S;
+var NAME = "Terminal SaaS feature demo short";
+var W = { w: 800, h: 720 };
+var SIZE = 22;
+var CW = cell(SIZE);
+var LH = 30;
+var STEP = [4, 10, 16, 21, 26];
+var CLICK1 = beat(STEP[0] + 2);
+var CLICK2 = beat(STEP[3] + 1);
+var REST = { x: 640, y: 640 };
+var TARGETS = [{ x: 196, y: 100 }, { x: 150, y: 520 }];
+var SHOTS = [
+  { t: beat(STEP[0]), duration: 1, zoom: 1.7, x: 260, y: 130 },
+  { t: beat(STEP[1]), duration: 1, zoom: 1.3, x: 330, y: 230 },
+  { t: beat(STEP[2]), duration: 1, zoom: 1.55, x: 250, y: 390 },
+  { t: beat(STEP[3]), duration: 1, zoom: 1.35, x: 360, y: 590 },
+  { t: beat(STEP[4]), duration: 1, zoom: 1 }
+];
+var SHARDS = [
+  ["01", "3:34", "0:52", 0.245],
+  ["02", "3:31", "0:51", 0.24],
+  ["03", "3:29", "0:52", 0.245],
+  ["04", "3:34", "0:50", 0.236]
+];
+var BAR = 400;
+var JSON_LINES = [
+  ['  "id": ', '"run_7Hq2"', "amber"],
+  ['  "status": ', '"passed"', "green"],
+  ['  "tests": ', "2418", "amber"],
+  ['  "runners": ', "64", "amber"],
+  ['  "duration_s": ', "52.3", "amber"]
+];
+var cues = [
+  { layer: "Hook", preset: "typewriter", at: 0, params: { duration: 700 } },
+  // The window is on with the hook's first letters, so the frame is never a bare ground.
+  cutOn("Stage", 120),
+  cutOn("Steps bar", beat(1)),
+  ...[1, 2, 3].map((n, i) => ({ layer: `Step fill ${n}`, preset: "wipe-in", at: beat(STEP[i]), params: { duration: beat(STEP[i + 1] - STEP[i]), ease: ease.linear } })),
+  cutOn("Field ring", CLICK1),
+  cutOn("New shard", beat(STEP[1] + 2), beat(1)),
+  cutOn("More line", beat(STEP[1] + 4)),
+  cutOn("Diff del", beat(STEP[2] + 1)),
+  cutOn("Diff add", beat(STEP[2] + 2)),
+  cutOn("Json line", CLICK2 + 120, 180),
+  cutOn("Json close", CLICK2 + 120 + 180 * 5),
+  { layer: "Call", preset: "flash", at: beat(STEP[4]), params: { duration: 400, ease: ease.hold } },
+  { layer: "Call", preset: "pulse", at: beat(29), params: { duration: 400, amount: 0.04 } }
+];
+var counts = [
+  { layer: "Runners figure", at: CLICK1 + 100, duration: 900, tick: 60, counter: { from: 4, to: 64 } }
+];
+var swaps = [captionSwap(["One shard holds everyone.", "Bump runners to 64.", "Shards rebalance by timing.", "One line in ci.yml."], 0, S.duration - 30, { stagger: 60, in: 200, out: 160, rise: 0 })];
+var style_terminal_feature_demo_default = defineTemplate({
+  id: "motion-saas-style-terminal-feature-demo",
+  meta: {
+    name: NAME,
+    description: "A 15-second feature demo in the terminal look: a pointer works a terminal dashboard step by step while the view cuts in to each click. A runners field ticks from 4 to 64, shard bars step down and an estimate rolls from 14:08 to 00:52, the change lands as a red and green diff, and a folded JSON response opens a line at a time. Step bar, burned-in captions and music, 9:16 with square and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "terminal", "monospace", "cli", "tui", "developer tools", "demo", "feature", "cursor", "zoom", "counter", "diff", "json", "captions", "music", "audio", "reel", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "demo", "video"],
+    useCases: ["launch", "education", "onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    termBrand(k, {});
+    const term = mono(k, "Term 22", SIZE, { lead: LH / SIZE });
+    mono(k, "Brand 30", 30, { weight: 700, lead: 1.2 });
+    mono(k, "Label 22", 22, { weight: 500, lead: 1.4 });
+    mono(k, "Hook 66", 66, { weight: 800, lead: 1.15, spacing: -2 });
+    mono(k, "Hook 52", 52, { weight: 800, lead: 1.15, spacing: -1.5 });
+    mono(k, "Caption 34", 34, { weight: 600, lead: 1.35 });
+    mono(k, "Button 30", 30, { weight: 700, lead: 1.3 });
+    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 30", label: `$ ${SHARD.install}`, pad: [16, 26], radius: 4 });
+    const sheet = reelSheet(k, S, { name: "Feature demo", gap: 16 });
+    ground(k, sheet, 1080, 1920, { cw: 18, lh: 36 });
+    minimap(k, sheet, { x: 140, y: 1476, width: 800, rows: 16, seed: 23, scroll: { duration: S.duration, every: beat(1) } });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, top, { size: 30, style: "Brand 30" });
+    const tag = k.stack(top, { direction: "HORIZONTAL", width: "HUG", padding: { top: 4, right: 12, bottom: 4, left: 12 }, stroke: { color: "edge", width: 2, align: "INSIDE" }, name: "Feature tag" });
+    k.text(tag, "shard top --rebalance", { style: "Label 22", color: "onPaper", autoWidth: true, name: "Feature words" });
+    k.text(sheet, "Slow shard?\nSplit it live.", { style: "Hook 66", color: "text", name: "Hook" });
+    const stage = k.stack(sheet, { width: W.w, height: W.h, clip: true, radius: 6, name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: W.w, height: W.h }, { name: "Camera" });
+    const t = termWindow(k, cam, { w: W.w, h: W.h, left: "shard top", right: "run 7Hq2 \xB7 main", style: "Label 22", absolute: { x: 0, y: 0 }, shadow: false, pad: 24, gap: 12 });
+    const inner = W.w - 48;
+    const head = k.stack(t.body, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", height: 44, name: "Head" });
+    const field = k.stack(head, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 10, name: "Field" });
+    k.text(field, "runners", { style: term, color: "cardMuted", autoWidth: true, name: "Field label" });
+    const box = k.stack(field, { direction: "HORIZONTAL", width: Math.round(CW * 5), height: 40, align: "CENTER", justify: "CENTER", stroke: { color: "edge", width: 2, align: "INSIDE" }, name: "Field box" });
+    k.text(box, "64", { style: term, color: "amber", width: Math.round(CW * 3), align: "CENTER", name: "Runners figure" });
+    k.rect(field, 4, 40, "primary", { name: "Field ring" });
+    const est = k.stack(head, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", name: "Estimate" });
+    k.text(est, "est ", { style: term, color: "cardMuted", autoWidth: true, name: "Estimate label" });
+    const clock = k.text(est, "00:52", { style: term, color: "green", width: Math.ceil(CW * 5), name: "Estimate figure" });
+    const rows = k.stack(t.body, { gap: 0, name: "Shards" });
+    const barFills = [], times = [];
+    const shardRow = (n, time, frac, name) => {
+      const row = k.stack(rows, { direction: "HORIZONTAL", align: "CENTER", gap: Math.round(CW), height: LH, name });
+      k.text(row, `shard ${n}`, { style: term, color: "cardMuted", autoWidth: true, name: "Shard label" });
+      const track = k.stack(row, { width: BAR, height: 14, fill: "line", name: "Shard track" });
+      const fill = k.rect(track, Math.round(BAR * frac), 14, "green", { name: "Shard bar" });
+      const tx = k.text(row, time, { style: term, color: "amber", width: Math.ceil(CW * 5), name: "Shard time" });
+      return { fill, tx };
+    };
+    for (const [n, from, to2, frac] of SHARDS) {
+      const r = shardRow(n, to2, frac, "Shard");
+      barFills.push({ id: r.fill, ratio: 0.97 / frac });
+      times.push({ id: r.tx, from, to: to2 });
+    }
+    shardRow("05", "0:51", 0.24, "New shard");
+    shardRow("06", "0:52", 0.245, "New shard");
+    termLine(k, rows, [{ t: "+ 58 more shards, all under 0:53", c: "cardMuted" }], { style: term, name: "More line", height: LH });
+    const diff = tuiBox(k, t.body, { w: inner, h: 108, label: "ci.yml", labelWidth: Math.round(CW * 6), style: term, pad: 18, inset: 2 });
+    termLine(k, diff.body, [{ t: "-   runners: 4", c: "red" }], { style: term, name: "Diff del" });
+    termLine(k, diff.body, [{ t: "+   runners: 64", c: "green" }], { style: term, name: "Diff add" });
+    const json = tuiBox(k, t.body, { w: inner, h: 252, label: `GET /v1/runs/run_7Hq2`, labelWidth: Math.round(CW * 21), style: term, pad: 18, inset: 2 });
+    const open = k.text(json.body, "{", { style: term, color: "onCard", name: "Json open" });
+    for (const [key, value, c] of JSON_LINES) termLine(k, json.body, [{ t: key, c: "cyan" }, { t: value, c }, { t: ",", c: "cardMuted" }], { style: term, name: "Json line" });
+    const close = k.stack(json.body, { direction: "HORIZONTAL", align: "CENTER", name: "Json close" });
+    k.text(close, "} ", { style: term, color: "onCard", autoWidth: true, name: "Json brace" });
+    blinking(k, cursor(k, close, SIZE, { name: "Cursor" }), hz(16, S.duration));
+    const p = pointer(k, stage, { ...REST, size: 72, fill: "onCard", edge: "well", ring: "primary" });
+    const bars = k.stack(sheet, { direction: "HORIZONTAL", gap: 8, name: "Steps bar" });
+    for (let i = 1; i <= 3; i++) {
+      const track = k.stack(bars, { height: 8, fill: "line", clip: true, name: "Step track" });
+      k.rect(track, "FILL", 8, "primary", { name: `Step fill ${i}` });
+    }
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 34", fill: "card", ink: "onCard", radius: 4, pad: [16, 24], stroke: { color: "edge", width: 2, align: "INSIDE" } });
+    const call = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
+    k.instance(call, "Call", { Label: `$ ${SHARD.install}` }, { name: "Call" });
+    k.text(call, "{{brand.site}}", { style: "Label 22", color: "onPaper", autoWidth: true, name: "Site" });
+    scan(k, sheet);
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const S2 = beat(STEP[1]) + 200;
+    for (const b of barFills) {
+      k.patch(b.id, { anchorX: 0 });
+      k.animate(b.id, "scaleX", [0, 1, 2, 3, 4].map((i) => ({ t: S2 + i * 160, v: Math.round((b.ratio + (1 - b.ratio) * (i / 4)) * 1e3) / 1e3, ...i < 4 ? { ease: ease.hold } : {} })));
+    }
+    for (const x of times) steps(k, x.id, [[0, x.from], [S2 + 640, x.to]]);
+    steps(k, clock, [[0, "14:08"], ...clockFrames(S2, 900, 848, 52, 14)]);
+    steps(k, open, [[0, "{ ... 5 keys }"], [CLICK2 + 120, "{"]]);
+    camera(k, cam, W.w, W.h, SHOTS);
+    const to = (i, s) => {
+      const at = seenAt(W.w, W.h, SHOTS[s], TARGETS[i]);
+      return { dx: at.x - REST.x, dy: at.y - REST.y };
+    };
+    glide(k, p, [
+      { t: beat(STEP[0]), dx: 0, dy: 0 },
+      { t: CLICK1 - 150, ...to(0, 0) },
+      { t: beat(STEP[1]), ...to(0, 0) },
+      { t: beat(STEP[1]) + 400, dx: 0, dy: 0 },
+      { t: beat(STEP[3]), dx: 0, dy: 0 },
+      { t: CLICK2 - 150, ...to(1, 3) },
+      { t: beat(STEP[4]), ...to(1, 3) },
+      { t: beat(STEP[4]) + 400, dx: 0, dy: 0 }
+    ]);
+    clicks(k, p, [CLICK1, CLICK2]);
+    k.variants(sheet, [...reelCuts({ post: 36, portrait: 60 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 12, counterAxisSpacing: 12, padding: { top: 30, right: 140, bottom: 30, left: 140 } });
+        fitGround(kit, id, { cw: 18, lh: 36 });
+        hide(kit, id, ["Brand row", "Minimap", "Steps bar"]);
+        restyle(kit, id, "Hook", "Hook 52");
+        for (const n of kit.named(id, "Hook")) kit.patch(n, { characters: "Slow shard? Split it live." });
+      }
+    }).slice(0, 1), wideCut(640, (kit, id, right) => {
+      const scale = Math.min(right.width / W.w, (right.height - 30) / W.h), x = right.x + Math.round((right.width - W.w * scale) / 2), y = right.y + Math.round((right.height - 30 - W.h * scale) / 2);
+      fitGround(kit, id, { cw: 18, lh: 36 });
+      float(kit, id, "Stage", x, y, { scale });
+      float(kit, id, "Steps bar", x, y + Math.round(W.h * scale) + 22, { width: Math.round(W.w * scale) });
+      hide(kit, id, ["Minimap"]);
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_terminal_feature_demo_default
+};

package/dist/chunks/chunk-MYQVQJUH.js

@@ -0,0 +1,33 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  earth_day_landing_default
+} from "./chunk-YNUJ3OW5.js";
+import {
+  earth_day_link_preview_default
+} from "./chunk-FRBRIDLZ.js";
+import {
+  earth_day_footprint_reel_default
+} from "./chunk-GCOX6QEL.js";
+import {
+  earth_day_pledge_post_default
+} from "./chunk-J2CAIU23.js";
+import {
+  earth_day_header_default
+} from "./chunk-WTPHX6LV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/themes/earth-day.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [earth_day_footprint_reel_default, earth_day_landing_default, earth_day_pledge_post_default, earth_day_header_default, earth_day_link_preview_default];
+var earth_day_default = pack;
+
+export {
+  earth_day_default
+};

package/dist/chunks/chunk-N3F5XANE.js

@@ -0,0 +1,75 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  outro,
+  postVariants
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/social/post-quote.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Rule", preset: "wipe-in", at: 100, params: { duration: 600 } },
+  { layer: "Quote", preset: "blur-in", at: 300, params: { duration: 1e3, amount: 28 } },
+  { layer: "Attribution", preset: "slide-in", at: 1200, params: { direction: "left", distance: 90 } },
+  { layer: "Quote", preset: "pulse", at: 3200, params: { amount: 0.02, duration: 1200 } },
+  { layer: "Rule", preset: "wipe-out", at: 5900 },
+  outro(["Quote", "Attribution"], 5900)
+];
+var post_quote_default = defineTemplate({
+  id: "motion-social-quote",
+  meta: {
+    name: "Quote post (animated)",
+    description: "The quote post in motion: a rule wipes open, the words come into focus and the attribution slides in under them \u2014 seven seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "quote", "instagram", "post", "wisdom", "books", "threads"],
+    platforms: ["instagram", "threads", "linkedin", "pinterest"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["quote"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Quote post (animated)", preset("ig-post"));
+    k.brand(
+      { paper: "#F4EFE6", text: "#2B2A26", onPaper: "#5E5A52", primary: "#8A3B12", onPrimary: "#FFFFFF" },
+      { quote: "Our life is frittered away by detail. Simplify, simplify." }
+    );
+    k.textStyle("Quote 76", { size: 76, fontWeight: 700, letterSpacing: -1.5, lineHeight: 88 });
+    k.textStyle("Author 30", { size: 30, fontWeight: 700, lineHeight: 36 });
+    k.textStyle("Source 26", { size: 26, fontWeight: 500, lineHeight: 32 });
+    k.component("Attribution", { direction: "HORIZONTAL", width: 904, gap: 20, align: "CENTER", props: { Author: "Henry David Thoreau", Source: "Walden, 1854" } }, (id) => {
+      k.rect(id, 6, 64, "primary", { radius: 3, name: "Bar" });
+      const col = k.stack(id, { gap: 2, name: "Lines" });
+      k.propText(col, "Author", { style: "Author 30", color: "text" });
+      k.propText(col, "Source", { style: "Source 26", color: "onPaper" });
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 40, 88, "paper", "CENTER", "MIN");
+    k.timeline(sheet, { duration: 7e3, fps: 30 });
+    k.stack(sheet, { width: 140, height: 10, fill: "primary", radius: 5, clip: true, name: "Rule" });
+    k.text(sheet, "{{brand.quote}}", { style: "Quote 76", color: "text", name: "Quote" });
+    k.instance(sheet, "Attribution", { Author: "Henry David Thoreau", Source: "Walden, 1854 \xB7 shared by @slowreadsclub" }, { width: "FILL", name: "Attribution" });
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 96 }));
+    return k.finish();
+  }
+});
+
+export {
+  post_quote_default
+};

package/dist/chunks/chunk-N55E3GBY.js

@@ -0,0 +1,252 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  into
+} from "./chunk-Y46APA7K.js";
+import {
+  buildShort,
+  shortScenes
+} from "./chunk-ZOYR6CS5.js";
+import {
+  figure
+} from "./chunk-CD6MHGZT.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  curve,
+  rng
+} from "./chunk-CJXUEOR6.js";
+import {
+  H,
+  W,
+  camera,
+  caption,
+  depth,
+  fxLayer,
+  glow,
+  keyParam,
+  sky,
+  titleCard,
+  vignette,
+  wash
+} from "./chunk-NO5IP5VW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/anime/starlight.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MIRA = { key: "mira", name: "Mira", hair: "twin", outfit: "sailor" };
+var STARLIGHT = { key: "mira", name: "Starlight Mira", hair: "twin", outfit: "dress", accessory: "bow", outfitKey: "star" };
+function starPts(cx, cy, r, k = 0.45, turn = -90) {
+  return Array.from({ length: 10 }, (_, i) => {
+    const a = (turn + i * 36) * Math.PI / 180, rr = i % 2 ? r * k : r;
+    return [cx + rr * Math.cos(a), cy + rr * Math.sin(a)];
+  });
+}
+var star = (l, parent, cx, cy, r, role, name, o = {}) => l.shape(parent, curve(starPts(cx, cy, r), true, Array.from({ length: 10 }, (_, i) => i), 0), role, { name, ...o.stroke ? { stroke: { color: o.stroke, width: 6 } } : {} });
+function skyline(l, parent, base, role, lit, seed) {
+  const r = rng(seed);
+  for (let x = -60; x < W + 60; ) {
+    const w = 110 + r() * 150, h = 140 + r() * 280;
+    l.rect(parent, x, base - h, w, h + 400, role, { name: "Building" });
+    for (let wy = base - h + 30; wy < base - 20; wy += 44) for (let wx = x + 16; wx < x + w - 24; wx += 34) if (r() < 0.32) l.rect(parent, wx, wy, 16, 22, lit, { name: "Lit window" });
+    x += w + 6;
+  }
+}
+function ribbon(l, parent, pts, role, width, name = "Ribbon") {
+  return l.line(parent, curve(pts, false), role, width, { name });
+}
+var spec = {
+  id: "motion-anime-starlight",
+  title: "Starlight",
+  score: "starlight",
+  ground: "nightTop",
+  colors: {
+    nightTop: "#140C3A",
+    nightLow: "#3A1C6E",
+    city: "#1D1648",
+    cityFar: "#2C2362",
+    windows: "#FFD86B",
+    moon: "#FFF3C4",
+    magicPink: "#FF6FB5",
+    magicGold: "#FFD34D",
+    magicCyan: "#7BE7FF",
+    magicViolet: "#8A5CFF",
+    ribbon: "#FFB2DC",
+    white: "#FFFFFF",
+    rim: "#FFE3F4",
+    skin: "#FFE8DE",
+    skinShade: "#F3BCB0",
+    line: "#3B1E4F",
+    blush: "#FF9ECB",
+    mouth: "#B8386A",
+    miraHair: "#FF8FC8",
+    miraHairShade: "#D9589C",
+    miraHairLight: "#FFD6EC",
+    miraEye: "#8B5CF6",
+    miraEyeLight: "#DCCBFF",
+    miraOutfit: "#F7F4FF",
+    miraOutfitShade: "#C9BEEA",
+    miraAccent: "#FF5C9A",
+    starOutfit: "#FF7EB8",
+    starOutfitShade: "#D9559A",
+    starAccent: "#FFD34D"
+  },
+  fields: { title: "Starlight", name: "Mira", line1: "Starlight, lend me your light!", line2: "Magical Girl Starlight \u2014 here to shine!", tagline: "Every night, a new wish" },
+  characters: [MIRA, STARLIGHT],
+  shots: [
+    {
+      name: "1 \xB7 Rooftop",
+      cues: [{ layer: "Camera", preset: "push-in", at: 0, params: { duration: 2812, amount: 0.07 } }],
+      sfx: [{ key: "wind", at: 0, gain: 0.5, out: 2812, fadeOut: 400 }],
+      draw(l, sheet) {
+        const cam = camera(l, sheet);
+        sky(l, cam, "nightTop", "nightTop", "nightLow");
+        fxLayer(l, cam, "Stars", "Sparkles", { density: 0.12, speed: 3, angle: 0, sway: 2, size: 10, spin: 0.2, colorA: { role: "white" }, colorB: { role: "magicGold" } }, { box: [0, 0, W, 700] });
+        glow(l, cam, 1300, 520, 520, "moon", { strength: 0.6, name: "Moon glow" });
+        l.circle(cam, 1300, 520, 270, "moon", { name: "Moon" });
+        const far = depth(l, cam, "Far"), near = depth(l, cam, "Near");
+        skyline(l, far, 930, "cityFar", "windows", 5);
+        skyline(l, near, 1120, "city", "windows", 8);
+        l.rect(near, 900, 880, 1100, 260, "city", { name: "Rooftop" });
+        figure(l, near, MIRA, { pose: "stand", x: 1300, base: 884, height: 460, ink: "line", rim: "moon", lightFrom: "right", name: "Mira on the roof" });
+        l.keys(far, "translateX", [[0, 0, ease.linear], [2812, -20]]);
+        fxLayer(l, cam, "Glimmers", "Dust motes", { density: 0.12, speed: 20, angle: 280, sway: 20, size: 8, spin: 0.3, colorA: { role: "magicPink" }, colorB: { role: "magicGold" } }, { blend: "SCREEN" });
+        vignette(l, sheet, "nightTop", 0.6);
+      }
+    },
+    {
+      name: "2 \xB7 The pendant",
+      cues: [
+        { layer: "Camera", preset: "push-in", at: 0, params: { duration: 1875, amount: 0.08 } },
+        { layer: "Caption card", preset: "fade-in", at: 200, params: { duration: 250 } },
+        { layer: "Caption", preset: "words-in", at: 250, params: { duration: 500, amount: 80 } }
+      ],
+      sfx: [{ key: "shimmer", at: 0 }],
+      draw(l, sheet, k) {
+        const cam = camera(l, sheet);
+        sky(l, cam, "nightLow", "nightTop", "magicViolet");
+        const mira = k.instance(cam, "Mira/Calm", { Rim: 0.7, Shade: 1 }, { name: "Mira", absolute: { x: 460, y: 170 }, playback: { loop: "loop", start: 2e3 } });
+        k.patch(mira, { scaleX: 1.3, scaleY: 1.3 });
+        const halo = glow(l, cam, 960, 1010, 420, "magicPink", { strength: 0.9, name: "Pendant glow", blend: "SCREEN" });
+        l.keys(halo, "opacity", [[0, 0.2, ease.inOut("sine")], [1600, 1]]);
+        const rays = fxLayer(l, cam, "Pendant light", "Light rays", { origin: { x: 0.5, y: 0.93 }, angle: 270, spread: 3.2, rays: 18, intensity: 0.1, falloff: 1.2, speed: 0.6, color: { role: "magicGold" } }, { blend: "SCREEN" });
+        keyParam(l, rays, "intensity", [[0, 0.1, ease.named("cubic", "in")], [1875, 0.9]]);
+        star(l, cam, 960, 1e3, 70, "magicGold", "Pendant", { stroke: "line" });
+        fxLayer(l, cam, "Sparkles", "Sparkles", { density: 0.28, speed: 60, angle: 90, sway: 20, size: 22, spin: 0.6, colorA: { role: "white" }, colorB: { role: "magicPink" } }, { blend: "SCREEN" });
+        const white = wash(l, sheet, "White out", "white", "NORMAL", 0);
+        l.keys(white, "opacity", [[0, 0, ease.hold], [1300, 0, ease.named("cubic", "in")], [1875, 0.85]]);
+        caption(l, sheet, "{{brand.name}}", "{{brand.line1}}", { speakerRole: "miraHairLight", top: true });
+      }
+    },
+    {
+      name: "3 \xB7 Transformation",
+      transition: into("CIRCLE_WIPE", 300, { interp: ease.out("expo"), center: { x: 0.5, y: 0.9 } }),
+      cues: [
+        { layer: "Body light", preset: "pulse", at: 0, params: { duration: 1500, amount: 0.15 } },
+        { layer: "Flash", preset: "impact-frame", at: 1500, params: { duration: 150 } }
+      ],
+      sfx: [{ key: "whoosh", at: 100 }, { key: "shimmer", at: 900, lane: 2 }],
+      draw(l, sheet) {
+        const cam = camera(l, sheet);
+        l.rect(cam, 0, 0, W, H, "magicViolet", { name: "Magic ground" });
+        l.rect(cam, 0, 0, W, H, [l.k.gradient({ from: "magicPink", to: "nightLow", kind: "RADIAL", handles: [{ x: 0.5, y: 0.5 }, { x: 1.1, y: 0.5 }, { x: 0.5, y: 1.1 }] })], { name: "Magic glow" });
+        fxLayer(l, cam, "Focus lines", "Focus lines", { center: { x: 0.5, y: 0.5 }, inner: 0.3, count: 90, thickness: 0.4, rate: 8, amount: 0.6, color: { role: "ribbon" } }, { blend: "SCREEN" });
+        const whirl = depth(l, cam, "Whirl");
+        ribbon(l, whirl, [[-100, 900], [500, 560], [960, 760], [1450, 420], [2020, 520]], "ribbon", 46);
+        ribbon(l, whirl, [[-100, 240], [620, 420], [1100, 250], [1500, 620], [2020, 300]], "magicGold", 26);
+        ribbon(l, whirl, [[300, 1180], [760, 420], [1200, 820], [1700, -80]], "white", 18);
+        l.keys(whirl, "rotation", [[0, -12, ease.inOut("sine")], [1875, 14]]);
+        l.keys(whirl, "scaleX", [[0, 1.2, ease.out("cubic")], [1875, 1]]);
+        l.keys(whirl, "scaleY", [[0, 1.2, ease.out("cubic")], [1875, 1]]);
+        glow(l, cam, 960, 560, 460, "white", { strength: 0.8, name: "Body light", blend: "SCREEN" });
+        const mira = figure(l, cam, STARLIGHT, { pose: "reach-up", x: 960, base: 1e3, height: 640, ink: "white", rim: "magicPink", lightFrom: "left", name: "Mira turning" });
+        l.keys(mira, "scaleX", [[0, 1, ease.inOut("sine")], [470, -1, ease.inOut("sine")], [940, 1, ease.inOut("sine")], [1410, -1, ease.inOut("sine")], [1875, 1]]);
+        fxLayer(l, cam, "Sparkles", "Sparkles", { density: 0.35, speed: 180, angle: 270, sway: 40, size: 24, spin: 1, seed: 4, colorA: { role: "white" }, colorB: { role: "magicGold" } }, { blend: "SCREEN" });
+        wash(l, sheet, "Flash", "white", "NORMAL", 0);
+      }
+    },
+    {
+      name: "4 \xB7 The reveal",
+      cues: [
+        { layer: "Camera", preset: "pull-out", at: 0, params: { duration: 600, amount: 0.12, ease: ease.out("expo") } },
+        { layer: "Camera", preset: "camera-shake", at: 0, params: { duration: 400, distance: 12, amount: 1 } },
+        { layer: "Caption card", preset: "fade-in", at: 350, params: { duration: 250 } },
+        { layer: "Speaker", preset: "fade-in", at: 400, params: { duration: 250 } },
+        { layer: "Caption", preset: "words-in", at: 450, params: { duration: 600, amount: 70 } }
+      ],
+      sfx: [{ key: "sparkle", at: 0 }],
+      draw(l, sheet, k) {
+        const cam = camera(l, sheet);
+        l.rect(cam, -80, -80, W + 160, H + 160, "nightLow", { name: "Ground" });
+        const burst = fxLayer(l, cam, "Burst", "Impact burst", { center: { x: 0.5, y: 0.45 }, progress: 0, spikes: 18, sharpness: 0.6, rate: 0, core: { role: "white" }, ray: { role: "magicGold" } }, { blend: "SCREEN" });
+        keyParam(l, burst, "progress", [[0, 0.1, ease.out("expo")], [500, 0.95, ease.hold], [1875, 0.95]]);
+        fxLayer(l, cam, "Light", "Light rays", { origin: { x: 0.5, y: 0.4 }, angle: 270, spread: 3.2, rays: 24, intensity: 0.5, falloff: 0.8, speed: 0.4, color: { role: "magicPink" } }, { blend: "SCREEN" });
+        const mira = k.instance(cam, "Starlight Mira/Smile", { Rim: 1, Shade: 0.7 }, { name: "Starlight Mira", absolute: { x: 460, y: 140 }, playback: { loop: "loop" } });
+        k.patch(mira, { scaleX: 1.3, scaleY: 1.3 });
+        fxLayer(l, cam, "Sparkles", "Sparkles", { density: 0.3, speed: 40, angle: 90, sway: 20, size: 26, spin: 0.5, seed: 7, colorA: { role: "white" }, colorB: { role: "magicGold" } }, { blend: "SCREEN" });
+        const flash = wash(l, sheet, "Flash", "white", "SCREEN", 1);
+        l.keys(flash, "opacity", [[0, 1, ease.out("cubic")], [350, 0]]);
+        caption(l, sheet, "{{brand.name}}", "{{brand.line2}}", { speakerRole: "miraHairLight" });
+      }
+    },
+    {
+      name: "5 \xB7 The pose",
+      transition: into("DISSOLVE", 300),
+      cues: [
+        { layer: "Camera", preset: "push-in", at: 0, params: { duration: 3750, amount: 0.05 } },
+        { layer: "Title card", preset: "pop-in", at: 500, params: { duration: 600, amount: 0.4 } },
+        { layer: "Tagline", preset: "rise-in", at: 1e3, params: { duration: 600 } }
+      ],
+      sfx: [{ key: "shimmer", at: 0, gain: 0.8 }],
+      draw(l, sheet, k) {
+        const cam = camera(l, sheet);
+        sky(l, cam, "nightTop", "nightTop", "magicViolet");
+        fxLayer(l, cam, "Stars", "Sparkles", { density: 0.14, speed: 3, angle: 0, sway: 2, size: 12, spin: 0.2, colorA: { role: "white" }, colorB: { role: "magicGold" } });
+        const big = depth(l, cam, "Big star");
+        glow(l, big, 520, 460, 560, "magicGold", { strength: 0.6, name: "Star glow", blend: "SCREEN" });
+        star(l, big, 520, 460, 400, "magicPink", "Big star");
+        l.k.patch(big, { anchorX: 520 / W, anchorY: 460 / H });
+        l.k.behave(big, "rotation", [{ kind: "spin", rate: 8 }]);
+        const mira = k.instance(cam, "Starlight Mira/Smile", { Rim: 1, Shade: 0.7 }, { name: "Starlight Mira", absolute: { x: 20, y: 170 }, playback: { loop: "loop", start: 900 } });
+        k.patch(mira, { scaleX: 1.05, scaleY: 1.05 });
+        fxLayer(l, cam, "Sparkles", "Sparkles", { density: 0.2, speed: 50, angle: 270, sway: 20, size: 20, spin: 0.5, seed: 5, colorA: { role: "white" }, colorB: { role: "magicPink" } }, { blend: "SCREEN" });
+        vignette(l, sheet, "nightTop", 0.5);
+        titleCard(k, sheet, { title: "{{brand.title}}", tagline: "{{brand.tagline}}", plate: "nightTop", plateOpacity: 0.7, shadow: "magicPink", taglineRole: "magicGold", justify: "CENTER", align: "MAX", padding: 120 });
+        void H;
+      }
+    }
+  ]
+};
+var STARLIGHT_SHORT = spec;
+var starlight_default = defineTemplate({
+  id: spec.id,
+  meta: {
+    name: "Anime short: Starlight transformation",
+    description: "A 12-second magical-girl transformation at 1920\xD71080, 30 fps: a rooftop under the moon, a pendant waking in a close-up, a circle wipe into a whirl of ribbons and stars as she turns, the reveal on a burst of light and the final pose with the title \u2014 one character in two costumes as motion components, sparkles, light rays and a bell-arpeggio score (made by PopCraft, CC0)",
+    category: "animation",
+    tags: ["animation", "anime", "short film", "magical girl", "transformation", "characters", "scenes", "music", "sparkles", "light rays"],
+    platforms: ["youtube", "tiktok", "instagram", "x"],
+    formats: ["video", "short", "intro"],
+    useCases: ["brand-intro", "announcement"],
+    created: "2026-09-30",
+    updated: "2026-09-30"
+  },
+  sequence: true,
+  motion: { scenes: shortScenes(spec) },
+  build: () => buildShort(spec)
+});
+
+export {
+  STARLIGHT_SHORT,
+  starlight_default
+};