frames/skills/frames-animation/examples/messaging-multi-phrase.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1920, height=1080" />
    <title>Scene — Frames Messaging Multi-Phrase</title>

    <!--
      Blueprint: messaging-multi-phrase (Frames preview)
      Frames-native version of the scene-9-multi-phrase concept.

      Choreography (3 phrases, ~7.5 seconds total, content-driven duration):

        Phrase 1 [0.00 – 3.86 s]
          "With an AI assistant " (21 chars × 0.083 s = 1.75 s)
        + "you can trust"          (13 chars × 0.083 s = 1.08 s, accent pink)
        + hold 1.00 s
        → total 1.75 + 1.08 + 1.00 ≈ 3.83 s (computed by JS)

        Phrase 2 [3.86 – 5.27 s]
          "Instant " (8 chars × 0.083 s = 0.67 s)
        + "insights" (8 chars × 0.083 s = 0.67 s, accent pink)
        + hold 1.00 s
        → total 0.67 + 0.67 + 1.00 ≈ 2.33 s, but starts at 3.86 → endTime ≈ 6.18 s

        Phrase 3 [6.18 – 9.45 s]
          "Endless "      (8 chars × 0.083 = 0.67 s)
        + "possibilities" (13 chars × 0.083 = 1.08 s, accent pink)
        + hold 2.00 s     (longer — closing beat)
        → total 0.67 + 1.08 + 2.00 ≈ 3.75 s, but starts at 6.18 → endTime ≈ 9.93 s

        Continuous: cursor blink (square wave via `tl.time() % 1.0`)
          color, cursor blink. No per-phrase tweens.
        - No conditional DOM — phrase container exists from t=0 with empty text;
          onUpdate overwrites textContent in-place at each frame.
        - TIMELINE is a plain const computed once at script load (no useMemo).
        - Frames become seconds: charSpeed 2.5 frames → 0.083 s; hold 30 frames → 1.0 s.
        - Cursor blink: `(t % BLINK_CYCLE) < BLINK_CYCLE / 2 ? 1 : 0` inside the same
          onUpdate, not a separate component with `useCurrentFrame`.
        - textContent !== visible guard skips redundant DOM writes during hold windows.
    -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

    <style>
      :root {
        --text-primary: #ffffff;
        --text-accent: #32fff6;
        --text-accent-2: #a3ff7a;
        --bg: linear-gradient(
          135deg,
          #3a3a3a 0%,
          #17211f 30%,
          #0b2328 48%,
          #1f3518 70%,
          #343434 100%
        );
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        background: var(--bg);
        font-family:
          "Inter",
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        color: var(--text-primary);
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
      }

      .stage {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* ============================================================
         PHRASE STAGE — one shared line with three inline children:
           .phrase-main   primary-color portion
           .phrase-accent accent-color portion
           .phrase-cursor block cursor (color overridden per-frame)
         `white-space: pre` keeps the trailing space in textMain so the
         accent doesn't merge with the lead-in.
         ============================================================ */
      .phrase-stage {
        position: absolute;
        inset: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 150px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0;
        white-space: pre;
        text-align: center;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.16);
      }
      .phrase-main {
        color: var(--text-primary);
      }
      .phrase-accent {
        color: var(--text-accent);
        text-shadow: 0 0 12px rgba(50, 255, 246, 0.28);
      }
      .phrase-cursor {
        display: inline-block;
        flex: 0 0 auto;
        width: 8px;
        height: 162px; /* ≈ 1.08 × fontSize */
        background: var(--text-primary);
        margin-left: 12px;
        vertical-align: middle;
        transform: translateY(10px); /* baseline alignment */
        will-change: opacity, background-color;
        box-shadow: 0 0 12px rgba(50, 255, 246, 0.36);
      }

      /* ============================================================
         BACKGROUND TINT — subtle radial glow so pure black doesn't
         feel sterile. Drops to ~rgb(8,8,12) at corners.
         ============================================================ */
      .bg-tint {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(ellipse at 42% 48%, rgba(24, 217, 232, 0.32), transparent 42%),
          radial-gradient(ellipse at 58% 52%, rgba(123, 234, 90, 0.26), transparent 44%),
          radial-gradient(ellipse at 50% 50%, rgba(8, 16, 18, 0.42), transparent 70%);
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <div
      id="root"
      data-composition-id="main"
      data-start="0"
      data-duration="7.5"
      data-width="1920"
      data-height="1080"
    >
      <div
        id="multi-phrase-scene"
        class="stage clip"
        data-start="0"
        data-duration="7.5"
        data-track-index="1"
      >
        <div class="bg-tint"></div>
        <div class="phrase-stage">
          <span class="phrase-main"></span><span class="phrase-accent"></span
          ><span class="phrase-cursor"></span>
        </div>
      </div>
    </div>

    <script>
      window.__timelines = window.__timelines || {};
      const tl = gsap.timeline({ paused: true });

      /* ============================================================
         SCRIPT — content + per-phrase timing config.
         Change SCRIPT and the timeline reshapes itself.
         ============================================================ */
      const SCRIPT = [
        {
          textMain: "Build video with ",
          textAccent: "HTML",
          charSpeed: 0.083, // seconds per character (= 2.5 frames @ 30 fps)
          hold: 1.0,
        },
        {
          textMain: "Seek ",
          textAccent: "any frame",
          charSpeed: 0.083,
          hold: 1.0,
        },
        {
          textMain: "Render to ",
          textAccent: "MP4",
          charSpeed: 0.083,
          hold: 2.0, // longer closing beat
        },
      ];

      /* ============================================================
         TIMELINE — flat reduce, computed once.
         Each entry gains absolute startTime + endTime in seconds.
         ============================================================ */
      let acc = 0;
      const TIMELINE = SCRIPT.map((item) => {
        const totalChars = item.textMain.length + item.textAccent.length;
        const typingDuration = totalChars * item.charSpeed;
        const totalDuration = typingDuration + item.hold;
        const start = acc;
        const end = start + totalDuration;
        acc = end;
        return Object.assign({}, item, {
          startTime: start,
          endTime: end,
          typingDuration,
        });
      });
      const TOTAL = TIMELINE[TIMELINE.length - 1].endTime;
      // TOTAL ≈ 9.93s with the SCRIPT above. The composition root caps at 7.5s
      // (data-duration), which is the actual render window — phrases 1+2 fit
      // comfortably; phrase 3 holds long enough that any time after ~6.18s is
      // already on the closing line. Adjust SCRIPT durations to fit your budget.

      /* ============================================================
         COLORS & BLINK
         ============================================================ */
      const MAIN_COLOR = "#FFFFFF";
      const ACCENT_COLOR = "#32FFF6";
      const BLINK_CYCLE = 1.0; // seconds — 0.5s on, 0.5s off (matches 30-frame square wave)

      const mainEl = document.querySelector(".phrase-main");
      const accentEl = document.querySelector(".phrase-accent");
      const cursorEl = document.querySelector(".phrase-cursor");

      /* ============================================================
         MASTER ENGINE — single onUpdate writes text + cursor every frame.
         ============================================================ */
      // Cache the most-recently-active phrase index for seek-safe scans.
      let lastIdx = 0;

      function findPhrase(t) {
        // Hot path: same phrase still active
        if (t >= TIMELINE[lastIdx].startTime && t < TIMELINE[lastIdx].endTime) {
          return TIMELINE[lastIdx];
        }
        // Cold path: linear scan (handles forward + backward seeks)
        for (let i = 0; i < TIMELINE.length; i++) {
          if (t >= TIMELINE[i].startTime && t < TIMELINE[i].endTime) {
            lastIdx = i;
            return TIMELINE[i];
          }
        }
        return null;
      }

      function renderAt(t) {
        // ----- Cursor blink (square wave, runs always) -----
        cursorEl.style.opacity = t % BLINK_CYCLE < BLINK_CYCLE / 2 ? "1" : "0";

        // ----- Find current phrase -----
        const phrase = findPhrase(t);
        if (!phrase) {
          if (mainEl.textContent !== "") mainEl.textContent = "";
          if (accentEl.textContent !== "") accentEl.textContent = "";
          cursorEl.style.background = MAIN_COLOR;
          return;
        }

        // ----- Compute visible characters -----
        const activeT = t - phrase.startTime;
        const charIdx = Math.floor(activeT / phrase.charSpeed);
        const mainLen = phrase.textMain.length;

        const visMain = phrase.textMain.slice(0, Math.min(charIdx, mainLen));
        const accentLen = Math.max(0, charIdx - mainLen);
        const visAccent = phrase.textAccent.slice(0, accentLen);

        // ----- DOM writes (guarded) -----
        if (mainEl.textContent !== visMain) mainEl.textContent = visMain;
        if (accentEl.textContent !== visAccent) accentEl.textContent = visAccent;

        // ----- Cursor color follows active segment -----
        const inAccent = visMain.length === mainLen && visAccent.length > 0;
        cursorEl.style.background = inAccent ? ACCENT_COLOR : MAIN_COLOR;
      }

      tl.to(
        { tick: 0 },
        {
          tick: 1,
          duration: 7.5, // matches data-duration; clips the timeline
          ease: "none",
          onUpdate: () => renderAt(tl.time()),
        },
        0,
      );

      const pauseTimeline = tl.pause.bind(tl);
      tl.pause = (time, suppressEvents) => {
        const result = pauseTimeline(time, suppressEvents);
        if (typeof time === "number") renderAt(time);
        return result;
      };

      function wrapSeekOwner(owner) {
        if (!owner || owner.__multiPhraseSeekWrapped) return;
        let currentSeek = owner.seek;
        Object.defineProperty(owner, "seek", {
          configurable: true,
          get: () => currentSeek,
          set: (value) => {
            if (typeof value !== "function") {
              currentSeek = value;
              return;
            }
            currentSeek = function (time) {
              const result = value.apply(this, arguments);
              if (typeof time === "number") renderAt(time);
              return result;
            };
          },
        });
        owner.seek = currentSeek;
        owner.__multiPhraseSeekWrapped = true;
      }

      function installWindowSeekHook(key) {
        if (window[key]) {
          wrapSeekOwner(window[key]);
          return;
        }
        let pendingOwner;
        Object.defineProperty(window, key, {
          configurable: true,
          get: () => pendingOwner,
          set: (value) => {
            pendingOwner = value;
            wrapSeekOwner(value);
          },
        });
      }
      installWindowSeekHook("__player");
      installWindowSeekHook("__hf");

      renderAt(0);

      window.__timelines["main"] = tl;
    </script>
  </body>
</html>