`videos/components/index.html`

40 lines
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8" /><meta name="viewport" content="width=1920, height=1080" />
<title>RENTV — Social Media</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
  body{margin:0;background:#070b10;font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
  #root{position:relative;width:1920px;height:1080px;overflow:hidden}
  .clip{position:absolute;inset:0}
  #bg{background:radial-gradient(120% 120% at 50% 0%,#0d1725 0%,#070b10 60%)}
  .shot{overflow:hidden}
  .simg{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;will-change:transform,opacity}
  .card{display:grid;place-items:center}
  .ci{text-align:center;padding:0 120px}
  .ci .tag{font-size:20px;letter-spacing:.4em;font-weight:600;color:#c8a15a;margin-bottom:18px}
  .ci h1{margin:0;color:#f3f7fc;font-size:88px;font-weight:500;letter-spacing:-.01em}
  .label{left:56px;bottom:60px;right:auto;top:auto;width:auto;height:auto}
  .li{display:flex;align-items:center;gap:14px}
  .li .num{color:#fff;font-size:18px;font-weight:600;letter-spacing:.08em;padding:8px 13px;border-radius:8px;background:#c8a15a}
  .li .txt{color:#fff;font-size:30px;font-weight:500;background:rgba(9,15,24,.9);padding:8px 18px;border-radius:10px}
</style></head>
<body>
  <div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="7.51" data-fps="30">
  <div id="bg" class="clip" data-start="0" data-duration="7.51" data-track-index="0"></div>
  <audio id="vo" src="assets/vo.m4a" data-start="0" data-volume="1"></audio>
  <section id="title" class="clip card" data-start="0" data-duration="1.3" data-track-index="1"><div class="ci"><div class="tag" id="tt">BACKEND</div><h1 id="th">Social Media</h1></div></section>
  <div id="shot" class="clip shot" data-start="1.3" data-duration="6.21" data-track-index="2"><img id="simg" class="simg" src="assets/social.png" alt="Social Media"></div>
  <div id="lbl" class="clip label" data-start="1.3" data-duration="6.21" data-track-index="3"><div id="li" class="li"><span class="num">BACKEND</span><span class="txt">Social Media</span></div></div>
  </div>
  <script>
    window.__timelines = window.__timelines || {};
    const tl = gsap.timeline({ paused: true });
    tl.from('#th',{y:32,autoAlpha:0,duration:0.55,ease:'power3.out'},0.12);
    tl.from('#tt',{y:-14,autoAlpha:0,duration:0.45},0.04);
    tl.from('#simg',{opacity:0,duration:0.35,ease:'power1.out'},1.300);
    tl.fromTo('#simg',{scale:1.07},{scale:1.0,duration:6.21,ease:'none'},1.300);
    tl.from('#li',{y:24,autoAlpha:0,duration:0.4,ease:'power2.out'},1.400);
    window.__timelines['main'] = tl;
  </script>
</body></html>