hero-video-bleed

Summary

A full-bleed autoplay loop video that sits directly under the hero typography, intentionally ungrounded by any container. A GSAP timeline reveals it via clip-path / scale tween on first scroll, so the page feels like it "opens".

HTML structure (minimal)

<div class="tp-hero-bottom-img-wrap">
  <div class="tp-hero-bottom-img">
    <video loop muted autoplay playsinline>
      <source src="https://html.aqlova.com/videos/liko/liko.mp4" type="video/mp4">
    </video>
  </div>
</div>

Key SCSS tokens

.tp-hero-bottom-img-wrap { width: 100%; }
.tp-hero-bottom-img {
  position: relative;
  overflow: hidden;
  & video { width: 100%; display: block; }
}

Animation logic

// videoAnimOne in src/utils/video-anim.ts uses ScrollTrigger to scrub a clip-inset
// from outside-in as the user scrolls past, e.g.:
gsap.fromTo('.tp-hero-bottom-img', {
  clipPath: 'inset(15% 15% 15% 15%)'
}, {
  clipPath: 'inset(0% 0% 0% 0%)',
  ease: 'none',
  scrollTrigger: { trigger: '.tp-hero-bottom-img-wrap', start: 'top 80%', end: 'bottom 60%', scrub: true }
});

Notable details

• Video source is hosted on the author's CDN — replace before deploying or bundle locally.
• Pairs with the display hero above so the page reveal happens in two beats (text fade, then video uncrop).
• playsInline is set so iOS Safari doesn't bounce into fullscreen.

Use when

• Agency / studio sites where you want a cinematic establishing shot directly under the headline without a separate "watch reel" CTA.
• Replacing static hero photography with a kinetic but sound-free background.

Caveats

• Autoplay loops carry layout-shift and bandwidth cost; serve a low-bitrate H.264 + WebM pair and a poster.
• Remote MP4 means LCP depends on a third-party CDN.