Animaciones de texto para web: efectos en React y CSS

Animaciones de texto: entradas, destellos, descifrados y tipografía variable.

Cuándo usarlas: Úsalas en titulares y mensajes clave. Una por pantalla: si todo se mueve, nada destaca.

• ASCIIText — Texto 3D renderizado como arte ASCII con ondas retro.
• AuroraText — Texto relleno con una aurora de colores animada.
• BlurText — Las palabras emergen del desenfoque hasta quedar nítidas.
• BreathingText — Texto que “respira” cambiando su peso.
• CircularText — Texto en órbita circular que acelera o se detiene al pasar el ratón.
• ComicText — Texto con estilo de cómic que entra con rebote.
• CountUp — Contador animado con separadores y decimales, ideal para métricas.
• CurvedLoop — Marquesina que fluye sobre una curva y se puede arrastrar.
• DecryptedText — Descifrado estilo hacker: glifos aleatorios hasta revelar el texto.
• DepthText — Tipografía extruida en capas con parallax 3D.
• DiaTextReveal — Una banda de color barre el texto antes de asentarse.
• DockText — Letras con magnificación tipo dock.
• EchoText — Copias fantasma siguen al texto hasta fundirse en una sola palabra.
• FallingText — Las palabras caen con gravedad y rebotan con física real.
• FoldText — Las líneas se despliegan como papel doblado que se abre.
• FuzzyText — Texto vibrante con interferencia analógica controlable al hover.
• GlitchText — Glitch RGB con separación de canales y temblor.
• GradientText — Degradado animado que recorre el texto en vivo.
• GradualSpacingText — Las letras se separan hasta su espaciado final.
• Highlighter — Subrayado dibujado a mano sobre el texto.
• Letter3dSwap — Letras que giran en 3D para cambiar de texto.
• LineShadowText — Texto con una sombra de líneas en movimiento.
• MaskedHeading — Titular gigante con imagen o malla de color vista a través de las letras.
• MorphingText — Palabras que se funden unas en otras.
• ParticleText — El texto se forma a partir de partículas que se dispersan y reagrupan.
• RotatingText — Rota entre varias frases con transiciones de muelle.
• ScaleLetterText — Las letras crecen al pasar el ratón.
• ScrambledText — Las letras cercanas al cursor se revuelven y vuelven a su sitio.
• ScrollAndSwapText — Texto que cambia de letras al hacer scroll.
• ScrollFloat — Las letras flotan hacia su posición al hacer scroll.
• ScrollReveal — El texto se desenfoca y revela palabra a palabra con el scroll.
• ScrollVelocity — Marquesina cuya velocidad depende de lo rápido que hagas scroll.
• ShinyText — Destello metálico que recorre el texto como un reflejo.
• Shuffle — Las letras barajan su posición antes de asentarse.
• SparklesText — Texto con destellos que aparecen alrededor.
• SplitFlapText — Panel de aeropuerto split-flap que cambia de frase con clacks mecánicos.
• SplitText — Divide el texto en letras o palabras para una entrada escalonada.
• StrokeText — Las letras se dibujan con trazo y después se rellenan.
• TextAlongPath — Texto que sigue un trazado curvo.
• TextAnimate — Texto con varias animaciones de entrada (fade, blur, slide…).
• TextCursor — Un texto que sigue al cursor dejando una estela de copias.
• TextCursorProximity — Las letras reaccionan a la cercanía del cursor.
• TextLoop — Marquesina continua que fluye por trayectorias SVG curvas.
• TextPressure — Tipografía variable que se ensancha y engorda según la cercanía del cursor.
• TextType — Máquina de escribir con cursor parpadeante y ritmo ajustable.
• TrueFocus — Un visor de enfoque salta entre palabras desenfocando el resto.
• UnderlineToBackground — Subrayado que se convierte en fondo al hover.
• VariableFontAndCursor — Tipografía variable controlada por la posición del cursor.
• VariableProximity — El peso de cada letra cambia según la distancia al puntero.
• VerticalCutReveal — Texto que se revela con un corte vertical.
• WarpText — Distorsión WebGL que dobla y refracta el texto alrededor del puntero.
• WavyText — Texto que entra con una ola.