Components
Loading preview...
A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/container-scroll-animation"use client";
import React from "react";
import { ContainerScroll } from "@/components/ui/container-scroll-animation";
import Image from "next/image";
export function HeroScrollDemo() {
return (
<div className="flex flex-col overflow-hidden pb-[500px] pt-[1000px]">
<ContainerScroll
titleComponent={
<>
<h1 className="text-4xl font-semibold text-black dark:text-white">
Unleash the power of <br />
<span className="text-4xl md:text-[6rem] font-bold mt-1 leading-none">
Scroll Animations
</span>
</h1>
</>
}
>
<Image
src={`https://ui.aceternity.com/_next/image?url=%2Flinear.webp&w=3840&q=75`}
alt="hero"
height={720}
width={1400}
className="mx-auto rounded-2xl object-cover h-full object-left-top"
draggable={false}
/>
</ContainerScroll>
</div>
);
}