'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
EfectosAlea Pro
Efectos de texto
Brillo (lineal u orgánico), texto que se revuelve, máquina de escribir, palabras que rotan, un resaltador que se dibuja detrás de una frase, palabras que se iluminan al hacer scroll, y títulos bañados de aurora.
import { ShimmerText, ScrambleText, Typewriter, RotatingText, Highlighter, ScrollTextReveal, AuroraText } from '@alea/pro';
Ejemplos
Efectos de texto
Brillo, texto que se revuelve, máquina de escribir y palabras que rotan. Los lectores de pantalla reciben el texto real una vez.
Motion with meaning
DECODED IN PLACE
Build dashboards
Make it fast, accessible, yours
Resaltador, revelado con scroll y texto aurora
Marca la frase que importa, ilumina palabras mientras se lee, o baña un título de color.
Alea Pro
Motion that explains what changed, not decoration.
Thinking about your request…
Every animation in Alea is one of the named patterns, built from motion tokens, so a whole product moves the same way and you can tune it in one place.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-accent-second…--alea-text…
Motion
--alea-motion-ease-in-out…
Component
--alea-shimmer-duration…
Props
ShimmerText props
Texto con una luz que lo recorre (un degradado a través del texto).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'span' | |
className | string | - | |
duration | number | 2.4 | |
variant | "line" | "organic" | 'line' |
ScrambleText props
Texto que se decodifica desde caracteres aleatorios hasta su lugar, una vez al montarse (y con hover con replayOnHover). Los lectores de pantalla reciben el texto real.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
textobligatoria | string | - | |
as | ElementType | 'span' | |
className | string | - | |
duration | number | 700 | |
replayOnHover | boolean | - |
Typewriter props
Escribe frases una tras otra, borrando entre ellas, con un cursor. Los lectores de pantalla reciben solo la primera frase (sin ruido).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
phrasesobligatoria | string[] | - | |
as | ElementType | 'span' | |
className | string | - | |
loop | boolean | true | |
pause | number | 1400 | |
speed | number | 55 |
RotatingText props
Una palabra que rota entre opciones en su lugar, con el patrón swap (fundido con desenfoque).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
wordsobligatoria | string[] | - | |
as | ElementType | 'span' | |
className | string | - | |
interval | number | 2200 |
Highlighter props
Un marcador que se dibuja detrás de palabras cuando aparecen en pantalla: para la frase que importa en un párrafo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | |
color | string | - |
ScrollTextReveal props
Un párrafo cuyas palabras se iluminan mientras haces scroll: para una afirmación que quieres que se lea despacio. Texto simple sin JavaScript o con movimiento reducido.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
textobligatoria | string | - | |
as | ElementType | 'p' | |
className | string | - |
AuroraText props
Texto cuyos baños de degradado giran lentamente sobre las letras: un título premium. Legible en todo momento.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'span' | |
className | string | - | |
style | CSSProperties | - |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
ShimmerText
- Variantes
variantlineorganic- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-shimmer-text- Atributos data
data-variant=organic
ScrambleText
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-scramble
Typewriter
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-typewriter- Atributos data
data-caret
RotatingText
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-rotating.alea-rotating-word
Highlighter
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-highlighter- Atributos data
data-in
ScrollTextReveal
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-scroll-text- Atributos data
data-on
AuroraText
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-aurora-text
Accesibilidad
- Los lectores de pantalla reciben el texto real una vez, nunca los cuadros.
- Con movimiento reducido: el brillo es texto simple, la máquina de escribir muestra la primera frase, las palabras dejan de rotar.
Qué hacer y qué evitar
Hacer
- Usa un efecto de texto por vista, en un titular corto.
Evitar
- No animes el cuerpo del texto ni nada que haya que leer rápido.