Preferences

Rotating Carousel

Customize

Face Count12

Face Width150

Face Height140

Initial Rotation0

Card Gap10

Drag Sensitivity1

Smoothness0.25

Inertia Resistance7

Shade Intensity0.85

Shade Base0.15

Auto Rotate Speed (s)30

Entrance Duration (s)0.9

Entrance Stagger (s)0.07

Props

Property	Type	Default	Description
`images`	string[]	`[...6 demo images]`	Array of image URLs to use for the carousel faces. Cycled with modulo if faceCount exceeds array length.
`faceCount`	number	`6`	Number of faces in the 3D wheel (clamped between 3 and 12).
`faceWidth`	number	`300`	Width of each face in pixels.
`faceHeight`	number	`300`	Height of each face in pixels.
`maxFaceWidth`	number	`undefined`	Optional cap on the responsive face width. Defaults to faceWidth when not set.
`minFaceWidth`	number	`120`	Smallest the face will shrink to on tiny screens when responsive is enabled.
`responsive`	boolean	`true`	Scale faces to fit the container width using a ResizeObserver, clamped between minFaceWidth and maxFaceWidth/faceWidth, preserving aspect ratio.
`cardGap`	number	`0`	Extra pixels added to the wheel radius to space faces apart. Positive values push faces further apart; negative values bring them closer/overlap.
`draggable`	boolean	`true`	Enable or disable drag-to-rotate interaction. When false, the wheel cannot be dragged (inertia is also disabled), though auto-rotate still works.
`dragSensitivity`	number	`1`	Multiplier applied to drag movement to control rotation speed while dragging.
`shadeIntensity`	number	`0.85`	Intensity of the opacity shading applied to faces based on their rotation angle.
`shadeBase`	number	`0.15`	Base/minimum opacity applied to faces regardless of angle.
`autoRotate`	boolean	`false`	Enable continuous automatic rotation of the wheel.
`autoRotateSpeed`	number	`12`	Duration (seconds) for one full automatic rotation.
`autoRotateDirection`	number	`1`	Direction of auto-rotation: 1 for clockwise, -1 for counter-clockwise.
`smoothness`	number	`0.25`	Tween duration (seconds) used to smooth drag-based rotation updates.
`inertia`	boolean	`true`	Whether the wheel continues spinning with momentum after a drag release.
`inertiaResistance`	number	`7`	Multiplier controlling how far the wheel spins from inertia after drag release.
`pauseAutoRotateOnHover`	boolean	`true`	Pause automatic rotation while the pointer is hovering over the carousel.
`initialRotation`	number	`0`	Initial rotationY offset (in degrees) applied to the wheel on mount.
`faceFit`	"cover" \| "contain" \| "fill"	`"cover"`	CSS background-size value used for each face image.
`onFaceChange`	(index: number) => void	`undefined`	Callback fired whenever the nearest-facing face index changes during rotation.
`entranceAnimation`	boolean	`true`	Enable/disable the entrance animation played when the component first mounts.
`entranceType`	"pop" \| "fade" \| "bottom" \| "top" \| "flip" \| "scatter" \| "spin"	`"spin"`	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 face 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)").
`filterOnHover`	boolean	`true`	Toggle the grayscale/dark filter on a face when hovering over it.
`defaultFiltered`	boolean	`true`	Whether faces start with the grayscale/dark filter applied by default. Hovering inverts this state per face.
`className`	string	`""`	Custom class name applied to the outer wrapper div of the carousel.
`cardClassName`	string	`""`	Custom class name applied to each individual face (card) element, merged with the default "rc-face" class.

images

Typestring[]

Default[...6 demo images]

Array of image URLs to use for the carousel faces. Cycled with modulo if faceCount exceeds array length.

faceCount

Typenumber

Default6

Number of faces in the 3D wheel (clamped between 3 and 12).

faceWidth

Typenumber

Default300

Width of each face in pixels.

faceHeight

Typenumber

Default300

Height of each face in pixels.

maxFaceWidth

Typenumber

Defaultundefined

Optional cap on the responsive face width. Defaults to faceWidth when not set.

minFaceWidth

Typenumber

Default120

Smallest the face will shrink to on tiny screens when responsive is enabled.

responsive

Typeboolean

Defaulttrue

Scale faces to fit the container width using a ResizeObserver, clamped between minFaceWidth and maxFaceWidth/faceWidth, preserving aspect ratio.

cardGap

Typenumber

Default0

Extra pixels added to the wheel radius to space faces apart. Positive values push faces further apart; negative values bring them closer/overlap.

draggable

Typeboolean

Defaulttrue

Enable or disable drag-to-rotate interaction. When false, the wheel cannot be dragged (inertia is also disabled), though auto-rotate still works.

dragSensitivity

Typenumber

Default1

Multiplier applied to drag movement to control rotation speed while dragging.

shadeIntensity

Typenumber

Default0.85

Intensity of the opacity shading applied to faces based on their rotation angle.

shadeBase

Typenumber

Default0.15

Base/minimum opacity applied to faces regardless of angle.

autoRotate

Typeboolean

Defaultfalse

Enable continuous automatic rotation of the wheel.

autoRotateSpeed

Typenumber

Default12

Duration (seconds) for one full automatic rotation.

autoRotateDirection

Typenumber

Default1

Direction of auto-rotation: 1 for clockwise, -1 for counter-clockwise.

smoothness

Typenumber

Default0.25

Tween duration (seconds) used to smooth drag-based rotation updates.

inertia

Typeboolean

Defaulttrue

Whether the wheel continues spinning with momentum after a drag release.

inertiaResistance

Typenumber

Default7

Multiplier controlling how far the wheel spins from inertia after drag release.

pauseAutoRotateOnHover

Typeboolean

Defaulttrue

Pause automatic rotation while the pointer is hovering over the carousel.

initialRotation

Typenumber

Default0

Initial rotationY offset (in degrees) applied to the wheel on mount.

faceFit

Type"cover" | "contain" | "fill"

Default"cover"

CSS background-size value used for each face image.

onFaceChange

Type(index: number) => void

Defaultundefined

Callback fired whenever the nearest-facing face index changes during rotation.

entranceAnimation

Typeboolean

Defaulttrue

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

entranceType

Default"spin"

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

filterOnHover

Typeboolean

Defaulttrue

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

defaultFiltered

Typeboolean

Defaulttrue

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

className

Typestring

Default""

Custom class name applied to the outer wrapper div of the carousel.

cardClassName

Typestring

Default""

Custom class name applied to each individual face (card) element, merged with the default "rc-face" class.

Dependencies

gsap 3.15.0

Crafted withbyMohammad Tasin