TextCursorProximity
Las letras reaccionan a la cercanía del cursor.
- Código: RODD·TX·065
- Familia: Tipografía
- Origen: Fancy Components (Daniel Petho) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://fancycomponents.dev/r/text-cursor-proximity.json"
Cuándo usarlo
Úsalas en titulares y mensajes clave. Una por pantalla: si todo se mueve, nada destaca.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| children | React.ReactNode | |
| as | ElementType | |
| styles | Partial<{ [K in keyof CSSPropertiesWithValues]: StyleValue<K> }> | |
| containerRef | React.RefObject<HTMLDivElement | null> | |
| radius | number | 50 |
| falloff | "linear" | "exponential" | "gaussian" | "linear" |
| className | unknown | |
Otros efectos de tipografía
- VariableFontAndCursor — Tipografía variable controlada por la posición del cursor.
- ASCIIText — Texto 3D renderizado como arte ASCII con ondas retro.
- ComicText — Texto con estilo de cómic que entra con rebote.
- DiaTextReveal — Una banda de color barre el texto antes de asentarse.
- FuzzyText — Texto vibrante con interferencia analógica controlable al hover.
- Letter3dSwap — Letras que giran en 3D para cambiar de texto.