Scene 1

1<template id="scene-1-template">
2  <div data-composition-id="scene-1" data-width="1280" data-height="720" data-duration="3">
3    <style>
4      .scene {
5        position: absolute;
6        inset: 0;
7        display: flex;
8        align-items: center;
9        justify-content: center;
10        opacity: 0;
11      }
12      .scene-1 {
13        flex-direction: column;
14      }
15      .scene-1 .title {
16        font-size: 160px;
17        font-weight: 900;
18        letter-spacing: 0.05em;
19        transform: scale(0);
20      }
21      .scene-1 .subtitle {
22        font-size: 36px;
23        font-weight: 400;
24        color: #9ca3af;
25        margin-top: 24px;
26        opacity: 0;
27      }
28    </style>
29    <div class="scene scene-1">
30      <div class="title">STARGAZED</div>
31      <div class="subtitle">by HeyGen</div>
32    </div>
33    <script>
34      // Remotion: <Sequence 0..90> TitleScene. Frame -> time at 30 fps.
35      const tl = gsap.timeline({ paused: true });
36      const scene = document.querySelector(".scene-1");
37      tl.set(scene, { opacity: 1 }, 0);
38      // spring({damping:12, stiffness:100, mass:1}) -> back.out(1.4) ~0.7s
39      tl.to(scene.querySelector(".title"), { scale: 1, duration: 0.7, ease: "back.out(1.4)" }, 0);
40      // interpolate(frame, [20,40], [0,1]) -> 0.667s..1.333s linear
41      tl.fromTo(
42        scene.querySelector(".subtitle"),
43        { opacity: 0 },
44        { opacity: 1, duration: 0.667, ease: "none" },
45        0.667,
46      );
47      tl.set(scene, { opacity: 0 }, 3);
48      window.__timelines = window.__timelines || {};
49      window.__timelines["scene-1"] = tl;
50    </script>
51  </div>
52</template>