Preferences

Rotating Cards

Customize

Number of Cards10

Radius390

Duration (s)22

Card Width165

Card Height154

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)").

cardsCard[]

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

Default[]

numberOfCardsnumber

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

Default10

radiusnumber

Radius of the circle in pixels.

Default480

durationnumber

Duration of one full rotation in seconds.

Default22

cardWidthnumber

Width of each card in pixels.

Default162

cardHeightnumber

Height of each card in pixels.

Default192

heightnumber

Height of the container in pixels.

Default500

pauseOnHoverboolean

Pause rotation when hovering over a card.

Defaultfalse

reverseboolean

Reverse the rotation direction.

Defaultfalse

draggableboolean

Enable drag to rotate the circle.

Defaulttrue

autoPlayboolean

Auto-play rotation animation.

Defaulttrue

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

Callback fired when a card is clicked.

Defaultundefined

mouseWheelboolean

Enable mouse wheel to control rotation.

Defaulttrue

classNamestring

Additional CSS classes for the container.

Default""

cardClassNamestring

Additional CSS classes for individual cards.

Default""

initialRotationnumber

Initial rotation offset in degrees. Updates live when changed.

Default0

filterOnHoverboolean

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

Defaulttrue

defaultFilteredboolean

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

Defaulttrue

entranceAnimationboolean

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

Defaulttrue

Preset style for the mount entrance animation.

Default"pop"

entranceDurationnumber

Duration of the entrance animation in seconds.

Default0.9

entranceStaggernumber

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

Default0.07

entranceEasestring

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

Default"back.out(1.4)"

Dependencies

gsap 3.15.0

Crafted withbyMohammad Tasin