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,109 @@
+<!--
+  Layout: stack — video on top, card below
+  ─────────────────────────────────────────────────────────────────────
+  Implementation: card.zone = "lower-third" + tween #video-wrap to top band.
+
+  Recommended storyboard.json card entry (strict v3):
+    {
+      "id": "card-XX",
+      "intent": "talking-head + caption-style summary below",
+      "startSec": 8, "endSec": 14,
+      "accentIndex": 0,
+      "zone": "lower-third",
+      "contentHints": { "kicker": "...", "title": "...", "detail": "..." }
+    }
+
+  GSAP target for #video-wrap (top band):
+    landscape (1920×1080) — video top 52%:
+      tl.to('#video-wrap',
+        { left: 14, top: 14, width: 1892, height: 548,
+          duration: 0.6, ease: 'power2.inOut' }, START_SEC);
+
+    portrait (1080×1920) — video top 44%:
+      tl.to('#video-wrap',
+        { left: 0, top: 0, width: 1080, height: 844,
+          duration: 0.6, ease: 'power2.inOut' }, START_SEC);
+
+    4:5 (1080×1350) — y/h × 0.703:
+      tl.to('#video-wrap',
+        { left: 0, top: 0, width: 1080, height: 593,
+          duration: 0.6, ease: 'power2.inOut' }, START_SEC);
+
+  Notes
+  - Sleek vertical: gives the speaker a wider stage on top.
+  - Card below is a full-width statement — great for one big sentence
+    or one big number.
+  - The `lower-third` zone resolves to bottom 30% by default
+    (`resolveZoneBounds`); for a 48% card adjust the GSAP tween to also
+    move card-host height, or use `zone="whiteboard-area"` + custom CSS.
+  - 14px gap between video and card looks clean — set composition bg to
+    a deep color (#0a0c12) so the gap reads as a separator.
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>layout · stack (video top, card bottom)</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;
+      }
+      .video-region {
+        left: 14px;
+        top: 14px;
+        width: 1892px;
+        height: 548px;
+        background: #1a1f2e;
+        background-image: repeating-linear-gradient(
+          45deg,
+          transparent 0 12px,
+          rgba(255, 255, 255, 0.05) 12px 13px
+        );
+      }
+      .card-region {
+        left: 14px;
+        top: 576px;
+        width: 1892px;
+        height: 504px;
+        background: #f1ead8;
+        color: #1a1d2b;
+      }
+      .label {
+        padding: 12px 18px;
+        border: 1.5px solid currentColor;
+        border-radius: 4px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="stage">
+      <div class="region video-region"><span class="label">VIDEO · 1920×562 (top 52%)</span></div>
+      <div class="region card-region"><span class="label">CARD · 1920×518 (bottom 48%)</span></div>
+    </div>
+  </body>
+</html>