Magnetic Carousel
0
Used by 0Controls
Magnetic Carousel
Magnify a row of image bars macOS dock style as the cursor nears, then click any bar to expand it into a large square.
KEY FEATURES
- — macOS dock-style proximity magnification of image bars
- — Smoothstep distance falloff so neighbors taper by cursor distance
- — Continuous JS easing loop for smooth cursor tracking
- — Click a bar to expand it into a large adjustable square
- — Backdrop click or re-click to collapse the open bar
- — Blur and dim inactive bars while one is open
- — Adjustable magnify range controlling proximity influence
- — Separate collapsed and hover width and height sizing
- — Configurable gap between bars
- — Framer transition control for open, close, and blur
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
images
array
[...]
List of images whose sources fill each bar in the row.
collapsedWidth
number
100
Resting width of each bar in pixels before magnifying.
hoverWidth
number
200
Max width a bar reaches when the cursor is right over it.
collapsedHeight
number
340
Resting height of each bar in pixels before magnifying.
hoverHeight
number
400
Max height a bar reaches when the cursor is right over it.
openSize
number
600
Width and height of a bar once clicked open into a square.
gap
number
16
Spacing in pixels between adjacent bars in the row.
influence
number
200
Cursor distance in pixels over which bars magnify; higher widens the effect.
blur
number
2
Blur in pixels applied to the other bars when one is open.
transition
transition
{"..."}
Timing and easing of the open, close, and blur animations.
