Scene 1

1<template id="scene-1-template">
2  <div data-composition-id="scene-1" data-width="1280" data-height="720" data-duration="2">
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      .title {
13        font-size: 140px;
14        font-weight: 800;
15        color: #ffffff;
16        letter-spacing: 0.05em;
17        transform: scale(0);
18      }
19    </style>
20    <div class="scene">
21      <div class="title">Welcome</div>
22    </div>
23    <script>
24      // Scene 1 (0-2s): spring scale on "Welcome". Remotion:
25      //   spring({frame, fps, config: {damping:12, stiffness:100, mass:1}}) -> back.out(1.4) over ~0.7s.
26      const tl = gsap.timeline({ paused: true });
27      const scene = document.querySelector(".scene");
28      tl.set(scene, { opacity: 1 }, 0);
29      tl.to(scene.querySelector(".title"), { scale: 1, duration: 0.7, ease: "back.out(1.4)" }, 0);
30      tl.set(scene, { opacity: 0 }, 2);
31      window.__timelines = window.__timelines || {};
32      window.__timelines["scene-1"] = tl;
33    </script>
34  </div>
35</template>