Preferences

Spectra Slider

Customize

Card Width220

Card Height240

Number of Cards10

Curve Intensity-20

Gap100

Perspective400

Max Rotation0

Scale Step0.1

Opacity Step0.28

Brightness Step0.5

Initial Index0

Duration (s)20

Wheel Smoothness0.1

Wheel Sensitivity0

Entrance Duration (s)0.9

Entrance Stagger (s)0.07

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	`7`	Number of cards to display (min 3). Slices from the cards array or fallback demo cards.
`cardWidth`	number	`220`	Width of each card in pixels.
`cardHeight`	number	`340`	Height of each card in pixels.
`gap`	number	`190`	Horizontal distance between card centers in pixels.
`perspective`	number	`1200`	CSS perspective (in pixels) applied to the stage, controls how strong the 3D depth effect looks.
`maxRotation`	number	`35`	Maximum rotateY tilt (in degrees) applied to the furthest visible cards.
`scaleStep`	number	`0.14`	How much each card shrinks per step away from the centered card.
`opacityStep`	number	`0.28`	How much each card fades per step away from the centered card.
`brightnessStep`	number	`0.35`	How much each card darkens (CSS brightness filter) per step away from the centered card.
`draggable`	boolean	`true`	Enable drag to move through the cards.
`snap`	boolean	`true`	Snap to the nearest card when a drag or wheel scroll ends.
`initialIndex`	number	`0`	Index of the card centered on mount.
`autoPlay`	boolean	`false`	Automatically cycles through the cards on a continuous loop.
`duration`	number	`20`	Seconds for one full autoplay loop through every card.
`reverse`	boolean	`false`	Reverses the autoplay direction.
`pauseOnHover`	boolean	`true`	Pauses autoplay while the pointer is hovering over the stage.
`wheelSmoothness`	number	`0.15`	Lerp factor (0-1) for wheel-driven movement — lower values feel smoother/slower to catch up to the scroll target.
`wheelSensitivity`	number	`0.008`	Multiplier converting wheel deltaY into offset movement.
`mouseWheel`	boolean	`true`	Enables scrolling through cards with the mouse wheel / trackpad.
`filterOnHover`	boolean	`false`	Toggles a grayscale/contrast filter on a card when it is hovered.
`defaultFiltered`	boolean	`false`	When filterOnHover is enabled, controls whether cards start filtered (and clear on hover) or start clear (and filter on hover).
`direction`	'horizontal' \| 'vertical'	`'horizontal'`	Layout axis for the stack — cards spread vertically or horizontally.
`curveIntensity`	number	`-20`	Perpendicular arc offset applied per step away from center (offset * diff²). Positive/negative flips the curve side; 0 keeps the stack flat.
`entranceAnimation`	boolean	`true`	Plays a one-time entrance animation for the cards on mount.
`entranceDuration`	number	`0.9`	Duration (in seconds) of the entrance animation.
`entranceStagger`	number	`0.07`	Delay (in seconds) between each card’s entrance animation.
`entranceEase`	string	`"back.out(1.4)"`	GSAP easing function used for the entrance animation.
`entranceType`	string	`"spin"`	Entrance animation style: pop \| fade \| bottom \| top \| left \| right \| flip \| scatter \| spin \| zoomBlur.
`onCardClick`	(card: Card, index: number) => void	`undefined`	Callback fired when the centered card is clicked. Clicking an off-center card instead animates it to center.
`className`	string	`""`	Additional CSS classes for the stage container. No background is applied by the component itself.
`cardClassName`	string	`""`	Additional CSS classes for individual cards.

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). Slices from the cards array or fallback demo cards.

Default7

cardWidthnumber

Width of each card in pixels.

Default220

cardHeightnumber

Height of each card in pixels.

Default340

gapnumber

Horizontal distance between card centers in pixels.

Default190

perspectivenumber

CSS perspective (in pixels) applied to the stage, controls how strong the 3D depth effect looks.

Default1200

maxRotationnumber

Maximum rotateY tilt (in degrees) applied to the furthest visible cards.

Default35

scaleStepnumber

How much each card shrinks per step away from the centered card.

Default0.14

opacityStepnumber

How much each card fades per step away from the centered card.

Default0.28

brightnessStepnumber

How much each card darkens (CSS brightness filter) per step away from the centered card.

Default0.35

draggableboolean

Enable drag to move through the cards.

Defaulttrue

snapboolean

Snap to the nearest card when a drag or wheel scroll ends.

Defaulttrue

initialIndexnumber

Index of the card centered on mount.

Default0

autoPlayboolean

Automatically cycles through the cards on a continuous loop.

Defaultfalse

durationnumber

Seconds for one full autoplay loop through every card.

Default20

reverseboolean

Reverses the autoplay direction.

Defaultfalse

pauseOnHoverboolean

Pauses autoplay while the pointer is hovering over the stage.

Defaulttrue

wheelSmoothnessnumber

Lerp factor (0-1) for wheel-driven movement — lower values feel smoother/slower to catch up to the scroll target.

Default0.15

wheelSensitivitynumber

Multiplier converting wheel deltaY into offset movement.

Default0.008

mouseWheelboolean

Enables scrolling through cards with the mouse wheel / trackpad.

Defaulttrue

filterOnHoverboolean

Toggles a grayscale/contrast filter on a card when it is hovered.

Defaultfalse

defaultFilteredboolean

When filterOnHover is enabled, controls whether cards start filtered (and clear on hover) or start clear (and filter on hover).

Defaultfalse

direction'horizontal' | 'vertical'

Layout axis for the stack — cards spread vertically or horizontally.

Default'horizontal'

curveIntensitynumber

Perpendicular arc offset applied per step away from center (offset * diff²). Positive/negative flips the curve side; 0 keeps the stack flat.

Default-20

entranceAnimationboolean

Plays a one-time entrance animation for the cards on mount.

Defaulttrue

entranceDurationnumber

Duration (in seconds) of the entrance animation.

Default0.9

entranceStaggernumber

Delay (in seconds) between each card’s entrance animation.

Default0.07

entranceEasestring

GSAP easing function used for the entrance animation.

Default"back.out(1.4)"

entranceTypestring

Default"spin"

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

Callback fired when the centered card is clicked. Clicking an off-center card instead animates it to center.

Defaultundefined

classNamestring

Additional CSS classes for the stage container. No background is applied by the component itself.

Default""

cardClassNamestring

Additional CSS classes for individual cards.

Default""

Dependencies

gsap 3.15.0

Crafted withbyMohammad Tasin