Scene

1<template id="hard-cut-template">
2  <div data-composition-id="hard-cut" data-width="1920" data-height="1080" data-duration="2">
3    <style>
4      :root {
5        --hg-violet: #7c3aed;
6        --hg-violet-2: #a855f7;
7        --hg-bg: #0a0a0f;
8        --hg-fg: #f5f5fa;
9        --hg-dim: #6b6b78;
10      }
11      * {
12        margin: 0;
13        padding: 0;
14        box-sizing: border-box;
15      }
16      .stage {
17        position: absolute;
18        inset: 0;
19      }
20      .panel {
21        position: absolute;
22        inset: 0;
23        display: flex;
24        align-items: center;
25        justify-content: center;
26        opacity: 0;
27        will-change: opacity;
28      }
29      .word {
30        font-weight: 900;
31        font-size: 340px;
32        letter-spacing: -0.05em;
33        line-height: 0.9;
34        text-transform: uppercase;
35        white-space: nowrap;
36      }
37    </style>
38    <div class="stage" id="stage"></div>
39    <script>
40      window.__timelines = window.__timelines || {};
41      const tl = gsap.timeline({ paused: true });
42
43      // Deterministic palette + word list. Variation is derived from index only.
44      const BG = ["#7c3aed", "#0a0a0f", "#ff2a4a", "#2afff0", "#a855f7", "#f5f5fa", "#0a0a0f"];
45      const FG = ["#f5f5fa", "#a855f7", "#0a0a0f", "#0a0a0f", "#0a0a0f", "#7c3aed", "#f5f5fa"];
46      const WORDS = ["CUT", "NOW", "HARD", "SNAP", "STOP", "GO", "CUT"];
47      const STEP = 0.28; // beat interval
48      const N = WORDS.length;
49
50      // Build one full-frame panel per cut, all hidden but the first.
51      const stage = document.getElementById("stage");
52      for (let i = 0; i < N; i++) {
53        const panel = document.createElement("div");
54        panel.className = "panel";
55        panel.id = "p" + i;
56        panel.style.background = BG[i];
57        panel.style.opacity = i === 0 ? "1" : "0";
58        const word = document.createElement("div");
59        word.className = "word";
60        word.style.color = FG[i];
61        word.textContent = WORDS[i];
62        panel.appendChild(word);
63        stage.appendChild(panel);
64      }
65
66      // Sample-accurate 0ms cuts: at each beat, hide current panel, show next.
67      // tl.set has no duration and no ease — brutal instant switching.
68      for (let i = 1; i < N; i++) {
69        const t = i * STEP;
70        tl.set("#p" + (i - 1), { opacity: 0 }, t);
71        tl.set("#p" + i, { opacity: 1 }, t);
72      }
73
74      // Loop gracefully: snap back to the first panel before the clip ends so a
75      // re-entry starts clean on the same color/word it began with.
76      tl.set("#p" + (N - 1), { opacity: 0 }, N * STEP);
77      tl.set("#p0", { opacity: 1 }, N * STEP);
78
79      window.__timelines["hard-cut"] = tl;
80    </script>
81  </div>
82</template>