An endlessly looping 3D helix of images with customizable motion, depth, spacing and interaction.
Pick an animation mode to drive the spiral by itself, by dragging, by page scroll, or all three. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
items | (string | SpiralItem)[] | [] | Images shown in the spiral. Objects may also include alt, href, target, label and id. |
speed | number | 0.55 | Automatic travel speed in cards per second and the sensitivity of scroll-controlled motion. |
direction | "up" | "down" | "up" | Vertical travel direction. |
animationMode | "auto" | "drag" | "scroll" | "all" | "auto" | Selects automatic motion, pointer dragging, page-scroll control or all interactions. |
radius | number | 170 | Depth radius of the helix in pixels. |
cardWidth | number | 100 | Card width in pixels. |
cardHeight | number | 100 | Card height in pixels. |
verticalSpacing | number | 60 | Vertical distance between neighboring cards. |
perspective | number | 1000 | CSS perspective applied to the 3D stage. |
cardsPerTurn | number | 7 | Number of cards used for one complete revolution. |
rotation | number | 0 | Global angular offset in degrees. |
cardTilt | number | 0 | Additional clockwise card tilt in degrees. |
cardRadius | number | 10 | Card corner radius in pixels. |
centerScale | number | 1.2 | Scale multiplier for cards nearest the center. |
edgeFade | number | 0.3 | Fraction of the outer travel range used for fading. |
edgeBlur | number | 6 | Maximum blur applied near the edges. |
pauseOnHover | boolean | true | Smoothly eases automatic motion to a stop while the gallery is hovered. |
imageFit | "cover" | "contain" | "cover" | Object fit used by every image. |
grayscale | number | 0 | Grayscale amount applied to every image, from 0 to 1. |
Keyboard shortcuts and ARIA behavior.
