Circular Card Marquee

A continuous circular card marquee for visual browsing and ambient editorial motion. Cards orbit a shared elliptical path with depth-based scale, opacity, and stacking. It supports direction, speed, controlled pause, hover pause, and reduced motion.

Preview

Reduce motion:Off

Tune:Off

Inspect

Tropical

Leaf

Dubai

Yogal

Radial

Installation

Motion

npx shadcn@latest add @sona-ui/radial-card-marquee

Behavior

The marquee renders one card per item and advances a single circular phase through Motion values. This keeps the loop continuous without cloning cards or updating React state on every frame. The orbit radius adapts to the card width and item count so neighboring cards preserve a readable gap.

Usage


const items = [
  {
    label: "Tropical",
    alt: "Orange tropical drink",
    image:
      "https://images.unsplash.com/photo-1544145945-f90425340c7e?auto=format&fit=crop&w=900&q=85",
  },
  {
    label: "Leaf",
    alt: "Leaf seen from below",
    image:
      "https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=900&q=85",
  },
  {
    label: "Dubai",
    alt: "Dubai street with palm trees",
    image:
      "https://images.unsplash.com/photo-1512453979798-5ea266f8880c?auto=format&fit=crop&w=900&q=85",
  },
  {
    label: "Yogal",
    alt: "Bright outdoor scene",
    image:
      "https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=900&q=85",
  },
  {
    label: "Radial",
    alt: "Warm architectural detail",
    image:
      "https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=900&q=85",
  },
];
 
export default function RadialCardMarqueeDemo() {
  return <RadialCardMarquee items={items} speed={0.2} />;
}

Props

Property	Type	Default	Description
`items`	`RadialCardMarqueeItem[]`	`[]`	Cards distributed evenly around the circular path.
`speed`	`number`	`0.12`	Travel speed measured in card positions per second.
`direction`	`"forward" \| "reverse"`	`"forward"`	Direction of continuous travel.
`pauseOnHover`	`boolean`	`true`	Pause movement while the pointer is over or pressing the marquee.
`paused`	`boolean`	`false`	Pause movement through controlled application state.
`className`	`string`	`undefined`	Additional classes for the marquee root.

Sona UI

Circular Card Marquee

Preview

Installation

Behavior

Usage

Props

Related components

Magnetic Button

Marquee