Scene

1<template id="typewriter-reveal-template">
2  <div
3    data-composition-id="typewriter-reveal"
4    data-width="1920"
5    data-height="1080"
6    data-duration="2.4"
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: flex;
25        align-items: center;
26        justify-content: center;
27      }
28      .line {
29        display: flex;
30        align-items: baseline;
31        font-family: "JetBrains Mono", ui-monospace, monospace;
32        font-weight: 800;
33        font-size: 200px;
34        letter-spacing: 0.02em;
35        line-height: 0.95;
36        white-space: nowrap;
37      }
38      .char {
39        display: inline-block;
40        opacity: 0;
41        will-change: opacity;
42      }
43      .char.space {
44        width: 0.4em;
45      }
46      .caret {
47        display: inline-block;
48        width: 0.09em;
49        height: 0.86em;
50        margin-left: 0.06em;
51        background: var(--hg-violet-2);
52        will-change: opacity;
53      }
54    </style>
55    <div class="stage">
56      <div class="line" id="line">
57        <span class="char">S</span><span class="char">Y</span><span class="char">S</span
58        ><span class="char">T</span><span class="char">E</span><span class="char">M</span
59        ><span class="char space">&nbsp;</span><span class="char">O</span><span class="char">N</span
60        ><span class="char">L</span><span class="char">I</span><span class="char">N</span
61        ><span class="char">E</span><span class="caret" id="caret"></span>
62      </div>
63    </div>
64    <script>
65      window.__timelines = window.__timelines || {};
66      const tl = gsap.timeline({ paused: true });
67
68      const chars = gsap.utils.toArray(".char");
69      const step = 0.07;
70
71      // Explicit per-character reveal: one set() per char at time i * step.
72      chars.forEach((char, i) => {
73        tl.set(char, { opacity: 1 }, i * step);
74      });
75
76      const lastT = (chars.length - 1) * step;
77
78      // Caret rides just past the last revealed char and blinks a finite number
79      // of times (no repeat:-1), then the phrase locks crisp.
80      tl.set("#caret", { opacity: 1 }, 0);
81      tl.to(
82        "#caret",
83        { opacity: 0, duration: 0.09, ease: "steps(1)", repeat: 8, yoyo: true },
84        lastT + step,
85      );
86      tl.set("#caret", { opacity: 0 }, 2.32);
87
88      window.__timelines["typewriter-reveal"] = tl;
89    </script>
90  </div>
91</template>