# Motion Marquee 3d

3d marquee of testimonial cards in angled columns.

- id: `motion-marquee-3d`
- Page: https://agentic-ui-kit.com/components/motion-marquee-3d
- Live preview: https://agentic-ui-kit.com/live/component/motion-marquee-3d?piece=motion-marquee-3d

## Install

```bash
agentic-ui add motion-marquee-3d
npx shadcn@4.17.0 add @agentic-ui/motion-marquee-3d
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** angled-3d-plane, vertical-columns, alternating-directions, per-column-speed, seamless-loop, card-or-image-items, fewer-columns-when-narrow, pause-on-hover, pause-offscreen, reduced-motion-fallback
- **Intents:** communicate, show-composition
- **Suits domains:** marketing, saas, social, ecommerce, media
- **Interaction:** hover
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** 3d marquee of testimonial cards in angled columns, tilted scrolling wall of screenshots or images, angled infinite scroll columns for a landing page hero background, perspective marquee with cards moving up and down in alternating columns
- **Avoid when:** Content that must be read or clicked (the columns keep moving; use a static grid), A single row of logos (use motion-marquee), Pages with several other large animations in view, Fewer than 6 items, where the loop shows repeats
- **Preserve when adapting:** doubled-list-loop, aria-hidden-copies, inert-copies, container-query-columns, pause-offscreen
- **Replace when adapting:** items, columns, height, duration, tilt
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion