Title

1<template id="title-scene-template">
2  <div data-composition-id="title-scene" data-width="1280" data-height="720" data-duration="3">
3    <style>
4      .title {
5        position: absolute;
6        inset: 0;
7        display: flex;
8        align-items: center;
9        justify-content: center;
10        color: #ffffff;
11        font-size: 160px;
12        font-weight: 800;
13        letter-spacing: 0.05em;
14        opacity: 0;
15      }
16    </style>
17    <div class="title">HELLO</div>
18    <script>
19      // Translation of Remotion's
20      //   interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0]) at fps=30
21      // into a paused GSAP timeline keyed in seconds.
22      const tl = gsap.timeline({ paused: true });
23      const target = document.querySelector(".title");
24      tl.to(target, { opacity: 1, duration: 0.5, ease: "none" }, 0);
25      tl.to(target, { opacity: 1, duration: 2.0, ease: "none" }, 0.5);
26      tl.to(target, { opacity: 0, duration: 0.5, ease: "none" }, 2.5);
27      window.__timelines = window.__timelines || {};
28      window.__timelines["title-scene"] = tl;
29    </script>
30  </div>
31</template>