npm - takomi - Versions diffs - 2.5.1 → 2.5.4 - Mend

takomi 2.5.1 → 2.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (661) hide show

package/assets/.agent/skills/hyperframes-animation/examples/cta-orbit-collapse.html CHANGED Viewed

@@ -1,1298 +1,1298 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>Scene — HyperFrames CTA Orbit Collapse</title>
-    <!--
-      Blueprint: cta-orbit-collapse (HyperFrames preview)
-      Six HyperFrames technology categories orbit a central "Drop an HTML
-      scene · Render" CTA. A cursor flies in, clicks, the icons collapse,
-      and a demo card springs out from the collapse point — all in 6.5s.
-      Palette: mirrors scene-05-orbit-collapse-action.tsx
-        Background: near-black frosted glass (#0A0A0F base + violet/cyan/pink
-                    glow blobs + rgba(15,15,25,0.35) frosted tint).
-        Brand:      Tailwind violet ramp
-                    #c4b5fd (300) → #a78bfa (400) → #8b5cf6 (500) → #7c3aed (600)
-                    matching COLORS.brand.purple / purpleGlow in the source.
-        CTA card:   rgba(20,20,30,0.8) — scene-05 inner CTA dark glass.
-        CTA button: white fill, #0A0A0F text — identical to scene-05.
-      Six orbiting tech icons (driven by ICONS array, evenly spaced 2π/6):
-        HTML    angle 0,   delay 0.00s   — angle brackets + center slash
-        CSS     angle π/3, delay 0.10s   — rounded frame + 3 color swatches
-        SVG     angle 2π/3, delay 0.20s  — bezier curve + 2 anchor points
-        GSAP    angle π,   delay 0.30s   — sine wave timeline + playhead
-        3D      angle 4π/3, delay 0.40s  — isometric cube + inner facets
-        LOTTIE  angle 5π/3, delay 0.50s  — 2 diamond keyframes on timeline
-      Choreography (5 phases, 6.5 seconds total):
-        0.00 – 1.05s   Six icons enter staggered with 3D flip + stroke-draw
-                       (each 0.55s back.out(1.4) spring; outline draws via
-                        strokeDashoffset; inner accents fade in with 0.10s
-                        stagger 0.30s after each icon's entry begins)
-        0.00 – 2.95s   Continuous orbit (0.25 rad/sec) with per-icon idle
-                       wobble (±6 px y + ±2.5° rotation, damped by collapse)
-        1.50 – 2.20s   Cursor fades in off-screen-right and slides to the
-                       CTA's white button (back.out(1.3) overshoot landing)
-        2.20 – 2.46s   Click — cursor (0.85) + CTA button (0.95) compress;
-                       white boxShadow glow pulse; ripple 0.3 → 5.0 over 0.70s
-        2.20 – 3.05s   Icons collapse toward center (back.out(1.6) ease);
-                       radiusFactor 1 → 0, scale 1 → 0.5, opacity envelope
-        2.95 – 3.75s   Demo card springs out from collapse point (scale 0 → 1)
-        3.95 – 6.50s   Demo floats with finite-yoyo breathing (±8 px, ±1° tilt)
-      Continuous SVG enrichment (per icon, gated by entryDelay):
-        HTML brackets:    horizontal sway ±0.6 units, period ~1.8s
-        CSS swatches:     three dots scale ±0.18 with 1.4 rad phase offsets
-        SVG bezier:       curve group rotation ±5°, period ~2.9s
-        GSAP timeline:    playhead marker traverses 0→18 + wave scaleY ±0.12
-        3D cube:          linear rotation 30°/s (continuous tumble)
-        LOTTIE keyframes: two diamonds scale ±0.12 with 1.6 rad phase offset
-      Continuous ambient accents (single scene-ticker writes all):
-        Per-icon tile glow pulse (base 22px ±12px, phased by icon index)
-        CTA breathing aura (base 38px ±26px, frozen at click)
-        Demo glow pulse (base 72px ±28px, runs after demo emerges)
-        Background radial wash (opacity 0.02 ↔ 0.42, period ~11.4s)
-    -->
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      :root {
-        /* Palette mirrors scene-05-orbit-collapse-action.tsx — Tailwind violet
-           ramp on a near-black frosted-glass base, matching COLORS.brand.purple
-           and CTA_COLORS in  */
-        --bg-dark: #0a0a0f;
-        --text-primary: #ffffff;
-        --text-muted: rgba(255, 255, 255, 0.4);
-        --brand-purple: #8b5cf6; /* violet-500 — COLORS.brand.purple */
-        --brand-purple-light: #a78bfa; /* violet-400 */
-        --brand-purple-soft: #c4b5fd; /* violet-300 */
-        --brand-purple-deep: #7c3aed; /* violet-600 */
-        --brand-purple-glow: rgba(139, 92, 246, 0.6);
-        --glass-bg: rgba(255, 255, 255, 0.08); /* matches CTA_COLORS.inputBg */
-        --glass-border: rgba(139, 92, 246, 0.4); /* matches scene-05 icon border */
-        --cta-dark-bg: rgba(20, 20, 30, 0.8); /* scene-05 CTA card background */
-        --record-red: #ef4444;
-      }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: var(--bg-dark);
-        font-family:
-          "Inter",
-          system-ui,
-          -apple-system,
-          sans-serif;
-        color: var(--text-primary);
-      }
-      /* ============================================================
-         BACKGROUND — frosted glass over near-black base.
-         Mirrors scene-05 (FrostedGlassBackground): a deep dark radial
-         base + violet/cyan/pink glow blobs + a frosted overlay tint.
-         The blobs are static here (no per-frame jitter) to keep the
-         seek-safe contract; the orbit/CTA on top carries all motion.
-         ============================================================ */
-      .stage {
-        position: absolute;
-        inset: 0;
-        perspective: 1400px;
-      }
-      .bg {
-        position: absolute;
-        inset: 0;
-        background:
-          /* mirrored violet blobs — left + right symmetry so the wash
-             reads as a single coherent purple atmosphere rather than
-             a directional glow. */
-          radial-gradient(circle at 25% 40%, rgba(139, 92, 246, 0.55), transparent 55%),
-          radial-gradient(circle at 75% 40%, rgba(139, 92, 246, 0.55), transparent 55%),
-          /* deeper violet pool at the bottom centerline */
-          radial-gradient(ellipse 80% 50% at 50% 90%, rgba(124, 58, 237, 0.35), transparent 65%),
-          /* deep dark base */
-          radial-gradient(
-              ellipse 120% 100% at 50% 20%,
-              rgba(30, 30, 45, 1) 0%,
-              rgba(18, 18, 28, 1) 40%,
-              rgba(10, 10, 15, 1) 100%
-            );
-      }
-      .bg::after {
-        /* frosted overlay tint — emulates the rgba(15,15,25,0.4) layer
-           in scene-02's DarkFrostedGlassBackground. */
-        content: "";
-        position: absolute;
-        inset: 0;
-        background: rgba(15, 15, 25, 0.35);
-        pointer-events: none;
-      }
-      .bg-overlay {
-        position: absolute;
-        inset: 0;
-        background: rgba(10, 10, 15, 0.3);
-      }
-      /* ============================================================
-         ORBIT ICONS — three nested wrappers per icon.
-         .icon-pos     ← orbit x/y from master onUpdate
-         .icon-collapse ← collapse scale/opacity from master onUpdate
-         .icon-entry   ← 3D-flip entry from per-icon fromTo tween
-         ============================================================ */
-      .orbit-stage {
-        position: absolute;
-        inset: 0;
-      }
-      .icon-pos {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 140px;
-        height: 170px;
-        margin: -85px 0 0 -70px; /* recenter the 140×170 box */
-        perspective: 800px;
-        will-change: transform;
-      }
-      .icon-collapse {
-        width: 100%;
-        height: 100%;
-        will-change: transform, opacity;
-      }
-      .icon-entry {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        transform-style: preserve-3d;
-        will-change: transform, opacity;
-      }
-      .icon-tile {
-        width: 110px;
-        height: 110px;
-        border-radius: 26px;
-        background: var(--glass-bg);
-        backdrop-filter: blur(10px);
-        border: 1px solid var(--glass-border);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-shadow:
-          0 15px 40px rgba(0, 0, 0, 0.35),
-          0 0 32px var(--brand-purple-glow),
-          inset 0 1px 0 rgba(255, 255, 255, 0.1);
-      }
-      .icon-svg {
-        width: 60px;
-        height: 60px;
-        display: block;
-      }
-      .icon-label {
-        font-size: 14px;
-        font-weight: 500;
-        color: rgba(255, 255, 255, 0.7);
-        text-transform: uppercase;
-        letter-spacing: 0.1em;
-        text-shadow: 0 0 14px rgba(139, 92, 246, 0.5);
-      }
-      /* SVG inner-element transform origins (in viewBox units).
-         Each origin is the geometric center of the element it animates
-         (the path's bbox center, or for circles, the cx/cy point). */
-      .html-brackets-g {
-        transform-origin: 12px 12px;
-      }
-      .css-dot-a {
-        transform-origin: 8px 9px;
-      }
-      .css-dot-b {
-        transform-origin: 16px 9px;
-      }
-      .css-dot-c {
-        transform-origin: 12px 16px;
-      }
-      .svg-curve-g {
-        transform-origin: 12px 12px;
-      }
-      .gsap-wave-g {
-        transform-origin: 12px 12px;
-      }
-      .gsap-marker {
-        transform-origin: 3px 12px;
-      }
-      .three-cube-g {
-        transform-origin: 12px 12px;
-      }
-      .lottie-kf-a {
-        transform-origin: 8px 12px;
-      }
-      .lottie-kf-b {
-        transform-origin: 16px 12px;
-      }
-      /* ============================================================
-         CENTER CTA — Drop a video link · Get free clips
-         ============================================================ */
-      .cta {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        /* xPercent/yPercent set by GSAP for centering — so GSAP rotateY
-           doesn't overwrite a CSS translate(-50%,-50%). */
-        z-index: 5;
-        display: flex;
-        align-items: center;
-        background: var(--cta-dark-bg); /* rgba(20,20,30,0.8) — scene-05 */
-        backdrop-filter: blur(14px);
-        border-radius: 36px;
-        padding: 10px 10px 10px 28px;
-        gap: 16px;
-        border: 1px solid var(--glass-border);
-        box-shadow:
-          0 40px 80px rgba(0, 0, 0, 0.5),
-          0 0 60px var(--brand-purple-glow),
-          inset 0 1px 0 rgba(255, 255, 255, 0.1);
-        transform-style: preserve-3d;
-        will-change: transform, opacity;
-      }
-      .cta-link-icon {
-        width: 22px;
-        height: 22px;
-        color: var(--text-muted);
-        filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
-      }
-      .cta-placeholder {
-        font-size: 22px;
-        color: var(--text-muted);
-        min-width: 220px;
-        font-weight: 500;
-      }
-      .cta-button {
-        padding: 18px 36px;
-        background: #ffffff;
-        border-radius: 28px;
-        color: #0a0a0f; /* scene-05 button text */
-        font-size: 22px;
-        font-weight: 600;
-        white-space: nowrap;
-        box-shadow:
-          0 0 30px rgba(255, 255, 255, 0.35),
-          inset 0 -2px 6px rgba(139, 92, 246, 0.15);
-        will-change: transform, box-shadow;
-      }
-      /* ============================================================
-         RIPPLE — centered on the CTA's white button.
-         Button center sits at (CENTER_X + 130, CENTER_Y + 15) — same target
-         as the cursor's CURSOR_TARGET. Margin offsets re-center the 120 px
-         ring on that point. Avoid `margin` shorthand here so the offsets
-         can't be overridden by a stray longhand later.
-         ============================================================ */
-      .ripple {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 120px;
-        height: 120px;
-        margin-top: -45px; /* = -60 (recenter) + 15 (y offset to button) */
-        margin-left: 70px; /* = -60 (recenter) + 130 (x offset to button) */
-        margin-right: 0;
-        margin-bottom: 0;
-        border: 2px solid rgba(255, 255, 255, 0.7);
-        border-radius: 50%;
-        opacity: 0;
-        pointer-events: none;
-        z-index: 6;
-        will-change: transform, opacity;
-      }
-      /* ============================================================
-         CURSOR — top layer, opacity 0 until Phase 2
-         ============================================================ */
-      .cursor {
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 999;
-        pointer-events: none;
-        opacity: 0;
-        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
-        will-change: transform, opacity;
-      }
-      /* ============================================================
-         DEMO — appears from the collapse point in Phase 4
-         ============================================================ */
-      .demo {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 800px;
-        height: 450px;
-        margin: -225px 0 0 -400px;
-        z-index: 10;
-        border-radius: 18px;
-        overflow: hidden;
-        background:
-          radial-gradient(ellipse at 22% 28%, rgba(139, 92, 246, 0.45), transparent 62%),
-          radial-gradient(ellipse at 78% 72%, rgba(124, 58, 237, 0.45), transparent 62%),
-          linear-gradient(135deg, rgba(20, 20, 30, 0.92) 0%, rgba(10, 10, 15, 0.95) 100%);
-        border: 1px solid var(--glass-border);
-        box-shadow:
-          0 50px 100px rgba(0, 0, 0, 0.5),
-          0 0 60px var(--brand-purple-glow),
-          inset 0 1px 0 rgba(255, 255, 255, 0.1);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        /* Initial scale: 0 / opacity: 0 set by GSAP — no CSS transform here to avoid
-           GSAP overwriting `translateX(-50%)` style centering. We use left/top + margin
-           for static centering instead. */
-        transform-style: preserve-3d;
-        will-change: transform, opacity;
-      }
-      .demo-play {
-        width: 118px;
-        height: 118px;
-        border-radius: 50%;
-        background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ede9fe 60%, #c4b5fd 100%);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-shadow:
-          0 0 80px rgba(139, 92, 246, 0.7),
-          0 0 180px rgba(139, 92, 246, 0.4),
-          0 18px 40px rgba(0, 0, 0, 0.5),
-          inset 0 -4px 14px rgba(124, 58, 237, 0.3),
-          inset 0 3px 8px rgba(255, 255, 255, 0.95);
-        position: relative;
-      }
-      .demo-play::after {
-        /* outer ring — adds depth without breaking the seek-safe layout */
-        content: "";
-        position: absolute;
-        inset: -10px;
-        border-radius: 50%;
-        border: 1.5px solid rgba(139, 92, 246, 0.65);
-        box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
-        pointer-events: none;
-      }
-      .demo-play svg {
-        width: 44px;
-        height: 44px;
-        color: #0a0a0f;
-        transform: translateX(3px); /* optical center for play triangle */
-        filter: drop-shadow(0 1px 2px rgba(124, 58, 237, 0.5));
-      }
-      .demo-label {
-        position: absolute;
-        bottom: 28px;
-        left: 32px;
-        font-size: 22px;
-        font-weight: 700;
-        letter-spacing: 0.14em;
-        text-transform: uppercase;
-        background: linear-gradient(90deg, #ffffff 0%, #c4b5fd 50%, #8b5cf6 100%);
-        -webkit-background-clip: text;
-        background-clip: text;
-        color: transparent;
-        filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.6));
-      }
-      /* ============================================================
-         VIGNETTE
-         ============================================================ */
-      .vignette {
-        /* scene-05 vignette: transparent 40% → rgba(0,0,0,0.4) at edges */
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
-        pointer-events: none;
-        z-index: 50;
-      }
-      /* ============================================================
-         TITLE — centered via xPercent in GSAP (not CSS translateX),
-         so the GSAP `y` tween doesn't overwrite the centering transform.
-         Single line at 96 px; the brand wordmark ("HyperFrames") uses
-         the HyperFrames teal gradient + heavy weight, the tagline
-         ("renders any scene") stays in soft white-teal for contrast.
-         No filter — crisp edges, no blurred halo.
-         ============================================================ */
-      .title {
-        position: absolute;
-        top: 64px;
-        left: 50%;
-        white-space: nowrap;
-        text-align: center;
-        font-size: 96px;
-        font-weight: 700;
-        letter-spacing: -0.022em;
-        line-height: 1;
-        color: #ffffff;
-        text-shadow:
-          0 0 24px rgba(255, 255, 255, 0.3),
-          0 0 60px rgba(139, 92, 246, 0.45); /* scene-05 brand.purpleGlow */
-        z-index: 20;
-        will-change: transform, opacity;
-      }
-      .title-brand {
-        font-weight: 800;
-        /* Violet ramp matching scene-05's COLORS.brand.purple family */
-        background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 35%, #a78bfa 65%, #8b5cf6 100%);
-        -webkit-background-clip: text;
-        background-clip: text;
-        color: transparent;
-        filter: drop-shadow(0 0 28px rgba(139, 92, 246, 0.7))
-          drop-shadow(0 0 60px rgba(124, 58, 237, 0.5));
-      }
-      /* ============================================================
-         ENHANCEMENTS — stroke-draw entry, stagger reveal,
-         ambient background breathing.
-         The .draw-N classes preset stroke-dasharray + stroke-dashoffset
-         to N so the path starts fully hidden; GSAP animates offset → 0
-         to reveal it in time with the icon's 3D-flip entry.
-         ============================================================ */
-      .draw-50 {
-        stroke-dasharray: 50;
-        stroke-dashoffset: 50;
-      }
-      .draw-100 {
-        stroke-dasharray: 100;
-        stroke-dashoffset: 100;
-      }
-      .draw-150 {
-        stroke-dasharray: 150;
-        stroke-dashoffset: 150;
-      }
-      .draw-200 {
-        stroke-dasharray: 200;
-        stroke-dashoffset: 200;
-      }
-      .reveal-late {
-        opacity: 0;
-      }
-      /* Ambient violet breathing — sits over the dark overlay, under
-         the orbit ring; opacity driven by the scene-ticker onUpdate. */
-      .bg-pulse {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.35), transparent 62%);
-        opacity: 0;
-        pointer-events: none;
-        z-index: 1;
-        will-change: opacity;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="6.5"
-      data-width="1920"
-      data-height="1080"
-    >
-      <div
-        id="orbit-scene"
-        class="stage clip"
-        data-start="0"
-        data-duration="6.5"
-        data-track-index="1"
-      >
-        <div class="bg"></div>
-        <!-- ============================================================
-             ORBIT ICONS — 6 genre icons distributed evenly around 2π
-             ============================================================ -->
-        <div class="orbit-stage">
-          <!-- 1. HTML — angle brackets + diagonal slash -->
-          <div class="icon-pos icon-html">
-            <div class="icon-collapse">
-              <div class="icon-entry">
-                <div class="icon-tile">
-                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
-                    <g class="html-brackets-g">
-                      <path
-                        class="draw-50"
-                        d="M8 7 L3 12 L8 17"
-                        stroke="url(#g-html)"
-                        stroke-width="2.2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                      <path
-                        class="draw-50"
-                        d="M16 7 L21 12 L16 17"
-                        stroke="url(#g-html)"
-                        stroke-width="2.2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </g>
-                    <line
-                      class="reveal-late html-slash"
-                      x1="14"
-                      y1="5"
-                      x2="10"
-                      y2="19"
-                      stroke="url(#g-html)"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                    />
-                    <defs>
-                      <linearGradient id="g-html" x1="0%" y1="0%" x2="100%" y2="100%">
-                        <stop offset="0%" stop-color="#a78bfa" />
-                        <stop offset="100%" stop-color="#8b5cf6" />
-                      </linearGradient>
-                    </defs>
-                  </svg>
-                </div>
-                <span class="icon-label">HTML</span>
-              </div>
-            </div>
-          </div>
-          <!-- 2. CSS — frame with three color swatches -->
-          <div class="icon-pos icon-css">
-            <div class="icon-collapse">
-              <div class="icon-entry">
-                <div class="icon-tile">
-                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
-                    <rect
-                      class="draw-100"
-                      x="3"
-                      y="3"
-                      width="18"
-                      height="18"
-                      rx="3"
-                      stroke="url(#g-css)"
-                      stroke-width="2"
-                      fill="rgba(139, 92, 246, 0.18)"
-                    />
-                    <circle class="reveal-late css-dot-a" cx="8" cy="9" r="1.9" fill="#c4b5fd" />
-                    <circle class="reveal-late css-dot-b" cx="16" cy="9" r="1.9" fill="#a78bfa" />
-                    <circle class="reveal-late css-dot-c" cx="12" cy="16" r="1.9" fill="#7c3aed" />
-                    <defs>
-                      <linearGradient id="g-css" x1="0%" y1="0%" x2="100%" y2="100%">
-                        <stop offset="0%" stop-color="#c4b5fd" />
-                        <stop offset="100%" stop-color="#8b5cf6" />
-                      </linearGradient>
-                    </defs>
-                  </svg>
-                </div>
-                <span class="icon-label">CSS</span>
-              </div>
-            </div>
-          </div>
-          <!-- 3. SVG — bezier curve with anchor points -->
-          <div class="icon-pos icon-vector">
-            <div class="icon-collapse">
-              <div class="icon-entry">
-                <div class="icon-tile">
-                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
-                    <g class="svg-curve-g">
-                      <path
-                        class="draw-100"
-                        d="M4 19 C 8 5, 16 19, 20 5"
-                        stroke="url(#g-vec)"
-                        stroke-width="2.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        fill="none"
-                      />
-                      <circle
-                        class="reveal-late svg-anchor-a"
-                        cx="4"
-                        cy="19"
-                        r="2.2"
-                        stroke="url(#g-vec)"
-                        stroke-width="1.5"
-                        fill="rgba(139, 92, 246, 0.30)"
-                      />
-                      <circle
-                        class="reveal-late svg-anchor-b"
-                        cx="20"
-                        cy="5"
-                        r="2.2"
-                        stroke="url(#g-vec)"
-                        stroke-width="1.5"
-                        fill="rgba(139, 92, 246, 0.30)"
-                      />
-                    </g>
-                    <defs>
-                      <linearGradient id="g-vec" x1="0%" y1="0%" x2="100%" y2="100%">
-                        <stop offset="0%" stop-color="#c4b5fd" />
-                        <stop offset="100%" stop-color="#7c3aed" />
-                      </linearGradient>
-                    </defs>
-                  </svg>
-                </div>
-                <span class="icon-label">SVG</span>
-              </div>
-            </div>
-          </div>
-          <!-- 4. GSAP — sine wave timeline with playhead marker -->
-          <div class="icon-pos icon-gsap">
-            <div class="icon-collapse">
-              <div class="icon-entry">
-                <div class="icon-tile">
-                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
-                    <line
-                      x1="3"
-                      y1="20"
-                      x2="21"
-                      y2="20"
-                      stroke="url(#g-gsap)"
-                      stroke-width="1.2"
-                      stroke-linecap="round"
-                      opacity="0.4"
-                    />
-                    <path
-                      class="draw-100 gsap-wave-g"
-                      d="M3 12 C 7 5, 9 5, 12 12 C 15 19, 17 19, 21 12"
-                      stroke="url(#g-gsap)"
-                      stroke-width="2.2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      fill="none"
-                    />
-                    <circle class="reveal-late gsap-marker" cx="3" cy="12" r="2.2" fill="#c4b5fd" />
-                    <defs>
-                      <linearGradient id="g-gsap" x1="0%" y1="0%" x2="100%" y2="100%">
-                        <stop offset="0%" stop-color="#a78bfa" />
-                        <stop offset="100%" stop-color="#8b5cf6" />
-                      </linearGradient>
-                    </defs>
-                  </svg>
-                </div>
-                <span class="icon-label">GSAP</span>
-              </div>
-            </div>
-          </div>
-          <!-- 5. 3D — isometric cube with inner facet lines -->
-          <div class="icon-pos icon-three">
-            <div class="icon-collapse">
-              <div class="icon-entry">
-                <div class="icon-tile">
-                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
-                    <g class="three-cube-g">
-                      <path
-                        class="draw-100"
-                        d="M12 3 L20 7 L20 17 L12 21 L4 17 L4 7 Z"
-                        stroke="url(#g-three)"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        fill="rgba(139, 92, 246, 0.24)"
-                      />
-                      <path
-                        class="reveal-late three-facet"
-                        d="M4 7 L12 11 L20 7 M12 11 L12 21"
-                        stroke="url(#g-three)"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </g>
-                    <defs>
-                      <linearGradient id="g-three" x1="0%" y1="0%" x2="100%" y2="100%">
-                        <stop offset="0%" stop-color="#c4b5fd" />
-                        <stop offset="100%" stop-color="#7c3aed" />
-                      </linearGradient>
-                    </defs>
-                  </svg>
-                </div>
-                <span class="icon-label">3D</span>
-              </div>
-            </div>
-          </div>
-          <!-- 6. LOTTIE — two diamond keyframes on a timeline -->
-          <div class="icon-pos icon-lottie">
-            <div class="icon-collapse">
-              <div class="icon-entry">
-                <div class="icon-tile">
-                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
-                    <line
-                      x1="3"
-                      y1="12"
-                      x2="21"
-                      y2="12"
-                      stroke="url(#g-lottie)"
-                      stroke-width="1.2"
-                      stroke-linecap="round"
-                      opacity="0.4"
-                    />
-                    <path
-                      class="draw-50 lottie-kf-a"
-                      d="M8 8 L12 12 L8 16 L4 12 Z"
-                      stroke="url(#g-lottie)"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      fill="rgba(139, 92, 246, 0.28)"
-                    />
-                    <path
-                      class="draw-50 lottie-kf-b"
-                      d="M16 8 L20 12 L16 16 L12 12 Z"
-                      stroke="url(#g-lottie)"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      fill="rgba(139, 92, 246, 0.28)"
-                    />
-                    <defs>
-                      <linearGradient id="g-lottie" x1="0%" y1="0%" x2="100%" y2="100%">
-                        <stop offset="0%" stop-color="#a78bfa" />
-                        <stop offset="100%" stop-color="#8b5cf6" />
-                      </linearGradient>
-                    </defs>
-                  </svg>
-                </div>
-                <span class="icon-label">LOTTIE</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- ============================================================
-             CENTER CTA — Drop a video link · Get free clips
-             ============================================================ -->
-        <div class="cta">
-          <svg
-            class="cta-link-icon"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-          >
-            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
-            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
-          </svg>
-          <span class="cta-placeholder">Drop an HTML scene</span>
-          <div class="cta-button">Render</div>
-        </div>
-        <!-- ============================================================
-             RIPPLE — centered on the CTA's white button
-             ============================================================ -->
-        <div class="ripple"></div>
-        <!-- ============================================================
-             CURSOR — starts off-screen-right with opacity: 0.
-             White fill + black stroke matches the scene-05 cursor SVG.
-             ============================================================ -->
-        <div class="cursor">
-          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
-            <path d="M5 3L19 12L12 13L9 20L5 3Z" fill="#fff" stroke="#000" stroke-width="1.5" />
-          </svg>
-        </div>
-        <!-- ============================================================
-             DEMO — appears from the collapse point in Phase 4
-             ============================================================ -->
-        <div class="demo">
-          <div class="demo-play">
-            <svg viewBox="0 0 24 24" fill="currentColor">
-              <path d="M8 5v14l11-7L8 5z" />
-            </svg>
-          </div>
-          <span class="demo-label">HyperFrames · MP4 ready</span>
-        </div>
-        <!-- ============================================================
-             TITLE
-             ============================================================ -->
-        <div class="title"><span class="title-brand">HyperFrames</span> renders any scene</div>
-        <div class="vignette"></div>
-      </div>
-    </div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-      /* ============================================================
-         CONSTANTS
-         ============================================================ */
-      const W = 1920,
-        H = 1080;
-      const CENTER_X = W / 2;
-      const CENTER_Y = H / 2;
-      const RADIUS_X = 480;
-      const RADIUS_Y = 280;
-      const ORBIT_SPEED = 0.25; // radians per second
-      // Six HyperFrames technologies arranged around the central CTA —
-      // each represents something you'd actually drop into a
-      // HyperFrames composition (markup, styling, vector graphics,
-      // animation engines, 3D, or animated assets).
-      //
-      // drawLen — the .draw-N class present on this icon's outline.
-      //   The stroke-draw tween pulls strokeDashoffset from N to 0.
-      //   When an icon has multiple .draw-N paths sharing the same N
-      //   (HTML's two brackets, LOTTIE's two diamonds), one selector
-      //   targets both and they draw in unison.
-      // hasReveal — whether this icon has .reveal-late inner accents
-      //   to fade in late via stagger. LOTTIE has none (both diamonds
-      //   are stroke-drawn, no extra accent).
-      const ICONS = [
-        {
-          sel: ".icon-html",
-          initialAngle: (0 * Math.PI) / 3,
-          entryDelay: 0.0,
-          drawLen: 50,
-          hasReveal: true,
-        },
-        {
-          sel: ".icon-css",
-          initialAngle: (1 * Math.PI) / 3,
-          entryDelay: 0.1,
-          drawLen: 100,
-          hasReveal: true,
-        },
-        {
-          sel: ".icon-vector",
-          initialAngle: (2 * Math.PI) / 3,
-          entryDelay: 0.2,
-          drawLen: 100,
-          hasReveal: true,
-        },
-        {
-          sel: ".icon-gsap",
-          initialAngle: (3 * Math.PI) / 3,
-          entryDelay: 0.3,
-          drawLen: 100,
-          hasReveal: true,
-        },
-        {
-          sel: ".icon-three",
-          initialAngle: (4 * Math.PI) / 3,
-          entryDelay: 0.4,
-          drawLen: 100,
-          hasReveal: true,
-        },
-        {
-          sel: ".icon-lottie",
-          initialAngle: (5 * Math.PI) / 3,
-          entryDelay: 0.5,
-          drawLen: 50,
-          hasReveal: false,
-        },
-      ];
-      const ENTRY_DUR = 0.55;
-      const TITLE_AT = 0.2;
-      const CURSOR_AT = 1.5;
-      const CURSOR_MOVE = 0.5;
-      const CLICK_AT = 2.2;
-      const COLLAPSE_DUR = 0.85;
-      const DEMO_AT = 2.95;
-      const DEMO_DUR = 0.8;
-      const IDLE_START = 3.95;
-      const TOTAL = 6.5;
-      const COLLAPSE_EASE = gsap.parseEase("back.out(1.6)");
-      const ORBIT_END = DEMO_AT;
-      const CURSOR_START_X = W + 100;
-      const CURSOR_START_Y = H * 0.85;
-      const CURSOR_TARGET_X = CENTER_X + 130; // over the white button
-      const CURSOR_TARGET_Y = CENTER_Y + 15;
-      /* ============================================================
-         INITIAL STATE — embedded as tl.set calls at t=0 so the lint
-         can reason about them as timeline operations rather than
-         as overlapping zero-duration tweens.
-         ============================================================ */
-      tl.set(".icon-entry", { rotateX: 90, rotateY: -45, z: -100, scale: 0, opacity: 0 }, 0);
-      tl.set(".cursor", { x: CURSOR_START_X, y: CURSOR_START_Y, opacity: 0 }, 0);
-      tl.set(".ripple", { scale: 0.3, opacity: 0 }, 0);
-      // CTA: GSAP-driven centering + 3D entry start state.
-      tl.set(".cta", { xPercent: -50, yPercent: -50, rotateY: -90, scale: 0.7, opacity: 0 }, 0);
-      tl.set(".demo", { scale: 0, rotateY: 90, opacity: 0 }, 0);
-      /* ============================================================
-         TITLE — slides down and fades in early.
-         xPercent: -50 replaces CSS `transform: translateX(-50%)` so GSAP's
-         tween of `y` doesn't overwrite the centering transform. fromTo is
-         linter-exempt from the CSS-transform-conflict rule and bakes in the
-         start state explicitly.
-         ============================================================ */
-      tl.fromTo(
-        ".title",
-        { xPercent: -50, y: -30, opacity: 0 },
-        { xPercent: -50, y: 0, opacity: 1, duration: 0.6, ease: "back.out(1.4)" },
-        TITLE_AT,
-      );
-      /* ============================================================
-         CTA — 3D flip entry. rotateY -90° → 0° spins the card in from
-         the right; opacity + scale ease it forward at the same time.
-         xPercent/yPercent set at t=0 keep it centered while GSAP owns
-         the transform.
-         ============================================================ */
-      tl.to(
-        ".cta",
-        { rotateY: 0, scale: 1, opacity: 1, duration: 0.75, ease: "back.out(1.4)" },
-        0.3,
-      );
-      // Subtle Y-axis tilt while the CTA is idle waiting for the click.
-      // Half-cycle 0.9s, repeats yoyo until just before CLICK_AT.
-      tl.to(".cta", { rotateY: 5, duration: 0.9, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.05);
-      /* ============================================================
-         PHASE 1: 3D flip entry per icon
-         ============================================================ */
-      ICONS.forEach(({ sel, entryDelay }) => {
-        tl.fromTo(
-          `${sel} .icon-entry`,
-          { rotateX: 90, rotateY: -45, z: -100, scale: 0, opacity: 0 },
-          {
-            rotateX: 0,
-            rotateY: 0,
-            z: 0,
-            scale: 1,
-            opacity: 1,
-            duration: ENTRY_DUR,
-            ease: "back.out(1.4)",
-          },
-          entryDelay,
-        );
-      });
-      /* ============================================================
-         PHASE 1b: SVG stroke-draw per icon
-         Each icon has one .draw-N class on its outline path. CSS
-         preset the dasharray/dashoffset to N (path hidden); this
-         tween pulls the offset to 0, drawing the path along its
-         length. power2.out front-loads the reveal so the stroke
-         is mostly visible by the time the 3D flip settles.
-         ============================================================ */
-      ICONS.forEach(({ sel, entryDelay, drawLen }) => {
-        tl.fromTo(
-          `${sel} .draw-${drawLen}`,
-          { strokeDashoffset: drawLen },
-          { strokeDashoffset: 0, duration: ENTRY_DUR + 0.1, ease: "power2.out" },
-          entryDelay,
-        );
-      });
-      /* ============================================================
-         PHASE 1c: Stagger reveal for inner accent elements
-         (music notes, gaming d-pad, vlog play triangle, podcast
-         base lines). Preset to opacity 0 via .reveal-late; this
-         tween fades siblings in with a 0.10s stagger so the icon
-         "completes itself" after its outline is drawn.
-         Skipped for education/sports — they have no inner accents.
-         ============================================================ */
-      ICONS.forEach(({ sel, entryDelay, hasReveal }) => {
-        if (!hasReveal) return;
-        tl.fromTo(
-          `${sel} .reveal-late`,
-          { opacity: 0 },
-          { opacity: 1, duration: 0.3, ease: "power2.out", stagger: 0.1 },
-          entryDelay + 0.3,
-        );
-      });
-      /* ============================================================
-         PHASE 1 + 3: Master orbit + collapse engine
-         Single onUpdate spans from t=0 to ORBIT_END. Reads tl.time()
-         and computes:
-           - orbit angle per icon (relative to its entryDelay)
-           - collapse driver (eased fraction of CLICK_AT → CLICK_AT+COLLAPSE_DUR)
-         Writes x/y to .icon-pos and scale/opacity to .icon-collapse.
-         ============================================================ */
-      tl.to(
-        { tick: 0 },
-        {
-          tick: 1,
-          duration: ORBIT_END,
-          ease: "none",
-          onUpdate: () => {
-            const t = tl.time();
-            const collapseLinear = Math.max(0, Math.min(1, (t - CLICK_AT) / COLLAPSE_DUR));
-            const collapseEased = COLLAPSE_EASE(collapseLinear);
-            const radiusFactor = 1 - collapseEased;
-            const collapseScale = 1 - collapseEased * 0.5;
-            // Two-segment opacity envelope: 1 at 0, 0.5 at 0.8, 0 at 1
-            const o = collapseEased;
-            const collapseOpacity = o < 0.8 ? 1 - o * 0.625 : (0.5 * (1 - o)) / 0.2;
-            ICONS.forEach(({ sel, initialAngle, entryDelay }, i) => {
-              const localT = Math.max(0, t - entryDelay);
-              const angle = initialAngle + localT * ORBIT_SPEED;
-              const x = Math.cos(angle) * RADIUS_X * radiusFactor;
-              const y = Math.sin(angle) * RADIUS_Y * radiusFactor;
-              // Per-icon idle wobble — phased per index so the ring
-              // doesn't pulse in sync. Damped by radiusFactor so the
-              // wobble relaxes as icons collapse to the center.
-              const floatY = Math.sin(t * 1.4 + i * 1.1) * 6 * radiusFactor;
-              const floatRot = Math.sin(t * 1.1 + i * 1.7) * 2.5 * radiusFactor;
-              gsap.set(`${sel}.icon-pos`, { x, y: y + floatY });
-              gsap.set(`${sel} .icon-collapse`, {
-                scale: collapseScale,
-                opacity: collapseOpacity,
-                rotation: floatRot,
-              });
-            });
-          },
-        },
-        0,
-      );
-      /* ============================================================
-         PHASE 2: Cursor enters, slides to CTA, clicks
-         ============================================================ */
-      // Fade in
-      tl.to(".cursor", { opacity: 1, duration: 0.1, ease: "none" }, CURSOR_AT);
-      // Slide to CTA button
-      tl.to(
-        ".cursor",
-        { x: CURSOR_TARGET_X, y: CURSOR_TARGET_Y, duration: CURSOR_MOVE, ease: "back.out(1.3)" },
-        CURSOR_AT,
-      );
-      // Click depression — cursor + button compress, then recover
-      tl.to(".cursor", { scale: 0.85, duration: 0.08, ease: "power2.out" }, CLICK_AT);
-      tl.to(".cursor", { scale: 1, duration: 0.18, ease: "back.out(1.6)" }, CLICK_AT + 0.08);
-      tl.to(".cta-button", { scale: 0.95, duration: 0.08, ease: "power2.out" }, CLICK_AT);
-      tl.to(".cta-button", { scale: 1, duration: 0.18, ease: "back.out(1.6)" }, CLICK_AT + 0.08);
-      // Button glow pulse during click
-      tl.fromTo(
-        ".cta-button",
-        { boxShadow: "0 0 0 rgba(255,255,255,0)" },
-        { boxShadow: "0 0 40px rgba(255,255,255,0.7)", duration: 0.2, ease: "power2.out" },
-        CLICK_AT,
-      );
-      tl.to(
-        ".cta-button",
-        { boxShadow: "0 0 0 rgba(255,255,255,0)", duration: 0.4, ease: "power2.in" },
-        CLICK_AT + 0.2,
-      );
-      // Ripple — attack-decay envelope via keyframes
-      tl.to(
-        ".ripple",
-        {
-          duration: 0.7,
-          keyframes: {
-            "0%": { scale: 0.3, opacity: 0 },
-            "20%": { opacity: 0.7 },
-            "100%": { scale: 5.0, opacity: 0 },
-            easeEach: "power2.out",
-          },
-        },
-        CLICK_AT,
-      );
-      /* ============================================================
-         PHASE 4: Demo springs out of the collapse point
-         ============================================================ */
-      tl.fromTo(
-        ".demo",
-        { scale: 0, rotateY: 90, opacity: 0 },
-        { scale: 1, rotateY: 0, opacity: 1, duration: DEMO_DUR, ease: "back.out(1.6)" },
-        DEMO_AT,
-      );
-      // CTA fades out as the demo emerges — the click's "result" replaces the action target.
-      tl.to(".cta", { opacity: 0, duration: 0.3, ease: "power2.in" }, DEMO_AT - 0.05);
-      // Cursor exits with the CTA
-      tl.to(".cursor", { opacity: 0, duration: 0.3, ease: "power2.in" }, DEMO_AT);
-      /* ============================================================
-         PHASE 5: Demo floats with finite-yoyo breathing
-         ============================================================ */
-      const HALF_CYCLE = 1.1;
-      const remaining = TOTAL - IDLE_START;
-      const halfCycles = Math.max(0, Math.floor(remaining / HALF_CYCLE) - 1);
-      tl.fromTo(
-        ".demo",
-        { y: 0, rotation: 0, rotateY: 0, rotateX: 0 },
-        {
-          y: -8,
-          rotation: 1,
-          rotateY: 6,
-          rotateX: -2,
-          duration: HALF_CYCLE,
-          ease: "sine.inOut",
-          yoyo: true,
-          repeat: halfCycles,
-        },
-        IDLE_START,
-      );
-      /* ============================================================
-         CONTINUOUS INTERNAL SVG ENRICHMENT
-         Shared scene-ticker — one onUpdate writes all per-SVG motions.
-         Gated per-icon by its entryDelay so a hidden icon doesn't pay
-         the cost (still cheap, but cleaner intent).
-         ============================================================ */
-      const htmlBrackets = document.querySelector(".html-brackets-g");
-      const cssDotA = document.querySelector(".css-dot-a");
-      const cssDotB = document.querySelector(".css-dot-b");
-      const cssDotC = document.querySelector(".css-dot-c");
-      const svgCurve = document.querySelector(".svg-curve-g");
-      const gsapMarker = document.querySelector(".gsap-marker");
-      const gsapWave = document.querySelector(".gsap-wave-g");
-      const threeCube = document.querySelector(".three-cube-g");
-      const lottieKfA = document.querySelector(".lottie-kf-a");
-      const lottieKfB = document.querySelector(".lottie-kf-b");
-      tl.to(
-        { tick2: 0 },
-        {
-          tick2: 1,
-          duration: TOTAL,
-          ease: "none",
-          onUpdate: () => {
-            const t = tl.time();
-            // HTML brackets — tiny horizontal sway, like a typing cursor
-            const htmlT = t - 0.0;
-            if (htmlT > 0) {
-              gsap.set(htmlBrackets, { x: Math.sin(htmlT * 3.5) * 0.6 });
-            }
-            // CSS swatches — three dots scale-pulse with phase offsets
-            const cssT = t - 0.1;
-            if (cssT > 0) {
-              gsap.set(cssDotA, { scale: 0.85 + Math.sin(cssT * 5.5) * 0.18 });
-              gsap.set(cssDotB, { scale: 0.85 + Math.sin(cssT * 5.5 + 1.4) * 0.18 });
-              gsap.set(cssDotC, { scale: 0.85 + Math.sin(cssT * 5.5 + 2.8) * 0.18 });
-            }
-            // SVG bezier — whole curve group gently rotates back and forth
-            const vecT = t - 0.2;
-            if (vecT > 0) {
-              gsap.set(svgCurve, { rotation: Math.sin(vecT * 2.2) * 5 });
-            }
-            // GSAP timeline — playhead marker slides along the wave +
-            // the wave itself flexes vertically (amplitude pulse).
-            const gsapT = t - 0.3;
-            if (gsapT > 0) {
-              // marker traverses 0 → 18 viewBox units left-to-right
-              const markerX = (Math.sin(gsapT * 1.4 - Math.PI / 2) + 1) * 9;
-              gsap.set(gsapMarker, { x: markerX });
-              gsap.set(gsapWave, { scaleY: 1 + Math.sin(gsapT * 2.5) * 0.12 });
-            }
-            // 3D cube — slow continuous tumble (replaces sports-ball spin)
-            const threeT = t - 0.4;
-            if (threeT > 0) {
-              gsap.set(threeCube, { rotation: threeT * 30 });
-            }
-            // LOTTIE keyframes — two diamonds scale-pulse out of phase
-            const lottieT = t - 0.5;
-            if (lottieT > 0) {
-              gsap.set(lottieKfA, { scale: 1 + Math.sin(lottieT * 2.8) * 0.12 });
-              gsap.set(lottieKfB, { scale: 1 + Math.sin(lottieT * 2.8 + 1.6) * 0.12 });
-            }
-            // ====== ENHANCEMENT: per-icon tile glow pulse ======
-            // The tile's violet halo breathes throughout the orbit;
-            // each icon is phased by its index so the ring shimmers
-            // rather than pulses in unison. Only while the icons are
-            // still on screen (before they finish collapsing).
-            // Colors mirror scene-05: COLORS.brand.purple (#8b5cf6) +
-            // a softer rgba violet halo.
-            if (t < DEMO_AT) {
-              ICONS.forEach(({ sel }, i) => {
-                const glow = 32 + Math.sin(t * 1.3 + i * 0.95) * 16;
-                gsap.set(`${sel} .icon-tile`, {
-                  boxShadow:
-                    "0 15px 40px rgba(0, 0, 0, 0.35), " +
-                    "0 0 " +
-                    glow +
-                    "px rgba(139, 92, 246, 0.65), " +
-                    "0 0 " +
-                    glow * 2 +
-                    "px rgba(124, 58, 237, 0.28), " +
-                    "inset 0 1px 0 rgba(255, 255, 255, 0.1)",
-                });
-              });
-            }
-            // ====== ENHANCEMENT: CTA idle breathing (pre-click) ======
-            // Soft violet aura pulses around the CTA card to invite
-            // the click. Frozen at click time; the CTA fades out at
-            // DEMO_AT - 0.05 so the static end-state never shows.
-            if (t < CLICK_AT) {
-              const ctaGlow = 70 + Math.sin(t * 2.6) * 30;
-              gsap.set(".cta", {
-                boxShadow:
-                  "0 40px 80px rgba(0, 0, 0, 0.5), " +
-                  "0 0 " +
-                  ctaGlow +
-                  "px rgba(139, 92, 246, 0.7), " +
-                  "0 0 " +
-                  ctaGlow * 2 +
-                  "px rgba(124, 58, 237, 0.32), " +
-                  "inset 0 1px 0 rgba(255, 255, 255, 0.1)",
-              });
-            }
-            // ====== ENHANCEMENT: demo glow pulse (post-emerge) ======
-            // Once the demo card has sprung out, its violet aura
-            // breathes in time with its yoyo float, giving the
-            // "result" element a living idle state.
-            if (t > DEMO_AT) {
-              const demoT = t - DEMO_AT;
-              const demoGlow = 90 + Math.sin(demoT * 1.9) * 36;
-              gsap.set(".demo", {
-                boxShadow:
-                  "0 50px 100px rgba(0, 0, 0, 0.5), " +
-                  "0 0 " +
-                  demoGlow +
-                  "px rgba(139, 92, 246, 0.7), " +
-                  "0 0 " +
-                  demoGlow +
-                  "px rgba(124, 58, 237, 0.42), " +
-                  "inset 0 1px 0 rgba(255, 255, 255, 0.1)",
-              });
-            }
-          },
-        },
-        0,
-      );
-      window.__timelines["main"] = tl;
-    </script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene — HyperFrames CTA Orbit Collapse</title>
+    <!--
+      Blueprint: cta-orbit-collapse (HyperFrames preview)
+      Six HyperFrames technology categories orbit a central "Drop an HTML
+      scene · Render" CTA. A cursor flies in, clicks, the icons collapse,
+      and a demo card springs out from the collapse point — all in 6.5s.
+      Palette: mirrors scene-05-orbit-collapse-action.tsx
+        Background: near-black frosted glass (#0A0A0F base + violet/cyan/pink
+                    glow blobs + rgba(15,15,25,0.35) frosted tint).
+        Brand:      Tailwind violet ramp
+                    #c4b5fd (300) → #a78bfa (400) → #8b5cf6 (500) → #7c3aed (600)
+                    matching COLORS.brand.purple / purpleGlow in the source.
+        CTA card:   rgba(20,20,30,0.8) — scene-05 inner CTA dark glass.
+        CTA button: white fill, #0A0A0F text — identical to scene-05.
+      Six orbiting tech icons (driven by ICONS array, evenly spaced 2π/6):
+        HTML    angle 0,   delay 0.00s   — angle brackets + center slash
+        CSS     angle π/3, delay 0.10s   — rounded frame + 3 color swatches
+        SVG     angle 2π/3, delay 0.20s  — bezier curve + 2 anchor points
+        GSAP    angle π,   delay 0.30s   — sine wave timeline + playhead
+        3D      angle 4π/3, delay 0.40s  — isometric cube + inner facets
+        LOTTIE  angle 5π/3, delay 0.50s  — 2 diamond keyframes on timeline
+      Choreography (5 phases, 6.5 seconds total):
+        0.00 – 1.05s   Six icons enter staggered with 3D flip + stroke-draw
+                       (each 0.55s back.out(1.4) spring; outline draws via
+                        strokeDashoffset; inner accents fade in with 0.10s
+                        stagger 0.30s after each icon's entry begins)
+        0.00 – 2.95s   Continuous orbit (0.25 rad/sec) with per-icon idle
+                       wobble (±6 px y + ±2.5° rotation, damped by collapse)
+        1.50 – 2.20s   Cursor fades in off-screen-right and slides to the
+                       CTA's white button (back.out(1.3) overshoot landing)
+        2.20 – 2.46s   Click — cursor (0.85) + CTA button (0.95) compress;
+                       white boxShadow glow pulse; ripple 0.3 → 5.0 over 0.70s
+        2.20 – 3.05s   Icons collapse toward center (back.out(1.6) ease);
+                       radiusFactor 1 → 0, scale 1 → 0.5, opacity envelope
+        2.95 – 3.75s   Demo card springs out from collapse point (scale 0 → 1)
+        3.95 – 6.50s   Demo floats with finite-yoyo breathing (±8 px, ±1° tilt)
+      Continuous SVG enrichment (per icon, gated by entryDelay):
+        HTML brackets:    horizontal sway ±0.6 units, period ~1.8s
+        CSS swatches:     three dots scale ±0.18 with 1.4 rad phase offsets
+        SVG bezier:       curve group rotation ±5°, period ~2.9s
+        GSAP timeline:    playhead marker traverses 0→18 + wave scaleY ±0.12
+        3D cube:          linear rotation 30°/s (continuous tumble)
+        LOTTIE keyframes: two diamonds scale ±0.12 with 1.6 rad phase offset
+      Continuous ambient accents (single scene-ticker writes all):
+        Per-icon tile glow pulse (base 22px ±12px, phased by icon index)
+        CTA breathing aura (base 38px ±26px, frozen at click)
+        Demo glow pulse (base 72px ±28px, runs after demo emerges)
+        Background radial wash (opacity 0.02 ↔ 0.42, period ~11.4s)
+    -->
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root {
+        /* Palette mirrors scene-05-orbit-collapse-action.tsx — Tailwind violet
+           ramp on a near-black frosted-glass base, matching COLORS.brand.purple
+           and CTA_COLORS in  */
+        --bg-dark: #0a0a0f;
+        --text-primary: #ffffff;
+        --text-muted: rgba(255, 255, 255, 0.4);
+        --brand-purple: #8b5cf6; /* violet-500 — COLORS.brand.purple */
+        --brand-purple-light: #a78bfa; /* violet-400 */
+        --brand-purple-soft: #c4b5fd; /* violet-300 */
+        --brand-purple-deep: #7c3aed; /* violet-600 */
+        --brand-purple-glow: rgba(139, 92, 246, 0.6);
+        --glass-bg: rgba(255, 255, 255, 0.08); /* matches CTA_COLORS.inputBg */
+        --glass-border: rgba(139, 92, 246, 0.4); /* matches scene-05 icon border */
+        --cta-dark-bg: rgba(20, 20, 30, 0.8); /* scene-05 CTA card background */
+        --record-red: #ef4444;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg-dark);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text-primary);
+      }
+      /* ============================================================
+         BACKGROUND — frosted glass over near-black base.
+         Mirrors scene-05 (FrostedGlassBackground): a deep dark radial
+         base + violet/cyan/pink glow blobs + a frosted overlay tint.
+         The blobs are static here (no per-frame jitter) to keep the
+         seek-safe contract; the orbit/CTA on top carries all motion.
+         ============================================================ */
+      .stage {
+        position: absolute;
+        inset: 0;
+        perspective: 1400px;
+      }
+      .bg {
+        position: absolute;
+        inset: 0;
+        background:
+          /* mirrored violet blobs — left + right symmetry so the wash
+             reads as a single coherent purple atmosphere rather than
+             a directional glow. */
+          radial-gradient(circle at 25% 40%, rgba(139, 92, 246, 0.55), transparent 55%),
+          radial-gradient(circle at 75% 40%, rgba(139, 92, 246, 0.55), transparent 55%),
+          /* deeper violet pool at the bottom centerline */
+          radial-gradient(ellipse 80% 50% at 50% 90%, rgba(124, 58, 237, 0.35), transparent 65%),
+          /* deep dark base */
+          radial-gradient(
+              ellipse 120% 100% at 50% 20%,
+              rgba(30, 30, 45, 1) 0%,
+              rgba(18, 18, 28, 1) 40%,
+              rgba(10, 10, 15, 1) 100%
+            );
+      }
+      .bg::after {
+        /* frosted overlay tint — emulates the rgba(15,15,25,0.4) layer
+           in scene-02's DarkFrostedGlassBackground. */
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: rgba(15, 15, 25, 0.35);
+        pointer-events: none;
+      }
+      .bg-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(10, 10, 15, 0.3);
+      }
+      /* ============================================================
+         ORBIT ICONS — three nested wrappers per icon.
+         .icon-pos     ← orbit x/y from master onUpdate
+         .icon-collapse ← collapse scale/opacity from master onUpdate
+         .icon-entry   ← 3D-flip entry from per-icon fromTo tween
+         ============================================================ */
+      .orbit-stage {
+        position: absolute;
+        inset: 0;
+      }
+      .icon-pos {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 140px;
+        height: 170px;
+        margin: -85px 0 0 -70px; /* recenter the 140×170 box */
+        perspective: 800px;
+        will-change: transform;
+      }
+      .icon-collapse {
+        width: 100%;
+        height: 100%;
+        will-change: transform, opacity;
+      }
+      .icon-entry {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        transform-style: preserve-3d;
+        will-change: transform, opacity;
+      }
+      .icon-tile {
+        width: 110px;
+        height: 110px;
+        border-radius: 26px;
+        background: var(--glass-bg);
+        backdrop-filter: blur(10px);
+        border: 1px solid var(--glass-border);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow:
+          0 15px 40px rgba(0, 0, 0, 0.35),
+          0 0 32px var(--brand-purple-glow),
+          inset 0 1px 0 rgba(255, 255, 255, 0.1);
+      }
+      .icon-svg {
+        width: 60px;
+        height: 60px;
+        display: block;
+      }
+      .icon-label {
+        font-size: 14px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.7);
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        text-shadow: 0 0 14px rgba(139, 92, 246, 0.5);
+      }
+      /* SVG inner-element transform origins (in viewBox units).
+         Each origin is the geometric center of the element it animates
+         (the path's bbox center, or for circles, the cx/cy point). */
+      .html-brackets-g {
+        transform-origin: 12px 12px;
+      }
+      .css-dot-a {
+        transform-origin: 8px 9px;
+      }
+      .css-dot-b {
+        transform-origin: 16px 9px;
+      }
+      .css-dot-c {
+        transform-origin: 12px 16px;
+      }
+      .svg-curve-g {
+        transform-origin: 12px 12px;
+      }
+      .gsap-wave-g {
+        transform-origin: 12px 12px;
+      }
+      .gsap-marker {
+        transform-origin: 3px 12px;
+      }
+      .three-cube-g {
+        transform-origin: 12px 12px;
+      }
+      .lottie-kf-a {
+        transform-origin: 8px 12px;
+      }
+      .lottie-kf-b {
+        transform-origin: 16px 12px;
+      }
+      /* ============================================================
+         CENTER CTA — Drop a video link · Get free clips
+         ============================================================ */
+      .cta {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        /* xPercent/yPercent set by GSAP for centering — so GSAP rotateY
+           doesn't overwrite a CSS translate(-50%,-50%). */
+        z-index: 5;
+        display: flex;
+        align-items: center;
+        background: var(--cta-dark-bg); /* rgba(20,20,30,0.8) — scene-05 */
+        backdrop-filter: blur(14px);
+        border-radius: 36px;
+        padding: 10px 10px 10px 28px;
+        gap: 16px;
+        border: 1px solid var(--glass-border);
+        box-shadow:
+          0 40px 80px rgba(0, 0, 0, 0.5),
+          0 0 60px var(--brand-purple-glow),
+          inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        transform-style: preserve-3d;
+        will-change: transform, opacity;
+      }
+      .cta-link-icon {
+        width: 22px;
+        height: 22px;
+        color: var(--text-muted);
+        filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
+      }
+      .cta-placeholder {
+        font-size: 22px;
+        color: var(--text-muted);
+        min-width: 220px;
+        font-weight: 500;
+      }
+      .cta-button {
+        padding: 18px 36px;
+        background: #ffffff;
+        border-radius: 28px;
+        color: #0a0a0f; /* scene-05 button text */
+        font-size: 22px;
+        font-weight: 600;
+        white-space: nowrap;
+        box-shadow:
+          0 0 30px rgba(255, 255, 255, 0.35),
+          inset 0 -2px 6px rgba(139, 92, 246, 0.15);
+        will-change: transform, box-shadow;
+      }
+      /* ============================================================
+         RIPPLE — centered on the CTA's white button.
+         Button center sits at (CENTER_X + 130, CENTER_Y + 15) — same target
+         as the cursor's CURSOR_TARGET. Margin offsets re-center the 120 px
+         ring on that point. Avoid `margin` shorthand here so the offsets
+         can't be overridden by a stray longhand later.
+         ============================================================ */
+      .ripple {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 120px;
+        height: 120px;
+        margin-top: -45px; /* = -60 (recenter) + 15 (y offset to button) */
+        margin-left: 70px; /* = -60 (recenter) + 130 (x offset to button) */
+        margin-right: 0;
+        margin-bottom: 0;
+        border: 2px solid rgba(255, 255, 255, 0.7);
+        border-radius: 50%;
+        opacity: 0;
+        pointer-events: none;
+        z-index: 6;
+        will-change: transform, opacity;
+      }
+      /* ============================================================
+         CURSOR — top layer, opacity 0 until Phase 2
+         ============================================================ */
+      .cursor {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 999;
+        pointer-events: none;
+        opacity: 0;
+        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
+        will-change: transform, opacity;
+      }
+      /* ============================================================
+         DEMO — appears from the collapse point in Phase 4
+         ============================================================ */
+      .demo {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 800px;
+        height: 450px;
+        margin: -225px 0 0 -400px;
+        z-index: 10;
+        border-radius: 18px;
+        overflow: hidden;
+        background:
+          radial-gradient(ellipse at 22% 28%, rgba(139, 92, 246, 0.45), transparent 62%),
+          radial-gradient(ellipse at 78% 72%, rgba(124, 58, 237, 0.45), transparent 62%),
+          linear-gradient(135deg, rgba(20, 20, 30, 0.92) 0%, rgba(10, 10, 15, 0.95) 100%);
+        border: 1px solid var(--glass-border);
+        box-shadow:
+          0 50px 100px rgba(0, 0, 0, 0.5),
+          0 0 60px var(--brand-purple-glow),
+          inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /* Initial scale: 0 / opacity: 0 set by GSAP — no CSS transform here to avoid
+           GSAP overwriting `translateX(-50%)` style centering. We use left/top + margin
+           for static centering instead. */
+        transform-style: preserve-3d;
+        will-change: transform, opacity;
+      }
+      .demo-play {
+        width: 118px;
+        height: 118px;
+        border-radius: 50%;
+        background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ede9fe 60%, #c4b5fd 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow:
+          0 0 80px rgba(139, 92, 246, 0.7),
+          0 0 180px rgba(139, 92, 246, 0.4),
+          0 18px 40px rgba(0, 0, 0, 0.5),
+          inset 0 -4px 14px rgba(124, 58, 237, 0.3),
+          inset 0 3px 8px rgba(255, 255, 255, 0.95);
+        position: relative;
+      }
+      .demo-play::after {
+        /* outer ring — adds depth without breaking the seek-safe layout */
+        content: "";
+        position: absolute;
+        inset: -10px;
+        border-radius: 50%;
+        border: 1.5px solid rgba(139, 92, 246, 0.65);
+        box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
+        pointer-events: none;
+      }
+      .demo-play svg {
+        width: 44px;
+        height: 44px;
+        color: #0a0a0f;
+        transform: translateX(3px); /* optical center for play triangle */
+        filter: drop-shadow(0 1px 2px rgba(124, 58, 237, 0.5));
+      }
+      .demo-label {
+        position: absolute;
+        bottom: 28px;
+        left: 32px;
+        font-size: 22px;
+        font-weight: 700;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        background: linear-gradient(90deg, #ffffff 0%, #c4b5fd 50%, #8b5cf6 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.6));
+      }
+      /* ============================================================
+         VIGNETTE
+         ============================================================ */
+      .vignette {
+        /* scene-05 vignette: transparent 40% → rgba(0,0,0,0.4) at edges */
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
+        pointer-events: none;
+        z-index: 50;
+      }
+      /* ============================================================
+         TITLE — centered via xPercent in GSAP (not CSS translateX),
+         so the GSAP `y` tween doesn't overwrite the centering transform.
+         Single line at 96 px; the brand wordmark ("HyperFrames") uses
+         the HyperFrames teal gradient + heavy weight, the tagline
+         ("renders any scene") stays in soft white-teal for contrast.
+         No filter — crisp edges, no blurred halo.
+         ============================================================ */
+      .title {
+        position: absolute;
+        top: 64px;
+        left: 50%;
+        white-space: nowrap;
+        text-align: center;
+        font-size: 96px;
+        font-weight: 700;
+        letter-spacing: -0.022em;
+        line-height: 1;
+        color: #ffffff;
+        text-shadow:
+          0 0 24px rgba(255, 255, 255, 0.3),
+          0 0 60px rgba(139, 92, 246, 0.45); /* scene-05 brand.purpleGlow */
+        z-index: 20;
+        will-change: transform, opacity;
+      }
+      .title-brand {
+        font-weight: 800;
+        /* Violet ramp matching scene-05's COLORS.brand.purple family */
+        background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 35%, #a78bfa 65%, #8b5cf6 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        filter: drop-shadow(0 0 28px rgba(139, 92, 246, 0.7))
+          drop-shadow(0 0 60px rgba(124, 58, 237, 0.5));
+      }
+      /* ============================================================
+         ENHANCEMENTS — stroke-draw entry, stagger reveal,
+         ambient background breathing.
+         The .draw-N classes preset stroke-dasharray + stroke-dashoffset
+         to N so the path starts fully hidden; GSAP animates offset → 0
+         to reveal it in time with the icon's 3D-flip entry.
+         ============================================================ */
+      .draw-50 {
+        stroke-dasharray: 50;
+        stroke-dashoffset: 50;
+      }
+      .draw-100 {
+        stroke-dasharray: 100;
+        stroke-dashoffset: 100;
+      }
+      .draw-150 {
+        stroke-dasharray: 150;
+        stroke-dashoffset: 150;
+      }
+      .draw-200 {
+        stroke-dasharray: 200;
+        stroke-dashoffset: 200;
+      }
+      .reveal-late {
+        opacity: 0;
+      }
+      /* Ambient violet breathing — sits over the dark overlay, under
+         the orbit ring; opacity driven by the scene-ticker onUpdate. */
+      .bg-pulse {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.35), transparent 62%);
+        opacity: 0;
+        pointer-events: none;
+        z-index: 1;
+        will-change: opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="6.5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="orbit-scene"
+        class="stage clip"
+        data-start="0"
+        data-duration="6.5"
+        data-track-index="1"
+      >
+        <div class="bg"></div>
+        <!-- ============================================================
+             ORBIT ICONS — 6 genre icons distributed evenly around 2π
+             ============================================================ -->
+        <div class="orbit-stage">
+          <!-- 1. HTML — angle brackets + diagonal slash -->
+          <div class="icon-pos icon-html">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <g class="html-brackets-g">
+                      <path
+                        class="draw-50"
+                        d="M8 7 L3 12 L8 17"
+                        stroke="url(#g-html)"
+                        stroke-width="2.2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        class="draw-50"
+                        d="M16 7 L21 12 L16 17"
+                        stroke="url(#g-html)"
+                        stroke-width="2.2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </g>
+                    <line
+                      class="reveal-late html-slash"
+                      x1="14"
+                      y1="5"
+                      x2="10"
+                      y2="19"
+                      stroke="url(#g-html)"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                    />
+                    <defs>
+                      <linearGradient id="g-html" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#a78bfa" />
+                        <stop offset="100%" stop-color="#8b5cf6" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">HTML</span>
+              </div>
+            </div>
+          </div>
+          <!-- 2. CSS — frame with three color swatches -->
+          <div class="icon-pos icon-css">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <rect
+                      class="draw-100"
+                      x="3"
+                      y="3"
+                      width="18"
+                      height="18"
+                      rx="3"
+                      stroke="url(#g-css)"
+                      stroke-width="2"
+                      fill="rgba(139, 92, 246, 0.18)"
+                    />
+                    <circle class="reveal-late css-dot-a" cx="8" cy="9" r="1.9" fill="#c4b5fd" />
+                    <circle class="reveal-late css-dot-b" cx="16" cy="9" r="1.9" fill="#a78bfa" />
+                    <circle class="reveal-late css-dot-c" cx="12" cy="16" r="1.9" fill="#7c3aed" />
+                    <defs>
+                      <linearGradient id="g-css" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#c4b5fd" />
+                        <stop offset="100%" stop-color="#8b5cf6" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">CSS</span>
+              </div>
+            </div>
+          </div>
+          <!-- 3. SVG — bezier curve with anchor points -->
+          <div class="icon-pos icon-vector">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <g class="svg-curve-g">
+                      <path
+                        class="draw-100"
+                        d="M4 19 C 8 5, 16 19, 20 5"
+                        stroke="url(#g-vec)"
+                        stroke-width="2.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        fill="none"
+                      />
+                      <circle
+                        class="reveal-late svg-anchor-a"
+                        cx="4"
+                        cy="19"
+                        r="2.2"
+                        stroke="url(#g-vec)"
+                        stroke-width="1.5"
+                        fill="rgba(139, 92, 246, 0.30)"
+                      />
+                      <circle
+                        class="reveal-late svg-anchor-b"
+                        cx="20"
+                        cy="5"
+                        r="2.2"
+                        stroke="url(#g-vec)"
+                        stroke-width="1.5"
+                        fill="rgba(139, 92, 246, 0.30)"
+                      />
+                    </g>
+                    <defs>
+                      <linearGradient id="g-vec" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#c4b5fd" />
+                        <stop offset="100%" stop-color="#7c3aed" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">SVG</span>
+              </div>
+            </div>
+          </div>
+          <!-- 4. GSAP — sine wave timeline with playhead marker -->
+          <div class="icon-pos icon-gsap">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <line
+                      x1="3"
+                      y1="20"
+                      x2="21"
+                      y2="20"
+                      stroke="url(#g-gsap)"
+                      stroke-width="1.2"
+                      stroke-linecap="round"
+                      opacity="0.4"
+                    />
+                    <path
+                      class="draw-100 gsap-wave-g"
+                      d="M3 12 C 7 5, 9 5, 12 12 C 15 19, 17 19, 21 12"
+                      stroke="url(#g-gsap)"
+                      stroke-width="2.2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      fill="none"
+                    />
+                    <circle class="reveal-late gsap-marker" cx="3" cy="12" r="2.2" fill="#c4b5fd" />
+                    <defs>
+                      <linearGradient id="g-gsap" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#a78bfa" />
+                        <stop offset="100%" stop-color="#8b5cf6" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">GSAP</span>
+              </div>
+            </div>
+          </div>
+          <!-- 5. 3D — isometric cube with inner facet lines -->
+          <div class="icon-pos icon-three">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <g class="three-cube-g">
+                      <path
+                        class="draw-100"
+                        d="M12 3 L20 7 L20 17 L12 21 L4 17 L4 7 Z"
+                        stroke="url(#g-three)"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        fill="rgba(139, 92, 246, 0.24)"
+                      />
+                      <path
+                        class="reveal-late three-facet"
+                        d="M4 7 L12 11 L20 7 M12 11 L12 21"
+                        stroke="url(#g-three)"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </g>
+                    <defs>
+                      <linearGradient id="g-three" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#c4b5fd" />
+                        <stop offset="100%" stop-color="#7c3aed" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">3D</span>
+              </div>
+            </div>
+          </div>
+          <!-- 6. LOTTIE — two diamond keyframes on a timeline -->
+          <div class="icon-pos icon-lottie">
+            <div class="icon-collapse">
+              <div class="icon-entry">
+                <div class="icon-tile">
+                  <svg class="icon-svg" viewBox="0 0 24 24" fill="none">
+                    <line
+                      x1="3"
+                      y1="12"
+                      x2="21"
+                      y2="12"
+                      stroke="url(#g-lottie)"
+                      stroke-width="1.2"
+                      stroke-linecap="round"
+                      opacity="0.4"
+                    />
+                    <path
+                      class="draw-50 lottie-kf-a"
+                      d="M8 8 L12 12 L8 16 L4 12 Z"
+                      stroke="url(#g-lottie)"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      fill="rgba(139, 92, 246, 0.28)"
+                    />
+                    <path
+                      class="draw-50 lottie-kf-b"
+                      d="M16 8 L20 12 L16 16 L12 12 Z"
+                      stroke="url(#g-lottie)"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      fill="rgba(139, 92, 246, 0.28)"
+                    />
+                    <defs>
+                      <linearGradient id="g-lottie" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#a78bfa" />
+                        <stop offset="100%" stop-color="#8b5cf6" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+                <span class="icon-label">LOTTIE</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- ============================================================
+             CENTER CTA — Drop a video link · Get free clips
+             ============================================================ -->
+        <div class="cta">
+          <svg
+            class="cta-link-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+          </svg>
+          <span class="cta-placeholder">Drop an HTML scene</span>
+          <div class="cta-button">Render</div>
+        </div>
+        <!-- ============================================================
+             RIPPLE — centered on the CTA's white button
+             ============================================================ -->
+        <div class="ripple"></div>
+        <!-- ============================================================
+             CURSOR — starts off-screen-right with opacity: 0.
+             White fill + black stroke matches the scene-05 cursor SVG.
+             ============================================================ -->
+        <div class="cursor">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+            <path d="M5 3L19 12L12 13L9 20L5 3Z" fill="#fff" stroke="#000" stroke-width="1.5" />
+          </svg>
+        </div>
+        <!-- ============================================================
+             DEMO — appears from the collapse point in Phase 4
+             ============================================================ -->
+        <div class="demo">
+          <div class="demo-play">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path d="M8 5v14l11-7L8 5z" />
+            </svg>
+          </div>
+          <span class="demo-label">HyperFrames · MP4 ready</span>
+        </div>
+        <!-- ============================================================
+             TITLE
+             ============================================================ -->
+        <div class="title"><span class="title-brand">HyperFrames</span> renders any scene</div>
+        <div class="vignette"></div>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      /* ============================================================
+         CONSTANTS
+         ============================================================ */
+      const W = 1920,
+        H = 1080;
+      const CENTER_X = W / 2;
+      const CENTER_Y = H / 2;
+      const RADIUS_X = 480;
+      const RADIUS_Y = 280;
+      const ORBIT_SPEED = 0.25; // radians per second
+      // Six HyperFrames technologies arranged around the central CTA —
+      // each represents something you'd actually drop into a
+      // HyperFrames composition (markup, styling, vector graphics,
+      // animation engines, 3D, or animated assets).
+      //
+      // drawLen — the .draw-N class present on this icon's outline.
+      //   The stroke-draw tween pulls strokeDashoffset from N to 0.
+      //   When an icon has multiple .draw-N paths sharing the same N
+      //   (HTML's two brackets, LOTTIE's two diamonds), one selector
+      //   targets both and they draw in unison.
+      // hasReveal — whether this icon has .reveal-late inner accents
+      //   to fade in late via stagger. LOTTIE has none (both diamonds
+      //   are stroke-drawn, no extra accent).
+      const ICONS = [
+        {
+          sel: ".icon-html",
+          initialAngle: (0 * Math.PI) / 3,
+          entryDelay: 0.0,
+          drawLen: 50,
+          hasReveal: true,
+        },
+        {
+          sel: ".icon-css",
+          initialAngle: (1 * Math.PI) / 3,
+          entryDelay: 0.1,
+          drawLen: 100,
+          hasReveal: true,
+        },
+        {
+          sel: ".icon-vector",
+          initialAngle: (2 * Math.PI) / 3,
+          entryDelay: 0.2,
+          drawLen: 100,
+          hasReveal: true,
+        },
+        {
+          sel: ".icon-gsap",
+          initialAngle: (3 * Math.PI) / 3,
+          entryDelay: 0.3,
+          drawLen: 100,
+          hasReveal: true,
+        },
+        {
+          sel: ".icon-three",
+          initialAngle: (4 * Math.PI) / 3,
+          entryDelay: 0.4,
+          drawLen: 100,
+          hasReveal: true,
+        },
+        {
+          sel: ".icon-lottie",
+          initialAngle: (5 * Math.PI) / 3,
+          entryDelay: 0.5,
+          drawLen: 50,
+          hasReveal: false,
+        },
+      ];
+      const ENTRY_DUR = 0.55;
+      const TITLE_AT = 0.2;
+      const CURSOR_AT = 1.5;
+      const CURSOR_MOVE = 0.5;
+      const CLICK_AT = 2.2;
+      const COLLAPSE_DUR = 0.85;
+      const DEMO_AT = 2.95;
+      const DEMO_DUR = 0.8;
+      const IDLE_START = 3.95;
+      const TOTAL = 6.5;
+      const COLLAPSE_EASE = gsap.parseEase("back.out(1.6)");
+      const ORBIT_END = DEMO_AT;
+      const CURSOR_START_X = W + 100;
+      const CURSOR_START_Y = H * 0.85;
+      const CURSOR_TARGET_X = CENTER_X + 130; // over the white button
+      const CURSOR_TARGET_Y = CENTER_Y + 15;
+      /* ============================================================
+         INITIAL STATE — embedded as tl.set calls at t=0 so the lint
+         can reason about them as timeline operations rather than
+         as overlapping zero-duration tweens.
+         ============================================================ */
+      tl.set(".icon-entry", { rotateX: 90, rotateY: -45, z: -100, scale: 0, opacity: 0 }, 0);
+      tl.set(".cursor", { x: CURSOR_START_X, y: CURSOR_START_Y, opacity: 0 }, 0);
+      tl.set(".ripple", { scale: 0.3, opacity: 0 }, 0);
+      // CTA: GSAP-driven centering + 3D entry start state.
+      tl.set(".cta", { xPercent: -50, yPercent: -50, rotateY: -90, scale: 0.7, opacity: 0 }, 0);
+      tl.set(".demo", { scale: 0, rotateY: 90, opacity: 0 }, 0);
+      /* ============================================================
+         TITLE — slides down and fades in early.
+         xPercent: -50 replaces CSS `transform: translateX(-50%)` so GSAP's
+         tween of `y` doesn't overwrite the centering transform. fromTo is
+         linter-exempt from the CSS-transform-conflict rule and bakes in the
+         start state explicitly.
+         ============================================================ */
+      tl.fromTo(
+        ".title",
+        { xPercent: -50, y: -30, opacity: 0 },
+        { xPercent: -50, y: 0, opacity: 1, duration: 0.6, ease: "back.out(1.4)" },
+        TITLE_AT,
+      );
+      /* ============================================================
+         CTA — 3D flip entry. rotateY -90° → 0° spins the card in from
+         the right; opacity + scale ease it forward at the same time.
+         xPercent/yPercent set at t=0 keep it centered while GSAP owns
+         the transform.
+         ============================================================ */
+      tl.to(
+        ".cta",
+        { rotateY: 0, scale: 1, opacity: 1, duration: 0.75, ease: "back.out(1.4)" },
+        0.3,
+      );
+      // Subtle Y-axis tilt while the CTA is idle waiting for the click.
+      // Half-cycle 0.9s, repeats yoyo until just before CLICK_AT.
+      tl.to(".cta", { rotateY: 5, duration: 0.9, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.05);
+      /* ============================================================
+         PHASE 1: 3D flip entry per icon
+         ============================================================ */
+      ICONS.forEach(({ sel, entryDelay }) => {
+        tl.fromTo(
+          `${sel} .icon-entry`,
+          { rotateX: 90, rotateY: -45, z: -100, scale: 0, opacity: 0 },
+          {
+            rotateX: 0,
+            rotateY: 0,
+            z: 0,
+            scale: 1,
+            opacity: 1,
+            duration: ENTRY_DUR,
+            ease: "back.out(1.4)",
+          },
+          entryDelay,
+        );
+      });
+      /* ============================================================
+         PHASE 1b: SVG stroke-draw per icon
+         Each icon has one .draw-N class on its outline path. CSS
+         preset the dasharray/dashoffset to N (path hidden); this
+         tween pulls the offset to 0, drawing the path along its
+         length. power2.out front-loads the reveal so the stroke
+         is mostly visible by the time the 3D flip settles.
+         ============================================================ */
+      ICONS.forEach(({ sel, entryDelay, drawLen }) => {
+        tl.fromTo(
+          `${sel} .draw-${drawLen}`,
+          { strokeDashoffset: drawLen },
+          { strokeDashoffset: 0, duration: ENTRY_DUR + 0.1, ease: "power2.out" },
+          entryDelay,
+        );
+      });
+      /* ============================================================
+         PHASE 1c: Stagger reveal for inner accent elements
+         (music notes, gaming d-pad, vlog play triangle, podcast
+         base lines). Preset to opacity 0 via .reveal-late; this
+         tween fades siblings in with a 0.10s stagger so the icon
+         "completes itself" after its outline is drawn.
+         Skipped for education/sports — they have no inner accents.
+         ============================================================ */
+      ICONS.forEach(({ sel, entryDelay, hasReveal }) => {
+        if (!hasReveal) return;
+        tl.fromTo(
+          `${sel} .reveal-late`,
+          { opacity: 0 },
+          { opacity: 1, duration: 0.3, ease: "power2.out", stagger: 0.1 },
+          entryDelay + 0.3,
+        );
+      });
+      /* ============================================================
+         PHASE 1 + 3: Master orbit + collapse engine
+         Single onUpdate spans from t=0 to ORBIT_END. Reads tl.time()
+         and computes:
+           - orbit angle per icon (relative to its entryDelay)
+           - collapse driver (eased fraction of CLICK_AT → CLICK_AT+COLLAPSE_DUR)
+         Writes x/y to .icon-pos and scale/opacity to .icon-collapse.
+         ============================================================ */
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: ORBIT_END,
+          ease: "none",
+          onUpdate: () => {
+            const t = tl.time();
+            const collapseLinear = Math.max(0, Math.min(1, (t - CLICK_AT) / COLLAPSE_DUR));
+            const collapseEased = COLLAPSE_EASE(collapseLinear);
+            const radiusFactor = 1 - collapseEased;
+            const collapseScale = 1 - collapseEased * 0.5;
+            // Two-segment opacity envelope: 1 at 0, 0.5 at 0.8, 0 at 1
+            const o = collapseEased;
+            const collapseOpacity = o < 0.8 ? 1 - o * 0.625 : (0.5 * (1 - o)) / 0.2;
+            ICONS.forEach(({ sel, initialAngle, entryDelay }, i) => {
+              const localT = Math.max(0, t - entryDelay);
+              const angle = initialAngle + localT * ORBIT_SPEED;
+              const x = Math.cos(angle) * RADIUS_X * radiusFactor;
+              const y = Math.sin(angle) * RADIUS_Y * radiusFactor;
+              // Per-icon idle wobble — phased per index so the ring
+              // doesn't pulse in sync. Damped by radiusFactor so the
+              // wobble relaxes as icons collapse to the center.
+              const floatY = Math.sin(t * 1.4 + i * 1.1) * 6 * radiusFactor;
+              const floatRot = Math.sin(t * 1.1 + i * 1.7) * 2.5 * radiusFactor;
+              gsap.set(`${sel}.icon-pos`, { x, y: y + floatY });
+              gsap.set(`${sel} .icon-collapse`, {
+                scale: collapseScale,
+                opacity: collapseOpacity,
+                rotation: floatRot,
+              });
+            });
+          },
+        },
+        0,
+      );
+      /* ============================================================
+         PHASE 2: Cursor enters, slides to CTA, clicks
+         ============================================================ */
+      // Fade in
+      tl.to(".cursor", { opacity: 1, duration: 0.1, ease: "none" }, CURSOR_AT);
+      // Slide to CTA button
+      tl.to(
+        ".cursor",
+        { x: CURSOR_TARGET_X, y: CURSOR_TARGET_Y, duration: CURSOR_MOVE, ease: "back.out(1.3)" },
+        CURSOR_AT,
+      );
+      // Click depression — cursor + button compress, then recover
+      tl.to(".cursor", { scale: 0.85, duration: 0.08, ease: "power2.out" }, CLICK_AT);
+      tl.to(".cursor", { scale: 1, duration: 0.18, ease: "back.out(1.6)" }, CLICK_AT + 0.08);
+      tl.to(".cta-button", { scale: 0.95, duration: 0.08, ease: "power2.out" }, CLICK_AT);
+      tl.to(".cta-button", { scale: 1, duration: 0.18, ease: "back.out(1.6)" }, CLICK_AT + 0.08);
+      // Button glow pulse during click
+      tl.fromTo(
+        ".cta-button",
+        { boxShadow: "0 0 0 rgba(255,255,255,0)" },
+        { boxShadow: "0 0 40px rgba(255,255,255,0.7)", duration: 0.2, ease: "power2.out" },
+        CLICK_AT,
+      );
+      tl.to(
+        ".cta-button",
+        { boxShadow: "0 0 0 rgba(255,255,255,0)", duration: 0.4, ease: "power2.in" },
+        CLICK_AT + 0.2,
+      );
+      // Ripple — attack-decay envelope via keyframes
+      tl.to(
+        ".ripple",
+        {
+          duration: 0.7,
+          keyframes: {
+            "0%": { scale: 0.3, opacity: 0 },
+            "20%": { opacity: 0.7 },
+            "100%": { scale: 5.0, opacity: 0 },
+            easeEach: "power2.out",
+          },
+        },
+        CLICK_AT,
+      );
+      /* ============================================================
+         PHASE 4: Demo springs out of the collapse point
+         ============================================================ */
+      tl.fromTo(
+        ".demo",
+        { scale: 0, rotateY: 90, opacity: 0 },
+        { scale: 1, rotateY: 0, opacity: 1, duration: DEMO_DUR, ease: "back.out(1.6)" },
+        DEMO_AT,
+      );
+      // CTA fades out as the demo emerges — the click's "result" replaces the action target.
+      tl.to(".cta", { opacity: 0, duration: 0.3, ease: "power2.in" }, DEMO_AT - 0.05);
+      // Cursor exits with the CTA
+      tl.to(".cursor", { opacity: 0, duration: 0.3, ease: "power2.in" }, DEMO_AT);
+      /* ============================================================
+         PHASE 5: Demo floats with finite-yoyo breathing
+         ============================================================ */
+      const HALF_CYCLE = 1.1;
+      const remaining = TOTAL - IDLE_START;
+      const halfCycles = Math.max(0, Math.floor(remaining / HALF_CYCLE) - 1);
+      tl.fromTo(
+        ".demo",
+        { y: 0, rotation: 0, rotateY: 0, rotateX: 0 },
+        {
+          y: -8,
+          rotation: 1,
+          rotateY: 6,
+          rotateX: -2,
+          duration: HALF_CYCLE,
+          ease: "sine.inOut",
+          yoyo: true,
+          repeat: halfCycles,
+        },
+        IDLE_START,
+      );
+      /* ============================================================
+         CONTINUOUS INTERNAL SVG ENRICHMENT
+         Shared scene-ticker — one onUpdate writes all per-SVG motions.
+         Gated per-icon by its entryDelay so a hidden icon doesn't pay
+         the cost (still cheap, but cleaner intent).
+         ============================================================ */
+      const htmlBrackets = document.querySelector(".html-brackets-g");
+      const cssDotA = document.querySelector(".css-dot-a");
+      const cssDotB = document.querySelector(".css-dot-b");
+      const cssDotC = document.querySelector(".css-dot-c");
+      const svgCurve = document.querySelector(".svg-curve-g");
+      const gsapMarker = document.querySelector(".gsap-marker");
+      const gsapWave = document.querySelector(".gsap-wave-g");
+      const threeCube = document.querySelector(".three-cube-g");
+      const lottieKfA = document.querySelector(".lottie-kf-a");
+      const lottieKfB = document.querySelector(".lottie-kf-b");
+      tl.to(
+        { tick2: 0 },
+        {
+          tick2: 1,
+          duration: TOTAL,
+          ease: "none",
+          onUpdate: () => {
+            const t = tl.time();
+            // HTML brackets — tiny horizontal sway, like a typing cursor
+            const htmlT = t - 0.0;
+            if (htmlT > 0) {
+              gsap.set(htmlBrackets, { x: Math.sin(htmlT * 3.5) * 0.6 });
+            }
+            // CSS swatches — three dots scale-pulse with phase offsets
+            const cssT = t - 0.1;
+            if (cssT > 0) {
+              gsap.set(cssDotA, { scale: 0.85 + Math.sin(cssT * 5.5) * 0.18 });
+              gsap.set(cssDotB, { scale: 0.85 + Math.sin(cssT * 5.5 + 1.4) * 0.18 });
+              gsap.set(cssDotC, { scale: 0.85 + Math.sin(cssT * 5.5 + 2.8) * 0.18 });
+            }
+            // SVG bezier — whole curve group gently rotates back and forth
+            const vecT = t - 0.2;
+            if (vecT > 0) {
+              gsap.set(svgCurve, { rotation: Math.sin(vecT * 2.2) * 5 });
+            }
+            // GSAP timeline — playhead marker slides along the wave +
+            // the wave itself flexes vertically (amplitude pulse).
+            const gsapT = t - 0.3;
+            if (gsapT > 0) {
+              // marker traverses 0 → 18 viewBox units left-to-right
+              const markerX = (Math.sin(gsapT * 1.4 - Math.PI / 2) + 1) * 9;
+              gsap.set(gsapMarker, { x: markerX });
+              gsap.set(gsapWave, { scaleY: 1 + Math.sin(gsapT * 2.5) * 0.12 });
+            }
+            // 3D cube — slow continuous tumble (replaces sports-ball spin)
+            const threeT = t - 0.4;
+            if (threeT > 0) {
+              gsap.set(threeCube, { rotation: threeT * 30 });
+            }
+            // LOTTIE keyframes — two diamonds scale-pulse out of phase
+            const lottieT = t - 0.5;
+            if (lottieT > 0) {
+              gsap.set(lottieKfA, { scale: 1 + Math.sin(lottieT * 2.8) * 0.12 });
+              gsap.set(lottieKfB, { scale: 1 + Math.sin(lottieT * 2.8 + 1.6) * 0.12 });
+            }
+            // ====== ENHANCEMENT: per-icon tile glow pulse ======
+            // The tile's violet halo breathes throughout the orbit;
+            // each icon is phased by its index so the ring shimmers
+            // rather than pulses in unison. Only while the icons are
+            // still on screen (before they finish collapsing).
+            // Colors mirror scene-05: COLORS.brand.purple (#8b5cf6) +
+            // a softer rgba violet halo.
+            if (t < DEMO_AT) {
+              ICONS.forEach(({ sel }, i) => {
+                const glow = 32 + Math.sin(t * 1.3 + i * 0.95) * 16;
+                gsap.set(`${sel} .icon-tile`, {
+                  boxShadow:
+                    "0 15px 40px rgba(0, 0, 0, 0.35), " +
+                    "0 0 " +
+                    glow +
+                    "px rgba(139, 92, 246, 0.65), " +
+                    "0 0 " +
+                    glow * 2 +
+                    "px rgba(124, 58, 237, 0.28), " +
+                    "inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+                });
+              });
+            }
+            // ====== ENHANCEMENT: CTA idle breathing (pre-click) ======
+            // Soft violet aura pulses around the CTA card to invite
+            // the click. Frozen at click time; the CTA fades out at
+            // DEMO_AT - 0.05 so the static end-state never shows.
+            if (t < CLICK_AT) {
+              const ctaGlow = 70 + Math.sin(t * 2.6) * 30;
+              gsap.set(".cta", {
+                boxShadow:
+                  "0 40px 80px rgba(0, 0, 0, 0.5), " +
+                  "0 0 " +
+                  ctaGlow +
+                  "px rgba(139, 92, 246, 0.7), " +
+                  "0 0 " +
+                  ctaGlow * 2 +
+                  "px rgba(124, 58, 237, 0.32), " +
+                  "inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+              });
+            }
+            // ====== ENHANCEMENT: demo glow pulse (post-emerge) ======
+            // Once the demo card has sprung out, its violet aura
+            // breathes in time with its yoyo float, giving the
+            // "result" element a living idle state.
+            if (t > DEMO_AT) {
+              const demoT = t - DEMO_AT;
+              const demoGlow = 90 + Math.sin(demoT * 1.9) * 36;
+              gsap.set(".demo", {
+                boxShadow:
+                  "0 50px 100px rgba(0, 0, 0, 0.5), " +
+                  "0 0 " +
+                  demoGlow +
+                  "px rgba(139, 92, 246, 0.7), " +
+                  "0 0 " +
+                  demoGlow +
+                  "px rgba(124, 58, 237, 0.42), " +
+                  "inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+              });
+            }
+          },
+        },
+        0,
+      );
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>