Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
orbit-cylinder-slider-demo
Velvet Pause
import { OrbitCylinderSlider } from "@/registry/tween/orbit-cylinder-slider"
export function OrbitCylinderSliderDemo() {
return <OrbitCylinderSlider />
}
Installation
Usage
import { OrbitCylinderSlider } from "@/components/ui/orbit-cylinder-slider"<OrbitCylinderSlider
slides={[
{ src: "/portraits/velvet-pause.jpg", title: "Velvet Pause" },
{ src: "/portraits/chalk-light.jpg", title: "Chalk Light", alt: "..." },
// ...
]}
/>How it works
- Each panel is placed with
rotateY(i * 360 / n) translateZ(radius), forming a cylinder inside apreserve-3dorbit. - The mouse wheel (on the component only) pushes a target rotation; a
requestAnimationFrameloop lerps the orbit toward it. - The large preview sits in the middle of the orbit and is counter-rotated so it always faces the viewer. Its image and the title tag switch to whichever slide is nearest the front.
- Moving the mouse tilts the whole stage up to
maxTiltdegrees; leaving resets it. - The stage scales down on narrow containers so the cylinder always fits.
- With
prefers-reduced-motion: reduce, the cylinder is shown at rest with the first slide.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
slides | OrbitCylinderSlide[] | 10 portraits | Each slide is { src, title, alt? }. |
radius | number | 400 | Cylinder radius in px at full scale. |
wheelSpeed | number | 0.2 | Degrees of rotation per pixel of wheel. |
maxTilt | number | 30 | Maximum mouse tilt in degrees. |
smoothing | number | 0.05 | Lerp factor for rotation and tilt. |
background | string | "#eaeaea" | Section background color. |
className | string | — | Extra classes on the outer section. |