StickerPeel
Pegatina que se despega de la esquina con sombra 3D.
- Código: RODD·AN·036
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/StickerPeel-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 |
|---|
| imageSrc | string | required |
| rotate | number | 30 |
| peelBackHoverPct | number | 30 |
| peelBackActivePct | number | 40 |
| peelDirection | number | 0 |
| peelEasing | string | power3.out |
| peelHoverEasing | string | power2.out |
| width | number | 200 |
| shadowIntensity | number | 0.6 |
| lightingIntensity | number | 0.1 |
| initialPosition | string | center |
| className | string | |
Otros efectos de animaciones
- BlobCursor — Cursor orgánico en forma de gota con inercia y morphing elástico.
- Crosshair — Cursor de mira con líneas que siguen al ratón y distorsionan enlaces.
- ElasticMesh — Superficie de malla elástica que se estira bajo el puntero.
- GlowCursor — Estela de luz por shader que sigue al puntero con pulso y brillo.
- ImageTrail — Estela de imágenes que sigue al cursor, con varias variantes.
- Magnet — Los elementos se sienten atraídos por el cursor y vuelven con muelle.