Orbit Images
Images circle a center on a tilted ring. The ones in front grow and sit on top, the ones behind shrink and dim.
import { OrbitImages } from "pleate/effects/orbit-images";Ring
Hover to pause.
8 places
Props
- images
Images on the ring.
{ src, alt }[]- radius
Ring radius (px).
numberdefault 140- tilt
Vertical squash, 0 to 1.
numberdefault 0.35- itemSize
Image size (px).
numberdefault 64- duration
Seconds per turn; negative reverses.
numberdefault 24- pauseOnHover
Stop under the pointer.
booleandefault true- children
Content in the middle.
ReactNode
Accessibility
- Every image keeps its alt text.
- Reduced motion keeps the ring still.