Preferences

Rotating Cards

Customize

Radius390

Duration (s)22

Card Width165

Card Height154

Number of Cards10

Initial Rotation0

Entrance Duration (s)0.9

Entrance Stagger (s)0.02

Props

Property	Type	Default	Description
`cards`	Card[]	`[]`	Array of card objects. Each card: { id, image?: string, content?: ReactNode }. If empty, fallback demo cards are shown.
`numberOfCards`	number	`10`	Number of cards to display (min 3, max 10). Slices from the cards array or fallback demo cards.
`radius`	number	`480`	Radius of the circle in pixels.
`duration`	number	`22`	Duration of one full rotation in seconds.
`cardWidth`	number	`162`	Width of each card in pixels.
`cardHeight`	number	`192`	Height of each card in pixels.
`height`	number	`500`	Height of the container in pixels.
`pauseOnHover`	boolean	`false`	Pause rotation when hovering over a card.
`reverse`	boolean	`false`	Reverse the rotation direction.
`draggable`	boolean	`true`	Enable drag to rotate the circle.
`autoPlay`	boolean	`true`	Auto-play rotation animation.
`onCardClick`	(card: Card, index: number) => void	`undefined`	Callback fired when a card is clicked.
`mouseWheel`	boolean	`true`	Enable mouse wheel to control rotation.
`className`	string	`""`	Additional CSS classes for the container.
`cardClassName`	string	`""`	Additional CSS classes for individual cards.
`initialRotation`	number	`0`	Initial rotation offset in degrees. Updates live when changed.
`filterOnHover`	boolean	`true`	Toggle the grayscale/dark filter on a card when hovering over it.
`defaultFiltered`	boolean	`true`	Whether cards start with the grayscale/dark filter applied by default. Hovering inverts this state per card.
`entranceAnimation`	boolean	`true`	Enable/disable the entrance animation played when the component first mounts.
`entranceType`	"pop" \| "fade" \| "bottom" \| "top" \| "left" \| "right" \| "flip" \| "spin" \| "zoomBlur" \| "scatter"	`"pop"`	Preset style for the mount entrance animation.
`entranceDuration`	number	`0.9`	Duration of the entrance animation in seconds.
`entranceStagger`	number	`0.07`	Delay (in seconds) between each card animating in during entrance.
`entranceEase`	string	`"back.out(1.4)"`	GSAP ease string used for the entrance animation (e.g. "power2.out", "elastic.out(1, 0.5)").

cards

TypeCard[]

Default[]

Array of card objects. Each card: { id, image?: string, content?: ReactNode }. If empty, fallback demo cards are shown.

numberOfCards

Typenumber

Default10

Number of cards to display (min 3, max 10). Slices from the cards array or fallback demo cards.

radius

Typenumber

Default480

Radius of the circle in pixels.

duration

Typenumber

Default22

Duration of one full rotation in seconds.

cardWidth

Typenumber

Default162

Width of each card in pixels.

cardHeight

Typenumber

Default192

Height of each card in pixels.

height

Typenumber

Default500

Height of the container in pixels.

pauseOnHover

Typeboolean

Defaultfalse

Pause rotation when hovering over a card.

reverse

Typeboolean

Defaultfalse

Reverse the rotation direction.

draggable

Typeboolean

Defaulttrue

Enable drag to rotate the circle.

autoPlay

Typeboolean

Defaulttrue

Auto-play rotation animation.

onCardClick

Type(card: Card, index: number) => void

Defaultundefined

Callback fired when a card is clicked.

mouseWheel

Typeboolean

Defaulttrue

Enable mouse wheel to control rotation.

className

Typestring

Default""

Additional CSS classes for the container.

cardClassName

Typestring

Default""

Additional CSS classes for individual cards.

initialRotation

Typenumber

Default0

Initial rotation offset in degrees. Updates live when changed.

filterOnHover

Typeboolean

Defaulttrue

Toggle the grayscale/dark filter on a card when hovering over it.

defaultFiltered

Typeboolean

Defaulttrue

Whether cards start with the grayscale/dark filter applied by default. Hovering inverts this state per card.

entranceAnimation

Typeboolean

Defaulttrue

Enable/disable the entrance animation played when the component first mounts.

entranceType

Default"pop"

Preset style for the mount entrance animation.

entranceDuration

Typenumber

Default0.9

Duration of the entrance animation in seconds.

entranceStagger

Typenumber

Default0.07

Delay (in seconds) between each card animating in during entrance.

entranceEase

Typestring

Default"back.out(1.4)"

GSAP ease string used for the entrance animation (e.g. "power2.out", "elastic.out(1, 0.5)").

Dependencies

gsap 3.15.0

Crafted withbyMohammad Tasin