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-blog.vercel.app/r/3d-marquee.json

Code

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

Props

className

Type
string
Default
-
Description
Additional classes merged onto the component.

images

Type
string[]
Default
-
Description
Images rendered in the 3D grid.

items

Type
React.ReactNode[]
Default
-
Description
Legacy custom item fallback.

Reference

Aceternity 3D Marquee