Scene

1<template id="word-grid-burst-template">
2  <div
3    data-composition-id="word-grid-burst"
4    data-width="1920"
5    data-height="1080"
6    data-duration="2.8"
7  >
8    <style>
9      :root {
10        --hg-violet: #7c3aed;
11        --hg-violet-2: #a855f7;
12        --hg-bg: #0a0a0f;
13        --hg-fg: #f5f5fa;
14        --hg-dim: #6b6b78;
15      }
16      * {
17        margin: 0;
18        padding: 0;
19        box-sizing: border-box;
20      }
21      .stage {
22        position: absolute;
23        inset: 0;
24        display: grid;
25        grid-template-columns: repeat(5, 1fr);
26        grid-template-rows: repeat(3, 1fr);
27        align-items: center;
28        justify-items: center;
29        padding: 140px 120px;
30        gap: 24px;
31      }
32      .cell {
33        font-weight: 900;
34        font-size: 92px;
35        letter-spacing: -0.03em;
36        line-height: 0.95;
37        color: var(--hg-fg);
38        white-space: nowrap;
39        will-change: transform, opacity;
40      }
41    </style>
42    <div class="stage">
43      <div class="cell">PULSE</div>
44      <div class="cell">FORGE</div>
45      <div class="cell">SURGE</div>
46      <div class="cell">VOLT</div>
47      <div class="cell">CORE</div>
48      <div class="cell">FLUX</div>
49      <div class="cell">SPARK</div>
50      <div class="cell">DRIVE</div>
51      <div class="cell">BLAZE</div>
52      <div class="cell">WAVE</div>
53      <div class="cell">SHIFT</div>
54      <div class="cell">BOLT</div>
55      <div class="cell">RUSH</div>
56      <div class="cell">PEAK</div>
57      <div class="cell">IGNITE</div>
58    </div>
59    <script>
60      window.__timelines = window.__timelines || {};
61      const tl = gsap.timeline({ paused: true });
62
63      // Deterministic reveal order: scatter sequence across the 15-cell grid.
64      const order = [7, 0, 12, 4, 9, 2, 14, 6, 11, 1, 8, 3, 13, 5, 10];
65      const cells = gsap.utils.toArray(".cell");
66      const step = 0.13;
67      const FOCUS = 7; // chosen focal cell ("DRIVE")
68
69      // Each cell pops in on its own "onset" — explicit per-cell timing.
70      order.forEach((idx, i) => {
71        tl.fromTo(
72          cells[idx],
73          { autoAlpha: 0, scale: 0.8 },
74          { autoAlpha: 1, scale: 1, duration: 0.22, ease: "back.out(1.8)" },
75          i * step,
76        );
77      });
78
79      // Downbeat refocus (~2.3s): dim the whole grid, pop the focal word.
80      tl.to(".cell", { autoAlpha: 0.25, duration: 0.18, ease: "power2.out" }, 2.3);
81      tl.to(
82        cells[FOCUS],
83        {
84          autoAlpha: 1,
85          scale: 1.25,
86          color: "var(--hg-violet-2)",
87          duration: 0.22,
88          ease: "back.out(2)",
89        },
90        2.32,
91      );
92
93      window.__timelines["word-grid-burst"] = tl;
94    </script>
95  </div>
96</template>