Scene

1<template id="directional-fill-template">
2  <div
3    data-composition-id="directional-fill"
4    data-width="1920"
5    data-height="1080"
6    data-duration="1.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: flex;
25        flex-direction: column;
26        align-items: center;
27        justify-content: center;
28        gap: 36px;
29      }
30      .bar {
31        position: relative;
32        width: 1040px;
33        height: 188px;
34        border: 3px solid var(--hg-dim);
35        border-radius: 12px;
36        overflow: hidden;
37        display: flex;
38        align-items: center;
39        padding: 0 56px;
40      }
41      .fill {
42        position: absolute;
43        inset: 0;
44        transform: scaleX(0);
45        will-change: transform;
46      }
47      .fill.a {
48        background: var(--hg-violet);
49        transform-origin: left center;
50      }
51      .fill.b {
52        background: var(--hg-violet-2);
53        transform-origin: right center;
54      }
55      .fill.c {
56        background: #2afff0;
57        transform-origin: left center;
58      }
59      .label {
60        position: relative;
61        z-index: 1;
62        font-weight: 900;
63        font-size: 96px;
64        letter-spacing: -0.03em;
65        line-height: 1;
66        color: var(--hg-fg);
67        will-change: color;
68      }
69    </style>
70    <div class="stage">
71      <div class="bar">
72        <div class="fill a"></div>
73        <span class="label" id="l1">READY</span>
74      </div>
75      <div class="bar">
76        <div class="fill b"></div>
77        <span class="label" id="l2">SET</span>
78      </div>
79      <div class="bar">
80        <div class="fill c"></div>
81        <span class="label" id="l3">FILL</span>
82      </div>
83    </div>
84    <script>
85      window.__timelines = window.__timelines || {};
86      const tl = gsap.timeline({ paused: true });
87
88      // Bar 1 — sweeps left -> right, landing on the beat at ~0.55s.
89      tl.to(".fill.a", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.2);
90      tl.set("#l1", { color: "var(--hg-bg)" }, 0.55);
91
92      // Bar 2 — sweeps right -> left, landing at ~0.85s.
93      tl.to(".fill.b", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.5);
94      tl.set("#l2", { color: "var(--hg-bg)" }, 0.85);
95
96      // Bar 3 — sweeps left -> right, landing at ~1.15s.
97      tl.to(".fill.c", { scaleX: 1, duration: 0.35, ease: "power2.out" }, 0.8);
98      tl.set("#l3", { color: "var(--hg-bg)" }, 1.15);
99
100      window.__timelines["directional-fill"] = tl;
101    </script>
102  </div>
103</template>