3D Marquee
New3D perspective marquee with multiple rows of images scrolling at different speeds.
Preview
3D Marquee
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Hero sections and visual showcase areas.
Why this component matters
The 3D perspective and multi-speed scrolling create a cinematic, premium feel that communicates polish.
Usage guidance
Use as a hero background with 15-20 images. Set 3-4 rows with different scroll directions and speeds. Apply perspective transform for the 3D tilt.
Installation
bash
npx shadcn@latest add @aceternity/3d-marqueeUsage
example.tsxtsx
import { 3DMarquee } from "@/components/ui/3d-marquee";
export default function Example() {
return (
<3DMarquee>
{/* Your content here */}
</3DMarquee>
);
}Source
3d-marquee.tsx
components/ui/3d-marquee.tsx