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,120 @@
+<template id="crash-zoom-in-template">
+  <div data-composition-id="crash-zoom-in" data-width="1920" data-height="1080" data-duration="2">
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      .zoom-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        will-change: transform;
+      }
+      .radial-bg {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(
+          circle at center,
+          rgba(168, 85, 247, 0.18) 0%,
+          transparent 35%,
+          rgba(0, 0, 0, 0.6) 80%
+        );
+        opacity: 0;
+        will-change: opacity, transform;
+      }
+      .speed-lines {
+        position: absolute;
+        inset: 0;
+        background: repeating-radial-gradient(
+          circle at 50% 50%,
+          transparent 0px,
+          transparent 6px,
+          rgba(255, 255, 255, 0.08) 7px,
+          transparent 8px
+        );
+        opacity: 0;
+        will-change: opacity;
+        mix-blend-mode: screen;
+      }
+      .hero {
+        font-weight: 900;
+        font-size: 360px;
+        letter-spacing: -0.05em;
+        color: var(--hg-fg);
+        white-space: nowrap;
+        will-change: transform, filter;
+      }
+    </style>
+    <div class="radial-bg"></div>
+    <div class="speed-lines"></div>
+    <div class="zoom-stage"><div class="hero">CRASH</div></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Hold black for tension
+      tl.set(".hero", { scale: 0.03, filter: "blur(20px)", opacity: 0 }, 0);
+
+      const CRASH = 0.45;
+
+      // The crash itself
+      tl.to(
+        ".hero",
+        { scale: 1.0, filter: "blur(0px)", opacity: 1, duration: 0.32, ease: "expo.in" },
+        CRASH,
+      );
+
+      // Background swoosh in same window
+      tl.fromTo(
+        ".radial-bg",
+        { opacity: 0, scale: 0.4 },
+        { opacity: 1, scale: 1, duration: 0.32, ease: "expo.in" },
+        CRASH,
+      );
+      tl.fromTo(
+        ".speed-lines",
+        { opacity: 0, scale: 0.2 },
+        { opacity: 1, scale: 1.4, duration: 0.32, ease: "expo.in" },
+        CRASH,
+      );
+
+      // Landing settle
+      const LAND = CRASH + 0.32;
+      tl.to(".hero", { scale: 0.96, duration: 0.08, ease: "power3.out" }, LAND);
+      tl.to(".hero", { scale: 1.0, duration: 0.5, ease: "elastic.out(1, 0.55)" }, LAND + 0.08);
+
+      // Quick landing shake
+      const sh = [9, -7, 5, -4, 2, -1];
+      sh.forEach((amp, i) => {
+        tl.to(
+          ".zoom-stage",
+          { x: amp, y: amp * 0.5 * (i % 2 ? -1 : 1), duration: 0.03, ease: "steps(1)" },
+          LAND + i * 0.03,
+        );
+      });
+      tl.to(
+        ".zoom-stage",
+        { x: 0, y: 0, duration: 0.1, ease: "power2.out" },
+        LAND + sh.length * 0.03,
+      );
+
+      // Speed lines fade
+      tl.to(".speed-lines", { opacity: 0, duration: 0.4, ease: "power2.out" }, LAND + 0.05);
+      // Radial settles
+      tl.to(".radial-bg", { opacity: 0.5, duration: 0.5, ease: "power2.out" }, LAND);
+
+      window.__timelines["crash-zoom-in"] = tl;
+    </script>
+  </div>
+</template>