A production-ready React hero section built with GSAP ScrollTrigger and optional Lenis smooth scrolling, it auto-respects system dark/light mode and ships with a bold, modern typographic style.
What’s inside
Sticky, expanding media container (video or image) with depth darkening Overlay that reveals on scroll with caption, heading, paragraphs, and a slot for CTAs Headline “film-roll” exit animation Fully prop-driven API (layout, easing, blur, scroll length, toggles) System theme only (no manual overrides) via color-scheme + prefers-color-scheme Single-file component, SSR-safe dynamic imports (Next.js friendly) Clean teardown of ScrollTriggers/Lenis to prevent leaks
import React from "react";
import HeroScrollVideo from "@/components/ui/scroll-animated-video";
export default function DemoOne() {
return (
<main>
<HeroScrollVideo
title="Scroll Animated Video"
subtitle="Subtitle"
meta="Q3 • 2025"
media="https://videos.pexels.com/video-files/6151238/6151238-hd_1920_1080_30fps.mp4"
overlay={{
caption: "PROJECT • 07",
heading: "Clarity in Motion",
paragraphs: ["A focused reel highlighting interaction, craft, and intent."],
}}
// Force dark theme with custom palette
themeMode="system"
/>
<section style={{ minHeight: "150vh" }} />
</main>
);
}