<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Reel motion graphic</title>
    <link rel="icon" href="data:," />
    <script src="node_modules/gsap/dist/gsap.min.js"></script>
    <style>
      * { box-sizing: border-box; }
      body { margin: 0; color: #ffffff; font-family: sans-serif; }
      #motion { position: relative; width: 100%; height: 100%; overflow: hidden; }
      .background { position: absolute; inset: 0; background: #0f1d2b; }
      #scene { position: absolute; inset: 0; display: grid; place-items: center; }
      .content { width: 80%; }
      .kicker { color: #ffad66; font-size: 32px; letter-spacing: 6px; }
      h1 { margin: 32px 0; font-size: 100px; line-height: 1.05; }
      .subtitle { font-size: 38px; line-height: 1.4; }
      .bar { width: 160px; height: 10px; margin-top: 48px; background: #ffad66; }
    </style>
  </head>
  <body>
    <div id="motion" data-composition-id="motion" data-start="0"
         data-width="1080" data-height="1920" data-duration="3">
      <div class="background"></div>
      <section id="scene">
        <div class="content">
          <div id="kicker" class="clip kicker" data-start="0" data-duration="3" data-track-index="0">THE NEXT CHAPTER</div>
          <h1 id="headline" class="clip" data-start="0" data-duration="3" data-track-index="1">Make your move.</h1>
          <div id="subtitle" class="clip subtitle" data-start="0" data-duration="3" data-track-index="2">A little progress. Every day.</div>
          <div id="accent" class="clip bar" data-start="0" data-duration="3" data-track-index="3"></div>
        </div>
      </section>
    </div>
    <script>
      const timeline = gsap.timeline({ paused: true });
      timeline.fromTo(".kicker", { y: 24, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.4 }, 0);
      timeline.fromTo("h1", { y: 64, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.65, ease: "power3.out" }, 0.1);
      timeline.fromTo(".subtitle", { y: 24, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.4 }, 0.4);
      timeline.fromTo(".bar", { scaleX: 0, transformOrigin: "left center" },
        { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.5);
      window.__timelines["motion"] = timeline;
    </script>
  </body>
</html>