Cubes

Rejilla de cubos 3D que se inclinan hacia el cursor.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/Cubes-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
gridSize	number	10
cubeSize	number	undefined
maxAngle	number	45
radius	number	3
easing	string	'power3.out'
duration	object	{ enter: 0.3, leave: 0.6 }
cellGap	number \| object	undefined
borderStyle	string	'1px solid #fff'
faceColor	string	'#120F17'
shadow	boolean \| string	false
autoAnimate	boolean	true
rippleOnClick	boolean	true
rippleColor	string	'#fff'
rippleSpeed	number	2

Otros efectos de animaciones

FadeContent — Envoltorio de fundido con desenfoque al entrar en pantalla.
GradualBlur — Desenfoque progresivo en capas para bordes cinematográficos.
Lens — Lupa que amplía imágenes o vídeos al pasar el ratón.
MetaBalls — Metabolas líquidas que se fusionan y separan.
ParallaxFloating — Imágenes flotantes con parallax al mover el ratón.
Screensaver — Elementos que rebotan por la pantalla como un salvapantallas.