PixelTransition
Transición pixelada entre dos contenidos al hover.
- Código: RODD·AN·029
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/PixelTransition-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 |
|---|
| firstContent | ReactNode | string | — |
| secondContent | ReactNode | string | — |
| gridSize | number | 7 |
| pixelColor | string | currentColor |
| animationStepDuration | number | 0.3 |
| aspectRatio | string | "100%" |
| once | boolean | false |
| className | string | — |
| style | object | {} |
Otros efectos de animaciones
- 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.
- GooeySvgFilter — Filtro SVG que une elementos como gotas.