Library

Container Scroll

Container Scroll

3D perspective card rotation driven by scroll position with responsive mobile support. The card rotates from 20deg to 0deg and scales based on scroll progress.

scroll3dperspectiveframer-motion

Installation

bash
# Copy container-scroll-animation.tsx to your project
cp components/ui/container-scroll-animation.tsx your-project/components/ui/container-scroll-animation.tsx

How to use

tsx
import { ContainerScroll } from "@/components/ui/container-scroll-animation";
tsx
<ContainerScroll
  titleComponent={
    <h2 className="text-4xl font-semibold text-white">
      Your Title <br />
      <span className="text-6xl font-bold">Here</span>
    </h2>
  }
>
  <img
    src="/your-image.jpg"
    alt="Demo"
    className="mx-auto rounded-2xl object-cover h-full w-full"
  />
</ContainerScroll>

Dependencies

framer-motion

Exports

ContainerScrollHeaderCard

File

components/ui/container-scroll-animation.tsx
Preview

Unleash the power of
Scroll Animations

Google Homepage
Made with