Hero About
Scroll-driven parallax hero where a full-bleed video shrinks and zooms out as text transitions from white-on-video to black-on-white. Three-column layout with staggered divider and description reveals in the final 30% of scroll. Separate stacked mobile layout with scroll-triggered entrances.
Preview
Make. Every Day. Better.
We make great things. Thoughtful, trend-right, versatile, innovative products and experiences that improve our consumers' lives.
Every day matters. Make amazing every day. Progress every day. Grow every day. For a better tomorrow.
Our consumers are moved to live healthier and more productive lives. Our brands help them to do just that. And we are inspired by them to get better every day ourselves, and make those around us better.
We make great things. Thoughtful, trend-right, versatile, innovative products and experiences that improve our consumers' lives.
Every day matters. Make amazing every day. Progress every day. Grow every day. For a better tomorrow.
Our consumers are moved to live healthier and more productive lives. Our brands help them to do just that. And we are inspired by them to get better every day ourselves, and make those around us better.
Source
import HeroAbout from "./index.jsx";
import { heroAbout } from "../demo-data.js";
export default function HeroAboutDemo() {
return (
<div>
<HeroAbout {...heroAbout} />
{/* Spacer so you can scroll past the hero */}
<div style={{ height: "100vh" }} />
</div>
);
}
Dependencies
gsap
Related Components
