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,69 @@
+<template id="iris-open-template">
+  <div data-composition-id="iris-open" 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;
+      }
+      .iris-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        clip-path: circle(0% at 50% 50%);
+        will-change: clip-path;
+        background: linear-gradient(135deg, #1a0033 0%, #0a0a0f 60%);
+      }
+      .iris-stage .hero {
+        font-family: "Playfair Display", serif;
+        font-weight: 900;
+        font-size: 280px;
+        letter-spacing: -0.04em;
+        line-height: 0.95;
+        color: var(--hg-fg);
+        white-space: nowrap;
+      }
+      .iris-ring {
+        position: absolute;
+        border-radius: 50%;
+        border: 2px solid var(--hg-violet);
+        box-shadow: 0 0 40px var(--hg-violet);
+        opacity: 0;
+        will-change: transform, opacity;
+      }
+    </style>
+    <div class="iris-stage">
+      <div class="iris-ring" style="width: 200px; height: 200px"></div>
+      <div class="hero">IRIS</div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(".iris-stage", { clipPath: "circle(0% at 50% 50%)" }, 0);
+      tl.fromTo(
+        ".iris-ring",
+        { scale: 0, opacity: 0.9 },
+        { scale: 9, opacity: 0, duration: 0.85, ease: "expo.out" },
+        0.2,
+      );
+      tl.to(
+        ".iris-stage",
+        { clipPath: "circle(75% at 50% 50%)", duration: 0.9, ease: "expo.out" },
+        0.3,
+      );
+      tl.from(".iris-stage .hero", { y: 40, opacity: 0, duration: 0.6, ease: "power3.out" }, 0.6);
+
+      window.__timelines["iris-open"] = tl;
+    </script>
+  </div>
+</template>