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.

imagesstring[]

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

Default[...6 demo images]

faceCountnumber

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

Default6

faceWidthnumber

Width of each face in pixels.

Default300

faceHeightnumber

Height of each face in pixels.

Default300

maxFaceWidthnumber

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

Defaultundefined

minFaceWidthnumber

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

Default120

responsiveboolean

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

Defaulttrue

cardGapnumber

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

Default0

draggableboolean

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

Defaulttrue

dragSensitivitynumber

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

Default1

shadeIntensitynumber

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

Default0.85

shadeBasenumber

Base/minimum opacity applied to faces regardless of angle.

Default0.15

autoRotateboolean

Enable continuous automatic rotation of the wheel.

Defaultfalse

autoRotateSpeednumber

Duration (seconds) for one full automatic rotation.

Default12

autoRotateDirectionnumber

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

Default1

smoothnessnumber

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

Default0.25

inertiaboolean

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

Defaulttrue

inertiaResistancenumber

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

Default7

pauseAutoRotateOnHoverboolean

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

Defaulttrue

initialRotationnumber

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

Default0

faceFit"cover" | "contain" | "fill"

CSS background-size value used for each face image.

Default"cover"

onFaceChange(index: number) => void

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

Defaultundefined

entranceAnimationboolean

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

Defaulttrue

Preset style for the mount entrance animation.

Default"spin"

entranceDurationnumber

Duration of the entrance animation in seconds.

Default0.9

entranceStaggernumber

Delay (in seconds) between each face 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)"

filterOnHoverboolean

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

Defaulttrue

defaultFilteredboolean

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

Defaulttrue

classNamestring

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

Default""

cardClassNamestring

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

Default""

Dependencies

gsap 3.15.0

Crafted withbyMohammad Tasin