ElasticLine
Línea elástica que se estira con el ratón.
- Código: RODD·AN·045
- Familia: Animaciones
- Origen: Fancy Components (Daniel Petho) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://fancycomponents.dev/r/elastic-line.json"
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 |
|---|
| isVertical | boolean | false |
| grabThreshold | number | 5 |
| releaseThreshold | number | 100 |
| strokeWidth | number | 1 |
| transition | unknown | {
type: "spring",
stiffness: 300,
damping: 5,
} |
| animateInTransition | unknown | {
duration: 0.3,
ease: "easeInOut",
} |
| className | unknown | |
Otros efectos de animaciones
- 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.
- OrbitImages — Imágenes que orbitan siguiendo una trayectoria SVG.
- PixelTransition — Transición pixelada entre dos contenidos al hover.
- ShineBorder — Borde con un brillo de degradado animado.