Spin Image
0
Used by 0Controls
Spin Image
Orbit a set of images along a tilted 3D ellipse with continuous spin, depth-based scaling, and front-to-back layering.
KEY FEATURES
- — Orbit up to 30 images along an elliptical path
- — Clockwise or anticlockwise spin direction
- — Curved path with depth scaling or uniform straight path
- — Independent X and Y curve angles tilt the orbit in 3D
- — Adjustable spin speed from fully static to fast
- — Per-image width and height sizing
- — Rounded corner control from square to circle
- — Orbit width set in pixels or percent of canvas
- — Depth-based z-index so images pass in front and behind
- — Responsive layout that tracks container resizes
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
images
array
[...]
Image sources that orbit along the ellipse; up to 30 are shown.
imageWidth
number
150
Width of each orbiting image in pixels.
imageHeight
number
150
Height of each orbiting image in pixels.
direction
enum
anticlockwise
Spin direction of the orbit: clockwise or anticlockwise.
path
enum
curved
Curved scales images by depth for perspective; straight keeps them uniform.
xCurve
number
-90
Tilts the orbit around the vertical axis; +90 swings the left edge forward.
yCurve
number
-90
Tilts the orbit around the horizontal axis; +90 swings the top forward.
rounded
number
3
Corner rounding of images; 0 is square and 20 rounds a square into a circle.
orbitUnit
enum
%
Unit for the orbit width: fixed pixels or percent of canvas width.
orbitWidthPx
number
600
Orbit diameter in pixels, used when the unit is set to px.
orbitWidthPct
number
60
Orbit diameter as a percent of canvas width, used when the unit is %.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
speed
number
3
Rotation speed of the orbit; 0 freezes it and higher spins faster.
