Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
import { StackedDeckSlider } from "@/registry/tween/stacked-deck-slider"
export function StackedDeckSliderDemo() {
return <StackedDeckSlider />
}
import { StackedDeckSlider } from "@/components/ui/stacked-deck-slider"<StackedDeckSlider
slides={[
{
title: "Gilt Hour",
image:
"https://images.unsplash.com/photo-1593118854491-81cb5a79b868?q=80&w=1200&h=900&fit=crop&crop=faces,center&auto=format",
alt: "Model on a dune lifting gold fabric",
},
{
title: "Linen Drift",
image:
"https://images.unsplash.com/photo-1505340261985-ef955dabca9d?q=80&w=1200&h=900&fit=crop&crop=faces,center&auto=format",
},
{
title: "Last Light",
image:
"https://images.unsplash.com/photo-1596325426091-d11002d625fa?q=80&w=1200&h=900&fit=crop&crop=faces,center&auto=format",
},
]}
/>The slider keeps a window of up to five slides positioned along a CSS perspective axis — each one offset down and back by a fixed step so they read as a receding deck. A wheel or vertical swipe accumulates past a threshold and advances one step: the front card animates out and is removed, every other card eases up one position, and a fresh card fades in at the back with its title sliding up word by word via SplitText. A cooldown prevents accidental multi-steps. Wheel and touch listeners bind to the component element with preventDefault, so the deck never steals page scroll. When prefers-reduced-motion: reduce is set, the deck renders static with no listeners.
| Prop | Type | Default | Description |
|---|---|---|---|
slides | StackedDeckSlide[] | 6 defaults | Each slide is { title, image, alt? }. |
background | string | "#0f0f0f" | Container background color. |
wheelThreshold | number | 100 | Accumulated wheel delta required to advance one step. |
stepCooldown | number | 1200 | Lockout in milliseconds between steps. |
className | string | — | Extra classes on the outer container. |