OrbitImages

Imágenes que orbitan siguiendo una trayectoria SVG.

Código: RODD·AN·026
Familia: Animaciones
Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/OrbitImages-TS-TW

Cuándo usarlo

Refuerzan una interacción concreta: un CTA, una tarjeta, un cursor. Nunca decoran por decorar.

Props para personalizarlo

Prop	Tipo	Por defecto
images	string[]	[]
altPrefix	string	"Orbiting image"
shape	string	"ellipse"
customPath	string	undefined
baseWidth	number	1400
radiusX	number	700
radiusY	number	170
radius	number	300
starPoints	number	5
starInnerRatio	number	0.5
rotation	number	-8
duration	number	40
itemSize	number	64
direction	string	"normal"
fill	boolean	true
width	number \| "100%"	100
height	number \| "auto"	100
className	string	""
showPath	boolean	false
pathColor	string	"rgba(0,0,0,0.1)"
pathWidth	number	2
easing	string	"linear"
paused	boolean	false
centerContent	ReactNode	undefined
responsive	boolean	false

Otros efectos de animaciones

RippleDistortion — Distorsión de agua que deja una estela al pasar el puntero.
SmoothCursor — Cursor con física de muelle que gira según la dirección.
SwarmCursor — Enjambre de partículas que persigue al cursor.
BorderBeam — Haz de luz que recorre el borde de un contenedor.
Cubes — Rejilla de cubos 3D que se inclinan hacia el cursor.
ElectricBorder — Borde eléctrico con arcos de energía y brillo ajustable.