Arc Marquee
An infinite curving marquee gallery with dynamic circular arc trajectory, smooth velocity spring physics, and pointer drag momentum.
Installation
$ npx shadcn@latest add https://akshitr.com/r/arc-marquee.json
Usage
import ArcMarquee from "@/components/arc-marquee";
export default function Example() {
return (
<ArcMarquee
speed={45}
cardWidth={180}
cardHeight={250}
gap={20}
pauseOnHover={true}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ArcMarqueeItem[] | DEFAULT_ITEMS | List of items with id, image, and optional title. |
speed | number | 45 | Speed in pixels per second. |
direction | "left" | "right" | "left" | Scroll direction. |
cardWidth | number | 200 | Width of each card. |
cardHeight | number | 270 | Height of each card. |
arcRadius | number | auto | Curvature radius of the arch (larger = flatter curve). |
gap | number | 24 | Gap in pixels between cards. |
pauseOnHover | boolean | true | Automatically pause ticker animation when hovered. |
Use Cases
- Client Logos & Brand Showcases: Display partner, customer, or tech-stack logos on landing pages with an organic curved trajectory instead of a flat ticker.
- Visual Design Portfolios & Photography: Flow architectural, artwork, or thumbnail shots smoothly across the screen with interactive drag momentum.
- Social Proof & Testimonials Ticker: Present avatar cards, user reviews, or tweets along an elevated curved path.
- Hero & Banner Visual Anchors: Add a captivating continuous motion element to modern hero headers or project teaser sections.
