ℹ️ Hero section with scroll trigger animation, that animate images on scroll, 🧩 <ContainerScroll /> : React html attributes🧩 <BentoCell /> : variants: default: 5 cells | threeCells | fourCells 🧩 <BentoCell /> : motion attributes <ContainerScale /> : scale back and fade out fourCells ✅ Fully responsive
import { BentoCell, BentoGrid, ContainerScale, ContainerScroll } from "@/components/blocks/hero-gallery-scroll-animation"
import { Button } from "@/components/ui/button"
const IMAGES = [
"https://cdn.21st.dev/assets/mirror/3e/3ea6deb405209841367127ed1dce82f2a65106e5d46f071d3e4e5cad9e97e107.jpg",
"https://cdn.21st.dev/assets/mirror/7b/7bab093fa5169b8c409e68df5c59cd492d82dd295b9b275fed683365412da1f2.jpg",
"https://cdn.21st.dev/assets/mirror/63/63e7ed2d249b88910e9f9fac52566c9d94509aebcce2b37279d5cd4ef17b9de5.jpg",
"https://cdn.21st.dev/assets/mirror/c7/c7a6c78002305930a66e36564241258be1a67b255b3d3b0b98ce6a13c206b03f.jpg",
"https://cdn.21st.dev/assets/mirror/11/118263dadc56a8ce8dcbca46d389d0574a91aa00d43edda9692f5c38bb551c5c.jpg",
]
const HeroDemo1 = () => {
return (
<ContainerScroll className="h-[350vh]">
<BentoGrid className="sticky left-0 top-0 z-0 h-screen w-full p-4">
{IMAGES.map((imageUrl, index) => (
<BentoCell
key={index}
className="overflow-hidden rounded-xl shadow-xl"
>
<img
className="size-full object-cover object-center"
src={imageUrl}
alt=""
/>
</BentoCell>
))}
</BentoGrid>
<ContainerScale className="relative z-10 text-center">
<h1 className="max-w-xl text-5xl font-bold tracking-tighter text-slate-800 ">
Your Animated Hero
</h1>
<p className="my-6 max-w-xl text-sm text-slate-700 md:text-base">
Yet another hero section, this time with scroll trigger animations,
animating the hero content with motion.
</p>
<div className="flex items-center justify-center gap-4">
<Button className="bg-indigo-500 px-4 py-2 font-medium hover:bg-indigo-400">
Get Started
</Button>
<Button
variant="link"
className="bg-transparent px-4 py-2 font-medium"
>
Learn more
</Button>
</div>
</ContainerScale>
</ContainerScroll>
)
}
const HeroDemo2 = () => {
return (
<ContainerScroll className="h-[350vh]">
<BentoGrid
variant={"fourCells"}
className="sticky left-0 top-0 h-svh w-full p-4"
>
{IMAGES.filter((_, index) => index <= 3).map((imageUrl, index) => (
<BentoCell
key={index}
className="overflow-hidden rounded-xl shadow-xl"
>
<img
className="size-full object-cover object-center"
width="100%"
height="100%"
src={imageUrl}
/>
</BentoCell>
))}
</BentoGrid>
<ContainerScale className="text-center">
<h1
className="max-w-xl text-5xl font-bold tracking-tighter"
>
Your Animated Hero
</h1>
<p className="my-6 max-w-xl text-sm text-stone-500 md:text-base">
Yet another hero section, this time with scroll trigger animations,
animating the hero content with motion.
</p>
<div className="flex items-center justify-center gap-4">
<Button className="bg-indigo-700 px-4 py-2 font-medium hover:bg-indigo-200">
Get Started
</Button>
<Button
variant={"link"}
className="bg-transparent px-4 py-2 font-medium "
>
Learn more
</Button>
</div>
</ContainerScale>
</ContainerScroll>
)
}
const HeroDemo3 = () => {
return (
<ContainerScroll className="h-[350vh] bg-slate-900 text-slate-100">
<BentoGrid
variant={"threeCells"}
className="sticky left-0 top-0 h-svh w-full p-4"
>
{IMAGES.filter((_, index) => index <= 2).map((imageUrl, index) => (
<BentoCell
key={index}
className="overflow-hidden rounded-xl shadow-xl"
>
<img
className="size-full object-cover object-center"
width="100%"
height="100%"
src={imageUrl}
/>
</BentoCell>
))}
</BentoGrid>
<ContainerScale className="text-center">
<h1 className="max-w-xl text-5xl font-bold tracking-tighter ">
Your Animated Hero
</h1>
<p className="my-6 max-w-xl text-sm opacity-80 md:text-base">
Yet another hero section, this time with scroll trigger animations,
animating the hero content with motion.
</p>
<div className="flex items-center justify-center gap-4">
<Button className="bg-indigo-700 px-4 py-2 font-medium hover:bg-indigo-400">
Get Started
</Button>
<Button
variant={"link"}
className="bg-transparent px-4 py-2 font-medium text-white "
>
Learn more
</Button>
</div>
</ContainerScale>
</ContainerScroll>
)
}
export { HeroDemo1, HeroDemo2, HeroDemo3 }
Part of Systaliko UI — browse the full library on 21st.dev.