BreathingText
Texto que “respira” cambiando su peso.
- Código: RODD·TX·038
- Familia: Tipografía
- Origen: Fancy Components (Daniel Petho) · Licencia MIT
Cómo instalarlo
npx shadcn@latest add "https://fancycomponents.dev/r/breathing-text.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 | "span" |
| fromFontVariationSettings | string | |
| toFontVariationSettings | string | |
| transition | Transition | {
duration: 1.5,
ease: "easeInOut",
} |
| staggerDuration | number | 0.1 |
| staggerFrom | "first" | "last" | "center" | number | "first" |
| repeatDelay | number | 0.1 |
| className | unknown | |
Otros efectos de tipografía
- DepthText — Tipografía extruida en capas con parallax 3D.
- FoldText — Las líneas se despliegan como papel doblado que se abre.
- Highlighter — Subrayado dibujado a mano sobre el texto.
- ParticleText — El texto se forma a partir de partículas que se dispersan y reagrupan.
- ScrollFloat — Las letras flotan hacia su posición al hacer scroll.
- SparklesText — Texto con destellos que aparecen alrededor.