Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
fan-stack-slider-demo
import { FanStackSlider } from "@/registry/tween/fan-stack-slider"
export function FanStackSliderDemo() {
return <FanStackSlider />
}
Installation
Usage
import { FanStackSlider } from "@/components/ui/fan-stack-slider"<FanStackSlider
images={[
"https://images.unsplash.com/photo-1601894341243-22ea67386678?q=80&w=1500&h=1000&fit=crop&crop=faces,center&auto=format",
"https://images.unsplash.com/photo-1587835526880-c3065417ee7d?q=80&w=1500&h=1000&fit=crop&crop=faces,center&auto=format",
"https://images.unsplash.com/photo-1561460792-5fbec15c79da?q=80&w=1500&h=1000&fit=crop&crop=faces,center&auto=format",
]}
/>How it works
- A fixed pool of
visibleSlidesLeft + visibleSlidesRight + 2slides is recycled. Each slide's offset from the current position is wrapped, and its image is swapped as it wraps around, so the stack is infinite. - Every step away from the active slide adds
offsetStepxPercent,rotationStepdegrees,scaleStepshrink,blurSteppx of blur andbrightnessStepdimming. - Wheel and touch input (on the component only) move a target position; a GSAP ticker lerps toward it with
smoothing. - After
snapDelayms of no input, the target snaps to the next slide if you moved pastswapThreshold, otherwise back. - Z-index flips based on travel direction so the outgoing slide passes over the stack.
- With
prefers-reduced-motion: reduce, the stack is shown at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | 10 defaults | Image URLs cycled through the stack. |
visibleSlidesRight | number | 12 | Slides visible behind the active slide. |
visibleSlidesLeft | number | 2 | Slides visible after they pass. |
offsetStep | number | 12 | xPercent offset per step. |
rotationStep | number | -7 | Rotation in degrees per step. |
scaleStep | number | 0.05 | Scale reduction per step. |
blurStep | number | 0.25 | Blur in px per step. |
brightnessStep | number | 0.1 | Brightness reduction per step. |
minBrightness | number | 0.25 | Lowest brightness a slide can reach. |
wheelSensitivity | number | 0.005 | Slides moved per pixel of wheel delta. |
touchSensitivity | number | 0.0075 | Slides moved per pixel of touch drag. |
maxWheelDelta | number | 200 | Clamp for a single wheel event. |
smoothing | number | 0.075 | Lerp factor toward the target. |
snapDelay | number | 250 | ms of inactivity before snapping. |
swapThreshold | number | 0.5 | Fraction of a slide needed to advance on snap. |
background | string | "#0b0b0a" | Section and slide frame color. |
className | string | — | Extra classes on the outer section. |