Scene

1<template id="outline-to-fill-template">
2  <div data-composition-id="outline-to-fill" 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        display: flex;
20        align-items: center;
21        justify-content: center;
22      }
23      .outline-stack {
24        position: relative;
25        font-family: "Playfair Display", serif;
26        font-weight: 900;
27        font-size: 320px;
28        letter-spacing: -0.04em;
29        line-height: 0.95;
30        white-space: nowrap;
31      }
32      .stroke-layer {
33        position: absolute;
34        top: 0;
35        left: 0;
36        color: transparent;
37        -webkit-text-stroke: 3px var(--hg-violet-2);
38        text-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
39        will-change:
40          opacity,
41          -webkit-text-stroke;
42      }
43      .fill-layer {
44        position: relative;
45        color: var(--hg-fg);
46        clip-path: inset(100% 0 0 0);
47        will-change: clip-path;
48      }
49      .spacer {
50        color: transparent;
51      }
52    </style>
53    <div class="stage">
54      <div class="outline-stack">
55        <span class="spacer">Premium</span>
56        <span class="stroke-layer">Premium</span>
57        <span class="fill-layer">Premium</span>
58      </div>
59    </div>
60    <script>
61      window.__timelines = window.__timelines || {};
62      const tl = gsap.timeline({ paused: true });
63
64      // Stroke draws in
65      tl.fromTo(
66        ".stroke-layer",
67        { opacity: 0, scale: 1.04 },
68        { opacity: 1, scale: 1, duration: 0.45, ease: "power3.out" },
69        0.15,
70      );
71
72      // Fill rises from bottom
73      tl.set(".fill-layer", { clipPath: "inset(100% 0 0 0)" }, 0);
74      tl.to(".fill-layer", { clipPath: "inset(0% 0 0 0)", duration: 1.0, ease: "expo.out" }, 0.55);
75
76      // Stroke recedes once fill arrives
77      tl.to(".stroke-layer", { opacity: 0.35, duration: 0.6, ease: "power2.out" }, 1.0);
78
79      window.__timelines["outline-to-fill"] = tl;
80    </script>
81  </div>
82</template>