Add HyperFrames skills

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011h6NB8JQtfPc6eRCefEzBB
2026-10-14 21:51:46 +00:00
1 parent 6bd8165e6d
commit 1b2c8439f0
@@ -0,0 +1,98 @@
+# Template: champion
+
+**Look:** podcast / interview, upper-side column with intro→phrase→emph
+beats building toward a center-stage CROWN that crosses the subject's body.
+"Wimbledon Champion" energy.
+
+**Visual identity (LOCKED):**
+
+- 5 typography slots: intro / phrase / emph / dream / crown
+- `mix-blend-mode: screen` over warm bone color (#fff5df)
+- Deep text-shadow + brightness boost
+- Single-caption-swap layout (caps stack at one point in the column)
+- Center-stage crown crosses the subject for cinematic occlusion
+
+## When to apply
+
+✅ **Good fit:**
+
+- Podcast / interview style with a single seated subject
+- Cluttered backdrop (bookshelf, props, dark) — screen blend reads through
+- Subject roughly centered with clear clean zones on one or both sides
+- Speech has a clear payoff line that can become a "crown" (1-3 short words)
+- 16:9 landscape, 1920×1080 ideal
+
+❌ **Wrong fit:**
+
+- Bright/sky/window backdrop (screen blend washes out)
+- Subject heavily off-center such that there's no clean column zone
+- Speech has no clear climax line
+- Portrait 9:16 → use `portrait-header` template instead
+
+## Layout decisions agent makes
+
+| Field                         | What                                                                                                                                        | Example (1920×1080)                            |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| `plane.top/left/width/height` | Where the side column sits. Pick the side opposite the subject's gaze (looking room) and hug the cleanest backdrop zone.                    | `{top: 40, left: 40, width: 720, height: 420}` |
+| `plane.rotateY`               | Slight perspective into the wall. Positive for left column (recedes right), negative for right column. Keep small (3-7°).                   | `4`                                            |
+| `crown_top`                   | Y position of the crown. Should fall on the subject's chest/neck so the body occludes the middle letters.                                   | `420`                                          |
+| `font_scale`                  | Multiplier on locked sizes.                                                                                                                 | `1.0` for 1920×1080                            |
+| `crown_enabled`               | Whether to render a crown. Skip if the speech has no clean payoff line, or if the subject is too far off-center for a center crown to land. | `true`                                         |
+
+### Crown placement rules
+
+Before enabling the crown, verify all 3 conditions:
+
+1. Subject body center within ±10% of frame horizontal center
+2. Clean zones ≥15% of frame width on each side of subject
+3. Crown text width (uppercase 140px × ~chars) > subject body width + 400px
+
+If any fails: disable the crown OR use a smaller font + place it in the
+larger clean zone instead of center. See `references/layout-heuristics.md`.
+
+## Slot assignment
+
+| Slot   | Use for                                                    |
+| ------ | ---------------------------------------------------------- |
+| intro  | Filler / discourse markers ("you know,", "for me,", "so…") |
+| phrase | Main statement clauses                                     |
+| emph   | Key achievement / superlative line                         |
+| dream  | Aspirational lines, past-tense reflection                  |
+| crown  | The single climax line — center-stage payoff               |
+
+Aim for ≤3 slots per video (excluding crown). Don't use all 4 in a 12s clip.
+
+## Plan.json shape
+
+```json
+{
+  "mode": "template",
+  "template": "champion",
+  "duration": 12.08, "fps": 24, "width": 1920, "height": 1080,
+  "plane": {
+    "top": 40, "left": 40, "width": 720, "height": 420,
+    "rotateY": 4
+  },
+  "crown_top": 420,
+  "font_scale": 1.0,
+  "groups": [
+    { "id": "cg-0", "slot": "intro", "tone": "soft",
+      "in": 0.10, "out": 1.45, "words": [...] },
+    { "id": "cg-1", "slot": "phrase", "tone": "soft",
+      "in": 1.55, "out": 4.20, "words": [...] },
+    { "id": "cg-2", "slot": "emph", "tone": "present",
+      "in": 6.50, "out": 8.30, "words": [...] }
+  ],
+  "crown_group": {
+    "id": "cg-crown", "tone": "present",
+    "in": 10.85, "out": 12.08,
+    "words": [
+      {"text": "Wimbledon", "start": 10.94, "end": 11.28},
+      {"text": "Champion",  "start": 11.38, "end": 11.84}
+    ]
+  }
+}
+```
+
+`crown_group` always uses the crown slot — no need to specify `slot`.
+Set `crown_group: null` to disable.
@@ -0,0 +1,188 @@
+<!doctype html>
+<!--
+  TEMPLATE: champion
+  STYLE LOCKED. LAYOUT OPEN.
+
+  Look: podcast / interview, upper-left column with intro→phrase→emph
+  beats, big center-stage CROWN crossing the subject for the payoff.
+
+  Locked:
+    - 5 typography slots: intro / phrase / emph / dream / crown
+    - mix-blend-mode: screen, color #fff5df, deep text-shadow
+    - Single-caption-swap layout (caps absolute-positioned in left-plane)
+    - GSAP soft/present per-word reveal
+
+  Open via plan.json:
+    - left-plane geometry + perspective
+    - crown_plane top
+    - --font-scale
+    - GROUPS array + slot per group
+    - whether crown is enabled (crown_group)
+-->
+<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;
+        perspective: 2400px;
+        perspective-origin: 25% 50%;
+        pointer-events: none;
+        z-index: 2;
+      }
+
+      /* LAYOUT */
+      .left-plane {
+        position: absolute;
+        top: {{PLANE_TOP}}px;
+        left: {{PLANE_LEFT}}px;
+        width: {{PLANE_WIDTH}}px;
+        height: {{PLANE_HEIGHT}}px;
+        transform-style: preserve-3d;
+        transform: rotateY({{ROTATE_Y}}deg);
+        transform-origin: left center;
+        padding: 24px 36px;
+      }
+      .left-plane .cap {
+        position: absolute;
+        top: 24px;
+        right: 36px;
+        max-width: calc({{PLANE_WIDTH}}px - 72px);
+      }
+      .crown-plane {
+        position: absolute;
+        top: {{CROWN_TOP}}px;
+        left: {{CROWN_LEFT}}px;
+        right: {{CROWN_RIGHT}}px;
+        text-align: {{CROWN_ALIGN}};
+        pointer-events: none;
+      }
+      .crown-plane .cap-crown {
+        font-size: calc(140px * var(--font-scale) * {{CROWN_SCALE}});
+      }
+
+      /* STYLE (locked) */
+      .cap {
+        display: block;
+        position: relative;
+        line-height: 1.02;
+        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(52px * var(--font-scale));
+                    font-weight: 500; font-style: italic;
+                    letter-spacing: -0.005em; }
+      .cap-phrase { font-size: calc(60px * var(--font-scale));
+                    font-weight: 600;
+                    letter-spacing: -0.015em; }
+      .cap-emph   { font-size: calc(70px * var(--font-scale));
+                    font-weight: 800;
+                    letter-spacing: -0.025em; }
+      .cap-dream  { font-size: calc(64px * var(--font-scale));
+                    font-weight: 700; font-style: italic;
+                    letter-spacing: -0.015em; }
+      .cap-crown  { font-size: calc(140px * 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="left-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>