dsh-hyperframes 0.9.1 → 0.9.3

package/skills/embedded-captions/modes/cinematic/_archive/portrait-header/template.html

@@ -1,170 +0,0 @@
-<!doctype html>
-<!--
-  TEMPLATE: portrait-header
-  STYLE LOCKED. LAYOUT OPEN.
-
-  Look: 9:16 portrait talking-head, captions on a horizontal strip across
-  the top above the subject. Optional crown at bottom if waist+ visible.
-
-  Locked: 5 typography slots (intro/phrase/emph/dream/crown), screen blend,
-          single-caption swap (caps absolute-positioned in header strip).
-
-  Open via plan.json: header strip top/height, crown enable+top, font_scale.
--->
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      :root { --font-scale: {{FONT_SCALE}}; }
-
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body {
-        margin: 0;
-        width: {{WIDTH}}px; height: {{HEIGHT}}px;
-        overflow: hidden;
-        background: #000;
-        font-family: "Inter", system-ui, sans-serif;
-      }
-      #a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
-      #stage {
-        position: absolute;
-        top: 0; left: 0;
-        width: {{WIDTH}}px; height: {{HEIGHT}}px;
-        pointer-events: none;
-        z-index: 2;
-      }
-
-      /* LAYOUT */
-      .header-plane {
-        position: absolute;
-        top: {{HEADER_TOP}}px;
-        left: 0; right: 0;
-        height: {{HEADER_HEIGHT}}px;
-        padding: 24px 40px;
-      }
-      .header-plane .cap {
-        position: absolute;
-        top: 24px;
-        left: 40px; right: 40px;
-        max-width: calc(100% - 80px);
-        text-align: center;
-      }
-      .crown-plane {
-        position: absolute;
-        top: {{CROWN_TOP}}px;
-        left: 0; right: 0;
-        text-align: center;
-        pointer-events: none;
-      }
-
-      /* STYLE (locked) */
-      .cap {
-        display: block;
-        position: relative;
-        line-height: 1.05;
-        opacity: 0;
-        mix-blend-mode: {{BLEND_MODE}};
-        color: {{CAP_COLOR}};
-        text-shadow: {{TEXT_SHADOW}};
-        filter: {{TEXT_FILTER}};
-        will-change: transform, opacity;
-      }
-      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
-
-      .cap-intro  { font-size: calc(72px * var(--font-scale));
-                    font-weight: 500; font-style: italic;
-                    letter-spacing: -0.005em; line-height: 1.1; }
-      .cap-phrase { font-size: calc(88px * var(--font-scale));
-                    font-weight: 600;
-                    letter-spacing: -0.015em; line-height: 1.05; }
-      .cap-emph   { font-size: calc(104px * var(--font-scale));
-                    font-weight: 800;
-                    letter-spacing: -0.025em; line-height: 1.0; }
-      .cap-dream  { font-size: calc(92px * var(--font-scale));
-                    font-weight: 700; font-style: italic;
-                    letter-spacing: -0.015em; line-height: 1.05; }
-      .cap-crown  { font-size: calc(130px * var(--font-scale));
-                    font-weight: 900;
-                    letter-spacing: -0.035em; text-transform: uppercase;
-                    line-height: 1.0; }
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="{{DURATION}}"
-      data-width="{{WIDTH}}"
-      data-height="{{HEIGHT}}"
-    >
-      <video
-        id="a-roll"
-        src="source.mp4"
-        muted
-        playsinline
-        data-duration="{{DURATION}}"
-        data-track-index="0"
-        style="z-index: 1"
-      ></video>
-
-      <div id="stage">
-        <div class="header-plane">{{GROUPS_HTML}}</div>
-        <div class="crown-plane">{{CROWN_HTML}}</div>
-      </div>
-
-      <audio
-        id="a-roll-audio"
-        src="source.mp4"
-        data-start="0"
-        data-duration="{{DURATION}}"
-        data-track-index="3"
-        data-volume="1"
-      ></audio>
-    </div>
-
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-      const DUR = {{DURATION}};
-      const GROUPS = {{GROUPS_JSON}};
-      const CROWN  = {{CROWN_JSON}};
-
-      function animateGroup(g) {
-        var sel = "#" + g.id;
-        var isSoft = g.tone === "soft";
-        tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
-
-        g.words.forEach(function (w, i) {
-          var wsel = sel + " .w[data-i='" + i + "']";
-          if (isSoft) {
-            tl.fromTo(wsel,
-              { opacity: 0, y: 8 },
-              { opacity: 1, y: 0, duration: 0.42, ease: "power2.out", overwrite: "auto" },
-              w.start);
-          } else {
-            tl.fromTo(wsel,
-              { opacity: 0, y: 6, scale: 1.04 },
-              { opacity: 1, y: 0, scale: 1.0, duration: 0.22,
-                ease: "power3.out", overwrite: "auto", transformOrigin: "50% 50%" },
-              w.start);
-          }
-        });
-
-        if (g.out < DUR) {
-          tl.to(sel, { opacity: 0, duration: 0.45, ease: "power2.in", overwrite: "auto" },
-                g.out - 0.45);
-        }
-        tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
-      }
-
-      GROUPS.forEach(animateGroup);
-      if (CROWN) animateGroup(CROWN);
-
-      tl.seek(0);
-      window.__timelines["main"] = tl;
-    </script>
-  </body>
-</html>

package/skills/embedded-captions/modes/cinematic/cinematic-cream/spec.md

@@ -1,16 +0,0 @@
-# cinematic-cream — spec
-
-The authoritative spec lives in [template.html](template.html)'s header comment (DNA-only:
-what's LOCKED vs OPEN, the LAYOUT/planes contract, READING ORDER + hand-off, hero sizing).
-Read that header before authoring plan.json. Quick contract:
-
-- LOCKED: Inter, soft/present motion, warm-cream palette, screen blend, shadow logic.
-- OPEN per group (css field): size/weight/style/transform/spacing + position WITHIN a plane.
-- LAYOUT: run scripts/safe-zones.cjs first. Narration planes HUG the silhouette — use
-  zones.hugLeft/hugRight (2-6% gap from the subject's edge); a plane parked in the far
-  corner reads as disconnected floating text, not an embed. The ONE hero stays BIG
-  (~0.22-0.34·h) centered ON the subject (heroAnchor / heroBands.best), target ~30-55%
-  occlusion. fg is the LAST resort: only when heroBands.feasible=false (no band ≤62%).
-  hero BIG (~0.22-0.34·h) centered ON the subject (heroAnchor), target ~30-55% occlusion.
-- plan.json: groups[] with per-word transcript timings (use scripts/fill-timings.cjs),
-  fit via scripts/fit-fonts.cjs, compile via scripts/make-composition.cjs.

package/skills/embedded-captions/modes/cinematic/cinematic-cream/template.html

@@ -1,226 +0,0 @@
-<!doctype html>
-<!--
-  TEMPLATE: cinematic-cream
-  DNA-ONLY template. No slot structure. No preset typography classes.
-  The agent composes each caption group's typography per-scene via the
-  plan.json `css` field.
-
-  What's LOCKED (DNA — do not override):
-    - font-family: Inter (+ fallback)
-    - Motion vocabulary: per-word soft/present reveal curves from the
-       validated memory-wall timeline (tone: "soft" | "present")
-    - Color palette defaults (cream on dark scenes, deep warm on light)
-    - mix-blend-mode defaults, text-shadow / filter auto-picked from
-       cap_color luminance (via make-composition.py)
-    - Animation: 0.7s container fade-in (at g.in-0.01 via tl.set), per-word
-       reveal at w.start, group fade-out 0.5s before g.out
-
-  What's OPEN per group (agent decides per scene via `css` field):
-    - font-size, font-weight, font-style (italic or not), text-transform
-       (uppercase or not), letter-spacing, line-height
-    - Position: top / left / right / bottom / transform / text-align
-    - Layer: bg (embed via matte) | fg (announcement on top)
-    - Tone: soft | present (motion curve)
-    - scale: optional shortcut for size multiplication
-
-  LAYOUT — FIRST run the safe-zone precompute, THEN compose into PLANES:
-    - Run `node scripts/safe-zones.cjs <project>` and read `safe-zones.json`. From the
-       matte it gives subject coverage%, the clearer side, the largest CLEAN rectangles
-       (left/right/top), and a verdict:
-         · "fg"   → subject fills the frame; NO room to embed behind it. Use
-            `caption_layer:"fg"` (screen-blend on top). Do NOT fight it with bg embeds —
-            that's the 9:16 case that costs many failed occlusion rounds.
-         · "embed"→ NARRATION planes go INSIDE the reported clean zones (prefer the clearer
-            side / top). The HERO is the EXCEPTION — see the next bullet. Don't guess
-            narration positions — use the zones safe-zones gives you.
-    - NARRATION: define 2-4 named planes in plan.json `planes {}`, each inside a clean zone
-       from safe-zones.json. Give each narration group a `plane`; groups STACK within it (a
-       plane is a flex column → lines accumulate, aligned + coherent). Narration must be CLEAR.
-    - THE HERO (the one promoted peak word) is the OPPOSITE of narration — BIG, and ON the
-       subject. It is the scarce, earned PEAK; it must feel like it BURSTS, not a polite label:
-         · BIG + dominant — **~0.22–0.34 × frame height**. Give it a WIDE plane (≈ centered,
-            spanning the subject), NEVER a narrow margin column. (fit-fonts won't enlarge — if
-            the hero's box is narrow it stays small; widen the box.)
-         · CENTERED on the subject (use safe-zones `heroAnchor` = the subject's center),
-            CROSSING it so the head/torso occludes the MIDDLE — **target ~30–55% occlusion**.
-            That occlusion IS the effect. A hero shoved into a clean margin (~10% graze) is
-            WRONG — it reads as a small floating word, not an embed behind the subject.
-         · Exactly ONE hero per clip (scarcity = impact). Mark it `"hero": true` in the plan.
-    - Do NOT hand-position every group with its own scattered absolute `top%` — that
-       produces the unbalanced, occluded layouts the gate rejects (many re-tries). Planes
-       first; per-group `css` only fine-tunes WITHIN a plane. (Position fields above apply
-       per-group only when a group is NOT in a plane — the exception, not the default.)
-
-  READING ORDER — on-screen position follows SPOKEN order; a promoted word appears once:
-    - For groups sharing a column/region, vertical (top→bottom) order MUST match spoken
-       order. A promoted hero must NOT sit below words that come after it.
-       (e.g. "judge us by the [ACTIONS] that we take" → ACTIONS reads BETWEEN "by the" and
-       "that we take", NEVER below "that we take".)
-    - The promoted word is lifted OUT of the narration (appears once, as the hero — never
-       also in a narration line). For the words AFTER it, two options, in order:
-         1. PREFERRED — flow them directly BELOW the hero (in reading order) or merge them
-            into the hero's group, IF that area is clean (check safe-zones). One continuous
-            read, no clearing.
-         2. FALLBACK — if below/merge would land on the subject (occluded), do the Standard
-            hand-off: the pre-hero narration CLEARS, then the post-hero words appear fresh
-            (page-flip); the hero may hold across the flip.
-       Prefer promoting a CLAUSE-FINAL word when you can — then nothing follows to place.
-
-  Philosophy:
-    - Number of groups = content decides (3? 7? 12? whatever the speech
-       warrants)
-    - Each group's typography = scene decides (italic for soft moments,
-       uppercase for punch, mixed case for narration — per group)
-    - No more "cap-1 must be italic 600" rules. Those were slots.
-    - The agent reads the scene + transcript and composes. The template
-       only guarantees the DNA feels coherent (Inter family, same motion
-       library, warm-cream or deep-warm palette, same shadow logic).
-
-  See `references/typographic-moves.md` for RECOMMENDED typography
-  combinations (NOT rules) — italic 600 for openers, uppercase 900 for
-  climaxes, etc. These are suggestions the agent can pick from or deviate.
--->
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      :root { --font-scale: {{FONT_SCALE}}; --h: {{HEIGHT}}px; --w: {{WIDTH}}px; }
-
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body {
-        margin: 0;
-        width: {{WIDTH}}px; height: {{HEIGHT}}px;
-        overflow: hidden;
-        background: #000;
-        font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
-      }
-      #a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
-      #stage {
-        position: absolute;
-        top: 0; left: 0;
-        width: {{WIDTH}}px; height: {{HEIGHT}}px;
-        pointer-events: none;
-        z-index: 2;
-      }
-
-      /* BASE — everything shared across groups */
-      .cap {
-        display: block;
-        position: absolute;
-        opacity: 0;
-        mix-blend-mode: {{BLEND_MODE}};
-        color: {{CAP_COLOR}};
-        text-shadow: {{TEXT_SHADOW}};
-        filter: {{TEXT_FILTER}};
-        line-height: 1.0;
-        will-change: transform, opacity;
-        /* Free-mode defaults (when cap is a direct child of #stage):
-           per-group `top:` positions the element's TOP edge from the
-           frame top. Agent writes top/left/right per group.  */
-        top: 50%; left: 0; right: 0; text-align: center;
-      }
-      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
-
-      /* Plane mode — when .cap is nested inside .plane, switch to flow
-         layout so the plane's flex/grid can own the stacking. Agent writes
-         typography only per group; positions are delegated to the plane.
-         This is the memory-wall / champion architecture: a shared parent
-         container handles spatial coherence, caps inside don't fight for
-         top% values. */
-      .plane { position: absolute; pointer-events: none; }
-      .plane > .cap {
-        position: relative;
-        top: auto; left: auto; right: auto; bottom: auto;
-      }
-
-      {{PLANES_CSS}}
-
-      /* Per-group typography (agent-authored). */
-      {{CUSTOM_CSS}}
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="{{DURATION}}"
-      data-width="{{WIDTH}}"
-      data-height="{{HEIGHT}}"
-    >
-      <video
-        id="a-roll"
-        src="source.mp4"
-        muted
-        playsinline
-        data-duration="{{DURATION}}"
-        data-track-index="0"
-        style="z-index: 1"
-      ></video>
-
-      <div id="stage">{{GROUPS_HTML}}</div>
-
-      <audio
-        id="a-roll-audio"
-        src="source.mp4"
-        data-start="0"
-        data-duration="{{DURATION}}"
-        data-track-index="3"
-        data-volume="1"
-      ></audio>
-    </div>
-
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-      const DUR = {{DURATION}};
-      const GROUPS = {{GROUPS_JSON}};
-
-      /* Motion vocabulary — LOCKED.
-         soft:    gentle fade with 8px y-drift, 0.45s power2.out
-         present: snappier pop with 6px y + 1.04 scale, 0.22s power3.out
-         Both target per-WORD spans. Container fade-in via tl.set at g.in-0.01. */
-      GROUPS.forEach(function (g) {
-        var sel = "#" + g.id;
-        var isSoft = g.tone === "soft";
-
-        // Enter: reveal opacity at g.in-0.01. The cap has been reserving flex
-        // space all along (opacity: 0 but display: block from CSS), so no
-        // layout reflow when it fades in — matches memory-wall canonical.
-        tl.set(sel, { opacity: 1 }, Math.max(0, g.in - 0.01));
-
-        g.words.forEach(function (w, i) {
-          var wsel = sel + " .w[data-i='" + i + "']";
-          if (isSoft) {
-            tl.fromTo(wsel,
-              { opacity: 0, y: 8 },
-              { opacity: 1, y: 0, duration: 0.45, ease: "power2.out", overwrite: "auto" },
-              w.start);
-          } else {
-            tl.fromTo(wsel,
-              { opacity: 0, y: 6, scale: 1.04 },
-              { opacity: 1, y: 0, scale: 1.0, duration: 0.22,
-                ease: "power3.out", overwrite: "auto", transformOrigin: "50% 50%" },
-              w.start);
-          }
-        });
-
-        if (g.out < DUR) {
-          tl.to(sel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" },
-                g.out - 0.5);
-        }
-        // Exit: display:none releases flex space so the next sentence-block's
-        // caps can take the top slot. All caps in ONE block share the same
-        // `out` so this fires synchronously for the block — one clean reflow
-        // at the boundary, no per-cap jitter. Plan must share `out` within a
-        // block; staggered per-cap exits are forbidden in plane mode.
-        tl.set(sel, { opacity: 0, display: "none" }, g.out);
-      });
-
-      tl.seek(0);
-      window.__timelines["main"] = tl;
-    </script>
-  </body>
-</html>