dsh-hyperframes 0.1.1 → 0.3.0

package/skills/hyperframes-animation/examples/concept-demo-decode-pan.html

@@ -0,0 +1,520 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 7 — HyperFrames Decrypt Pan Track</title>
+
+    <!--
+      HyperFrames composition.tsx.
+
+      Choreography (4 phases, 7 seconds total):
+        0.0 – 0.7s   Shot 1 static text fades in + rises ("HyperFrames renders")
+        0.7 – 1.6s   Hacker-flip decodes the accent word ("video")
+        2.8 – 3.5s   Horizontal pan to Shot 2 with parallax exit + scale-in
+        3.7 – 6.1s   Cursor-tracked typing: "HTML, CSS and JS become MP4"
+          (NOT @the source/layout-utils, NOT a charWidthRatio constant)
+        - Bar width pre-allocated from the full text — never tweened
+        - Camera follows cursor by tweening the strip's `x`, with a piecewise
+          Math.min(initialOffset, trackingOffset) for the two-phase camera
+        - Hacker-flip glyph flicker via deterministic int hash, not Math.random
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --bg: linear-gradient(
+          135deg,
+          #3a3a3a 0%,
+          #17211f 30%,
+          #0b2328 48%,
+          #1f3518 70%,
+          #343434 100%
+        );
+        --text-dark: #f8fafc;
+        --text-highlight: #18d9e8;
+        --text-highlight-2: #7bea5a;
+        --search-bg: rgba(14, 24, 23, 0.82);
+        --cursor: #7bea5a;
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-dark);
+      }
+
+      .viewport {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+      .strip {
+        display: flex;
+        height: 100%;
+        will-change: transform;
+      }
+      .shot {
+        width: 1920px;
+        height: 100%;
+        position: relative;
+        flex-shrink: 0;
+      }
+
+      /* ============================================================
+         SHOT 1 — "HyperFrames renders video"
+         ============================================================ */
+      .shot1-content {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0; /* GSAP fromTo fades in */
+      }
+      .shot1-row {
+        display: flex;
+        align-items: baseline;
+        gap: 0.4em;
+        font-size: 130px;
+      }
+      .shot1-static {
+        font-weight: 500;
+        color: var(--text-dark);
+        text-shadow: 0 0 36px rgba(24, 217, 232, 0.18);
+      }
+      .shot1-accent {
+        font-weight: 700;
+        display: flex;
+        perspective: 800px; /* required for the per-glyph rotateX */
+      }
+      .flip-glyph {
+        position: relative;
+        display: inline-block;
+        min-width: 0;
+      }
+      .flip-glyph.space {
+        min-width: 0.4em;
+      }
+      .flip-glyph .ghost {
+        opacity: 0;
+      }
+      .flip-glyph .anim {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        color: var(--text-highlight);
+        background: linear-gradient(135deg, var(--text-highlight) 0%, var(--text-highlight-2) 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        filter: drop-shadow(0 0 24px rgba(24, 217, 232, 0.32))
+          drop-shadow(0 0 36px rgba(123, 234, 90, 0.22));
+        opacity: 0;
+        transform: perspective(600px) rotateX(90deg);
+        transform-origin: bottom;
+        backface-visibility: hidden;
+      }
+
+      /* ============================================================
+         SHOT 2 — Search bar with cursor-tracked typing
+         ============================================================ */
+      .shot2-bar {
+        position: absolute;
+        top: 50%;
+        /* left set by JS once we know the bar's world coordinate */
+        height: 240px;
+        background: var(--search-bg);
+        border: 1px solid rgba(123, 234, 90, 0.22);
+        box-shadow:
+          0 0 60px rgba(24, 217, 232, 0.2),
+          0 0 96px rgba(123, 234, 90, 0.14),
+          inset 0 0 32px rgba(24, 217, 232, 0.08);
+        border-radius: 999px;
+        display: flex;
+        align-items: center;
+        padding-left: 120px;
+        padding-right: 180px;
+        opacity: 0; /* GSAP fromTo fades in */
+        transform-origin: left center;
+      }
+      .search-text {
+        font-size: 120px;
+        font-weight: 400;
+        color: var(--text-dark);
+        text-shadow: 0 0 24px rgba(248, 250, 252, 0.16);
+        white-space: pre;
+        line-height: 1;
+      }
+      .search-cursor {
+        font-size: 120px;
+        color: var(--cursor);
+        text-shadow: 0 0 26px rgba(123, 234, 90, 0.42);
+        margin-left: 4px;
+        font-weight: 300;
+        line-height: 1;
+      }
+
+      /* Hidden probe used by measureNodeWidth */
+      .measure-probe {
+        position: absolute;
+        left: -99999px;
+        top: -99999px;
+        visibility: hidden;
+        white-space: pre;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="viewport" data-layout-allow-overflow>
+        <div class="strip" data-layout-allow-overflow>
+          <!-- =====================================================
+               SHOT 1 — "HyperFrames renders video"
+               ===================================================== -->
+          <div
+            id="shot-decode"
+            class="shot shot1 clip"
+            data-start="0"
+            data-duration="3.5"
+            data-track-index="1"
+          >
+            <div class="shot1-content">
+              <div class="shot1-row">
+                <span class="shot1-static">HyperFrames renders</span>
+                <span class="shot1-accent" aria-label="video">
+                  <!-- .flip-glyph spans generated by JS -->
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- =====================================================
+               SHOT 2 — Search bar typing
+               ===================================================== -->
+          <div
+            id="shot-typing"
+            class="shot shot2 clip"
+            data-start="2.5"
+            data-duration="4.5"
+            data-track-index="2"
+          >
+            <div class="shot2-bar">
+              <span class="search-text"></span><span class="search-cursor">_</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      /* ================================================================
+         CONSTANTS — all baked at setup time.
+         ================================================================ */
+      const W = 1920,
+        H = 1080;
+      const COMPOSITION_DURATION = 7;
+      const FPS_HASH = 60; // synthetic clock for the flicker hash
+
+      const TIMING = {
+        // Phase 1: shot1 text fades in + rises
+        shot1EntryStart: 0.0,
+        shot1EntryDur: 0.67,
+
+        // Phase 2: hacker-flip "video"
+        flipStart: 0.7,
+        flipStagger: 0.066, // ~2 frames at 30fps per glyph
+        flipDuration: 0.55,
+
+        // Phase 3: horizontal pan
+        panStart: 2.83,
+        panDuration: 0.67,
+
+        // Phase 4: cursor-tracked typing
+        typingStart: 3.67, // panStart + panDuration + 0.17 buffer
+        charRate: 0.083, // seconds per character (~2.5 frames at 30fps)
+      };
+
+      const FULL_TEXT = "HTML, CSS and JS become MP4";
+      const FONT_SIZE = 120;
+      const PADDING_LEFT = 120;
+      const PADDING_RIGHT = 180;
+      const CURSOR_VIS_W = FONT_SIZE * 0.6; // visual cursor width approximation
+      const CURSOR_TARGET = W * 0.7; // screen X where cursor locks
+      const BAR_LEFT_MARGIN = 80; // initial left margin in Phase 4
+      const PARALLAX_DIST = 400; // px Shot 1 moves extra during pan
+
+      /* ================================================================
+         BUILD DOM — flip glyphs (Shot 1) generated synchronously.
+         The accent text is "video" → 5 glyphs.
+         ================================================================ */
+      const accentEl = document.querySelector(".shot1-accent");
+      const ACCENT_WORD = "video";
+      ACCENT_WORD.split("").forEach((char, index) => {
+        const span = document.createElement("span");
+        span.className = "flip-glyph" + (char === " " ? " space" : "");
+        span.dataset.char = char;
+        span.dataset.index = String(index);
+        // Each glyph needs its own font-size to match the surrounding row.
+        span.style.fontSize = "130px";
+        const ghost = document.createElement("span");
+        ghost.className = "ghost";
+        ghost.textContent = char === " " ? " " : char;
+        const anim = document.createElement("span");
+        anim.className = "anim";
+        anim.textContent = char === " " ? " " : char;
+        span.append(ghost, anim);
+        accentEl.appendChild(span);
+      });
+
+      /* ================================================================
+         TEXT MEASUREMENT — uses a hidden DOM probe so we capture
+         real letter-spacing, kerning, and font-feature widths.
+         Must run AFTER document.fonts.ready.
+         ================================================================ */
+      function measureNodeWidth(text, font) {
+        const probe = document.createElement("span");
+        probe.className = "measure-probe";
+        probe.style.font = font;
+        probe.style.whiteSpace = "pre";
+        probe.textContent = text;
+        document.body.appendChild(probe);
+        const width = probe.getBoundingClientRect().width;
+        probe.remove();
+        return width;
+      }
+
+      /* ================================================================
+         TIMELINE BUILD — fires after fonts are ready so measurements
+         use the real rendered metrics, not fallback fonts.
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Register early so HF can find it; tweens are added below.
+      window.__timelines["main"] = tl;
+
+      document.fonts.ready.then(() => {
+        const searchFont = `400 ${FONT_SIZE}px Inter, system-ui, sans-serif`;
+        const fullTextWidth = measureNodeWidth(FULL_TEXT, searchFont);
+        const barWidth = PADDING_LEFT + fullTextWidth + CURSOR_VIS_W + PADDING_RIGHT;
+
+        // Pre-allocate the bar's final width — no width tweens ever.
+        const barEl = document.querySelector(".shot2-bar");
+        barEl.style.width = barWidth + "px";
+
+        // Initial bar position in Shot 2's local space.
+        // We position it at LEFT_MARGIN from the shot's left edge.
+        barEl.style.left = BAR_LEFT_MARGIN + "px";
+        barEl.style.transform = "translateY(-50%)"; // vertical center
+
+        // ============================================================
+        // PHASE 1: Shot 1 text fade in + rise
+        // ============================================================
+        tl.fromTo(
+          ".shot1-content",
+          { opacity: 0, y: 30 },
+          {
+            opacity: 1,
+            y: 0,
+            duration: TIMING.shot1EntryDur,
+            ease: "power2.out",
+          },
+          TIMING.shot1EntryStart,
+        );
+
+        // ============================================================
+        // PHASE 2: Hacker-flip "video"
+        // ============================================================
+        const CHAR_POOL = "abcdefghijklmnopqrstuvwxyz";
+        const FLICKER = 3;
+        const REVEAL_AT = 0.6;
+
+        // Deterministic 32-bit mix — replaces Math.random / seeded RNG.
+        function pseudoHash(i, t) {
+          return ((i * 374761393 + t * 668265263) >>> 0) % CHAR_POOL.length;
+        }
+
+        document.querySelectorAll(".flip-glyph").forEach((glyph) => {
+          const index = Number(glyph.dataset.index);
+          const real = glyph.dataset.char === " " ? " " : glyph.dataset.char;
+          const anim = glyph.querySelector(".anim");
+          const start = TIMING.flipStart + index * TIMING.flipStagger;
+
+          tl.fromTo(
+            anim,
+            { rotationX: 90, opacity: 0, "--p": 0 },
+            {
+              rotationX: 0,
+              opacity: 1,
+              "--p": 1,
+              duration: TIMING.flipDuration,
+              ease: "back.out(1.6)", // spring(stiffness:150, damping:14)
+              onUpdate: function () {
+                const p = Number(gsap.getProperty(anim, "--p"));
+                if (p >= REVEAL_AT) {
+                  if (anim.textContent !== real) anim.textContent = real;
+                } else {
+                  const localFrame = Math.floor((tl.time() - start) * FPS_HASH);
+                  const bucket = Math.max(0, Math.floor(localFrame / FLICKER));
+                  anim.textContent = CHAR_POOL[pseudoHash(index, bucket)];
+                }
+              },
+            },
+            start,
+          );
+        });
+
+        // ============================================================
+        // PHASE 3: Horizontal pan + parallax exit + Shot 2 entry
+        // All three tweens at the same timeline position run in parallel.
+        // ============================================================
+        // (a) Camera pan — strip slides one full viewport left.
+        tl.to(
+          ".strip",
+          {
+            x: -W,
+            duration: TIMING.panDuration,
+            ease: "power3.inOut", // cinematic slow-in-slow-out
+          },
+          TIMING.panStart,
+        );
+
+        // (b) Shot 1 parallax exit — content moves EXTRA -PARALLAX_DIST.
+        tl.to(
+          ".shot1-content",
+          {
+            x: -PARALLAX_DIST,
+            duration: TIMING.panDuration,
+            ease: "power3.inOut",
+          },
+          TIMING.panStart,
+        );
+
+        // Shot 1 fades out partway through the pan so the eye lands on Shot 2.
+        tl.to(
+          ".shot1-content",
+          {
+            opacity: 0,
+            duration: TIMING.panDuration * 0.4,
+            ease: "power2.out",
+          },
+          TIMING.panStart,
+        );
+
+        // (c) Shot 2 bar entry — fade + scale with mild overshoot ("landing").
+        tl.fromTo(
+          ".shot2-bar",
+          { opacity: 0, scale: 0.8 },
+          {
+            opacity: 1,
+            scale: 1,
+            duration: TIMING.panDuration,
+            ease: "back.out(1.2)",
+          },
+          TIMING.panStart,
+        );
+
+        // ============================================================
+        // PHASE 4: Cursor-tracked typing.
+        //
+        // The strip is now at x = -W (Shot 2 fully on screen). For the
+        // cursor-track effect we'll *further* shift the strip by a piecewise
+        // amount: hold initial offset while the empty bar's cursor is left
+        // of CURSOR_TARGET, then follow once typing pushes it past.
+        // ============================================================
+        const searchTextEl = document.querySelector(".search-text");
+        const stripEl = document.querySelector(".strip");
+
+        const CURSOR_WIDTH_HALF = CURSOR_VIS_W / 2;
+        const STRIP_BASE_X = -W; // strip's x at the end of Phase 3
+
+        // Initial Phase-4 offset = 0 (no additional shift on top of -W).
+        // i.e. bar already sits at BAR_LEFT_MARGIN inside Shot 2.
+        const INITIAL_OFFSET = 0;
+
+        // Typing driver — a clock that runs from 0 to FULL_TEXT.length.
+        const typingProxy = { progress: 0 };
+        const typingDur = FULL_TEXT.length * TIMING.charRate;
+        const typingEnd = TIMING.typingStart + typingDur;
+        const postTypingHold = Math.max(0, COMPOSITION_DURATION - typingEnd);
+
+        tl.to(
+          typingProxy,
+          {
+            progress: FULL_TEXT.length,
+            duration: typingDur,
+            ease: "none",
+            onUpdate: function () {
+              const charsTyped = Math.min(FULL_TEXT.length, Math.floor(typingProxy.progress));
+              const visibleText = FULL_TEXT.slice(0, charsTyped);
+              if (searchTextEl.textContent !== visibleText) {
+                searchTextEl.textContent = visibleText;
+              }
+
+              // Measure current visible width to compute cursor screen position.
+              // Cheap because Inter's metrics are cached after the first call.
+              const visibleW =
+                visibleText.length === 0 ? 0 : measureNodeWidth(visibleText, searchFont);
+
+              // Cursor X in *Shot 2's* coordinate system:
+              //   shot left edge → bar left edge (BAR_LEFT_MARGIN)
+              //                  → cursor within bar (PADDING_LEFT + visibleW + CURSOR_WIDTH_HALF)
+              const cursorXInShot2 = BAR_LEFT_MARGIN + PADDING_LEFT + visibleW + CURSOR_WIDTH_HALF;
+
+              // For the cursor to land at CURSOR_TARGET on the *screen*, the
+              // strip must be shifted by:
+              //   stripX = CURSOR_TARGET - cursorXInShot2 - W   (the -W accounts
+              //   for Shot 2 being the SECOND shot in the strip)
+              const trackingStripX = CURSOR_TARGET - cursorXInShot2 - W;
+
+              // Piecewise: hold STRIP_BASE_X + INITIAL_OFFSET until tracking
+              // would pan FURTHER LEFT than the base, then follow.
+              const finalStripX = Math.min(STRIP_BASE_X + INITIAL_OFFSET, trackingStripX);
+
+              gsap.set(stripEl, { x: finalStripX });
+            },
+          },
+          TIMING.typingStart,
+        );
+
+        if (postTypingHold > 0) {
+          tl.to(
+            ".search-cursor",
+            {
+              opacity: 0.22,
+              duration: postTypingHold / 2,
+              repeat: 1,
+              yoyo: true,
+              ease: "none",
+            },
+            typingEnd,
+          );
+        }
+      });
+    </script>
+  </body>
+</html>