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,121 @@
+<!--
+  Layout: split — 50/50 side-by-side
+  ─────────────────────────────────────────────────────────────────────
+  Real schema only has `card.zone` (5 enum values) — there is NO
+  `card.layout` field, and video bounds are composition-level
+  (`videoTrack.bounds`, one-time). The "split look" is implemented by:
+    1. setting card.zone = "side-panel" for each card in this stretch
+    2. tweening #video-wrap to the other half via GSAP between cards
+
+  Recommended storyboard.json card entry (strict v3):
+    {
+      "id": "card-XX",
+      "intent": "speaker + data side-by-side",
+      "startSec": 8, "endSec": 14,
+      "accentIndex": 0,
+      "zone": "side-panel",
+      "contentHints": { "kicker": "...", "title": "...", "detail": "..." }
+    }
+
+  GSAP target for #video-wrap during this card (paste in <script>):
+    landscape (1920×1080):
+      tl.to('#video-wrap',
+        { left: 960, top: 0, width: 960, height: 1080,
+          duration: 0.6, ease: 'power2.inOut' }, START_SEC);
+
+    portrait (1080×1920) — flips to top/bottom:
+      tl.to('#video-wrap',
+        { left: 0, top: 960, width: 1080, height: 960,
+          duration: 0.6, ease: 'power2.inOut' }, START_SEC);
+
+    4:5 (1080×1350) — derive by ×0.703 on y/h:
+      tl.to('#video-wrap',
+        { left: 0, top: 675, width: 1080, height: 675,
+          duration: 0.6, ease: 'power2.inOut' }, START_SEC);
+
+  Notes
+  - Card-host (from card.zone="side-panel") covers half the canvas;
+    opaque card background is fine — it only paints its own half.
+  - Flip card/video sides: swap which side gets the speaker tween.
+  - With 14–18px page-level gap, set composition bg to deep color
+    (e.g. #0a0c12) so the gap reads as a clean separator.
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>layout · split (50/50)</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: #0a0c12;
+        color: #fff;
+        font-family: ui-sans-serif, system-ui, sans-serif;
+      }
+      .stage {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        transform-origin: top left;
+        transform: scale(0.5);
+        background: #0a0c12;
+        overflow: hidden;
+      }
+      .region {
+        position: absolute;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font:
+          600 24px/1.3 ui-monospace,
+          monospace;
+        letter-spacing: 0.12em;
+      }
+      .card-region {
+        left: 18px;
+        top: 18px;
+        width: 942px;
+        height: 1044px;
+        background: #f1ead8;
+        color: #1a1d2b;
+      }
+      .video-region {
+        left: 978px;
+        top: 18px;
+        width: 924px;
+        height: 1044px;
+        background: #1a1f2e;
+        background-image: repeating-linear-gradient(
+          45deg,
+          transparent 0 12px,
+          rgba(255, 255, 255, 0.05) 12px 13px
+        );
+      }
+      .label {
+        padding: 12px 18px;
+        border: 1.5px solid currentColor;
+        border-radius: 4px;
+      }
+      .meta {
+        position: absolute;
+        left: 18px;
+        top: -36px;
+        font:
+          12px/1 ui-monospace,
+          monospace;
+        letter-spacing: 0.18em;
+        color: #888;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="stage">
+      <div class="meta">SPLIT · 1920×1080 · card 960 | video 960</div>
+      <div class="region card-region"><span class="label">CARD · 960×1080</span></div>
+      <div class="region video-region"><span class="label">VIDEO · 960×1080</span></div>
+    </div>
+  </body>
+</html>