freecodego 0.1.7-alpha.2.2 → 0.1.7-rc.2.3

package/dist/assets/design/skills/hyperframes-animation/examples/takeover-ticker-displace.html

@@ -0,0 +1,347 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scene 5 — HyperFrames Displace Reveal</title>
+
+    <!--
+      HyperFrames composition.tsx.
+
+      Choreography (4 phases, 7.5 seconds total):
+        0.00 – 0.67s   Typewriter reveals "HyperFrames turns" (3 → 17 chars)
+        1.67 – 2.22s   Ticker scrolls: HTML → motion
+        3.33 – 3.88s   Ticker scrolls: motion → video
+        4.60 – 5.45s   Logo enters from offscreen-right with rotation + scale impact
+                       Text group pushed left + fades (40-50% of hero duration)
+        6.60 – 7.50s   Logo breathes (dual-frequency sine onUpdate, multiplicative on 1.3 scale)
+          tuned to 40-50% of hero duration so the impact reads as causal
+        - Breathing uses Form 2 (onUpdate) so it multiplies onto the 1.3 final scale,
+          not overwrites it (Form 1 yoyo would undo the impact)
+        - Two breathing periods (1.0s scale, 1.33s rotation) for organic feel
+        - Logo uses a local static image asset referenced with a plain URL
+    -->
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+    <style>
+      :root {
+        --bg: linear-gradient(
+          135deg,
+          #3a3a3a 0%,
+          #17211f 30%,
+          #0b2328 48%,
+          #1f3518 70%,
+          #343434 100%
+        );
+        --text: #f8fafc;
+        --accent: #18d9e8;
+        --accent-2: #7bea5a;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--text);
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      /* Text group — typewriter + ticker side by side, displaced as a unit */
+      .text-group {
+        position: absolute;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 20px;
+      }
+
+      .typewriter {
+        height: 168px; /* = ITEM_HEIGHT (FONT_SIZE × 1.2) */
+        display: flex;
+        align-items: center;
+        color: var(--text);
+        font-weight: 400;
+        font-size: 140px;
+        line-height: 1;
+        white-space: pre;
+        text-shadow: 0 0 36px rgba(24, 217, 232, 0.18);
+      }
+
+      /* Vertical ticker */
+      .ticker-window {
+        height: 168px;
+        overflow: hidden;
+        display: inline-flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .ticker-stack {
+        display: flex;
+        flex-direction: column;
+        will-change: transform;
+      }
+      .ticker-item {
+        height: 168px;
+        display: flex;
+        align-items: center;
+        color: var(--accent);
+        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-weight: 700;
+        font-size: 140px;
+        padding-left: 20px;
+        line-height: 1;
+        white-space: pre;
+      }
+
+      /* Hero logo — enters from offscreen right */
+      .hero {
+        position: absolute;
+        width: 440px;
+        height: 440px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 20; /* above text during overlap */
+        opacity: 0; /* fromTo will animate */
+      }
+      .hero .logo-mark {
+        width: 100%;
+        height: 100%;
+        display: block;
+        border-radius: 52px;
+        box-shadow:
+          0 0 70px rgba(24, 217, 232, 0.28),
+          0 0 120px rgba(123, 234, 90, 0.18);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="7.5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="stage clip"
+        data-start="0"
+        data-duration="7.5"
+        data-track-index="1"
+        id="displace-stage"
+      >
+        <!-- Text group: typewriter + ticker -->
+        <div class="text-group" id="text-group">
+          <div class="typewriter">
+            <span class="typewriter-text">Hyp</span>
+          </div>
+          <div class="ticker-window">
+            <div class="ticker-stack">
+              <div class="ticker-item">HTML</div>
+              <div class="ticker-item">motion</div>
+              <div class="ticker-item">video</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Hero logo asset -->
+        <div class="hero" id="hero-logo">
+          <!-- Inline-SVG placeholder mark — swap for your logo image -->
+          <svg class="logo-mark" viewBox="0 0 100 100" role="img" aria-label="HyperFrames">
+            <defs>
+              <linearGradient id="hfMark" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0" stop-color="#8b7bff" />
+                <stop offset="1" stop-color="#3ddc97" />
+              </linearGradient>
+            </defs>
+            <rect x="4" y="4" width="92" height="92" rx="22" fill="url(#hfMark)" />
+            <text
+              x="50"
+              y="63"
+              text-anchor="middle"
+              font-family="Inter, system-ui, sans-serif"
+              font-size="40"
+              font-weight="800"
+              fill="#fff"
+            >
+              HF
+            </text>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      /* ================================================================
+         CONSTANTS
+         ================================================================ */
+      const TOTAL_DURATION = 7.5;
+      const FONT_SIZE = 140;
+      const ITEM_HEIGHT = FONT_SIZE * 1.2; // = 168 px
+
+      const TIMING = {
+        // Phase 1: typewriter
+        typeStart: 0.0,
+        typeDur: 0.67,
+        typeStartLen: 3, // pre-render the first 3 chars
+
+        // Phase 2: ticker steps
+        ticker1At: 1.67, // HTML → motion
+        ticker2At: 3.33, // motion → video
+        stepDur: 0.55,
+
+        // Phase 3: reactive displacement
+        displaceAt: 4.6,
+        heroDur: 0.85, // matches spring(mass:1.5) settle
+        offscreenX: 800, // hero starts here
+        pushDist: -150, // text pushed THIS direction
+
+        // Phase 4: breathing
+        idleStart: 6.6, // displaceAt + heroDur + ~1.15s buffer
+      };
+
+      const FULL_TEXT = "HyperFrames turns";
+
+      /* ================================================================
+         TIMELINE
+         ================================================================ */
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+
+      /* ----------------------------------------------------------------
+         PHASE 1: Typewriter (smooth slice)
+         ---------------------------------------------------------------- */
+      const typewriterEl = document.querySelector(".typewriter-text");
+      const typeProxy = { progress: TIMING.typeStartLen };
+
+      tl.to(
+        typeProxy,
+        {
+          progress: FULL_TEXT.length,
+          duration: TIMING.typeDur,
+          ease: "none",
+          onUpdate: () => {
+            const len = Math.floor(typeProxy.progress);
+            const next = FULL_TEXT.slice(0, len);
+            if (typewriterEl.textContent !== next) typewriterEl.textContent = next;
+          },
+        },
+        TIMING.typeStart,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 2: Vertical ticker (2 steps: HTML → motion → video)
+         ---------------------------------------------------------------- */
+      tl.to(
+        ".ticker-stack",
+        {
+          y: `-=${ITEM_HEIGHT}`,
+          duration: TIMING.stepDur,
+          ease: "back.out(1.4)", // spring(stiffness:120, damping:14)
+        },
+        TIMING.ticker1At,
+      );
+
+      tl.to(
+        ".ticker-stack",
+        {
+          y: `-=${ITEM_HEIGHT}`,
+          duration: TIMING.stepDur,
+          ease: "back.out(1.4)",
+        },
+        TIMING.ticker2At,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 3: Reactive displacement — three concurrent tweens.
+         ---------------------------------------------------------------- */
+      // (1) Hero enters with rotation + scale impact, lands at scale 1.3.
+      tl.fromTo(
+        ".hero",
+        { x: TIMING.offscreenX, scale: 0.5, rotation: -45, opacity: 0 },
+        {
+          x: 0,
+          scale: 1.3,
+          rotation: 0,
+          opacity: 1,
+          duration: TIMING.heroDur,
+          ease: "power2.out", // spring(stiffness:100, damping:20, mass:1.5)
+        },
+        TIMING.displaceAt,
+      );
+
+      // (2) Text pushed left. Completes at 50% of hero duration → immediate impact.
+      tl.to(
+        ".text-group",
+        { x: TIMING.pushDist, duration: TIMING.heroDur * 0.5, ease: "power2.out" },
+        TIMING.displaceAt,
+      );
+
+      // (3) Text fades. Completes at 40% → fades slightly before push lands.
+      tl.to(
+        ".text-group",
+        { opacity: 0, duration: TIMING.heroDur * 0.4, ease: "power2.out" },
+        TIMING.displaceAt,
+      );
+
+      /* ----------------------------------------------------------------
+         PHASE 4: Breathing — onUpdate so it MULTIPLIES onto the 1.3 scale.
+         Dual frequencies (1.0s scale, 1.33s rotation) for organic motion.
+         ---------------------------------------------------------------- */
+      const heroEl = document.querySelector(".hero");
+      const HERO_FINAL_SCALE = 1.3;
+      const HERO_FINAL_ROTATION = 0;
+      const SCALE_PERIOD = 1.0; // seconds per scale cycle
+      const ROTATE_PERIOD = 1.333; // seconds per rotation cycle — not a simple ratio of SCALE_PERIOD
+      const SCALE_AMP = 0.05;
+      const ROTATE_AMP = 3;
+
+      const breathDur = TOTAL_DURATION - TIMING.idleStart;
+
+      tl.to(
+        { tick: 0 },
+        {
+          tick: 1,
+          duration: breathDur,
+          ease: "none",
+          onUpdate: function () {
+            const idleTime = Math.max(0, tl.time() - TIMING.idleStart);
+            const omegaS = (idleTime / SCALE_PERIOD) * Math.PI * 2;
+            const omegaR = (idleTime / ROTATE_PERIOD) * Math.PI * 2;
+            gsap.set(heroEl, {
+              scale: HERO_FINAL_SCALE * (1 + Math.sin(omegaS) * SCALE_AMP),
+              rotation: HERO_FINAL_ROTATION + Math.sin(omegaR) * ROTATE_AMP,
+            });
+          },
+        },
+        TIMING.idleStart,
+      );
+    </script>
+  </body>
+</html>