Content Display

Perspective Image Marquee

이미지나 카드 스트립을 원근감 있는 흐름으로 보여주는 3D 마키입니다.

Preview

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8

content motion

Perspective Image Marquee

perspective image strips

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/3d-marquee.json

Code

typescript
Copied
1import { ThreeDMarquee } from "@/components/3d-marquee"23export default function Example() {4  return <ThreeDMarquee images={images} />5}

Props

PropTypeDefaultDescription
classNamestring-Additional classes merged onto the component.
imagesstring[]-Images rendered in the 3D grid.
itemsReact.ReactNode[]-Legacy custom item fallback.

Reference

Aceternity 3D Marquee