āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/aceternity/components/container-scroll-animation ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.
hero, product, features
npx shadcn@latest add @aceternity/container-scroll-animation
Run the following command:
npx shadcn@latest add @aceternity/container-scroll-animation
| Prop | Type | Description | Default Value |
| :--- | :--- | :--- | :--- |
| ContainerScroll | titleComponent | string | React.ReactNode | The component or string to be used as the title. |
| ContainerScroll | children | React.ReactNode | The children components to be rendered inside the ContainerScroll component. |
| Header | translate | MotionValue<number> | The motion value for translation to be applied to the Header component. |
| Header | titleComponent | string | React.ReactNode | The component or string to be used as the title in the Header component. |
| Card | rotate | MotionValue<number> | The motion value for rotation to be applied to the Card component. |
| Card | scale | MotionValue<number> | The motion value for scaling to be applied to the Card component. |
| Card | translate | MotionValue<number> | The motion value for translation to be applied to the Card component. |
| Card | children | React.ReactNode | The children components to be rendered inside the Card component. |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā