UnderlineToBackground
Subrayado que se convierte en fondo al hover.
- Código: RODD·TX·071
- Familia: Tipografía
- Origen: Fancy Components (Daniel Petho) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://fancycomponents.dev/r/underline-to-background.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 | |
| className | string | |
| transition | ValueAnimationTransition | { type: "spring", damping: 30, stiffness: 300 } |
| targetTextColor | string | "#fef" |
| underlineHeightRatio | number | 0.1 |
| underlinePaddingRatio | number | 0.01 |
Otros efectos de tipografía
- 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.
- RotatingText — Rota entre varias frases con transiciones de muelle.