'/%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}
EffectsAlea Pro
Text effects
Shimmer (line or organic), scramble, typewriter, rotating words, a highlighter that draws behind a phrase, words that light up as you scroll, and aurora-washed titles.
import { ShimmerText, ScrambleText, Typewriter, RotatingText, Highlighter, ScrollTextReveal, AuroraText } from '@alea/pro';
Examples
Text effects
Shimmer, scramble, typewriter and rotating words. Screen readers get the real text once.
Motion with meaning
DECODED IN PLACE
Build dashboards
Make it fast, accessible, yours
Highlighter, scroll reveal and aurora text
Mark the phrase that matters, light words as people read, or wash a title with 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
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent…--alea-accent-second…--alea-text…
Motion
--alea-motion-ease-in-out…
Component
--alea-shimmer-duration…
Props
ShimmerText props
Text with a light that sweeps across it (a gradient through the text).
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'span' | |
className | string | - | |
duration | number | 2.4 | |
variant | "line" | "organic" | 'line' |
ScrambleText props
Text that decodes from random characters into place, once on mount (and on hover with replayOnHover). Screen readers get the real text.
| Prop | Type | Default | Description |
|---|---|---|---|
textrequired | string | - | |
as | ElementType | 'span' | |
className | string | - | |
duration | number | 700 | |
replayOnHover | boolean | - |
Typewriter props
Types phrases one after another, deleting between them, with a caret. Screen readers get the first phrase only (no chatter).
| Prop | Type | Default | Description |
|---|---|---|---|
phrasesrequired | string[] | - | |
as | ElementType | 'span' | |
className | string | - | |
loop | boolean | true | |
pause | number | 1400 | |
speed | number | 55 |
RotatingText props
One word that rotates through options in place, with the swap pattern (blur crossfade).
| Prop | Type | Default | Description |
|---|---|---|---|
wordsrequired | string[] | - | |
as | ElementType | 'span' | |
className | string | - | |
interval | number | 2200 |
Highlighter props
A marker that draws behind words when they come into view: for the one phrase that matters in a paragraph.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | |
color | string | - |
ScrollTextReveal props
A paragraph whose words light up as you scroll through it: for a statement you want read slowly. Plain text without JavaScript or with reduced motion.
| Prop | Type | Default | Description |
|---|---|---|---|
textrequired | string | - | |
as | ElementType | 'p' | |
className | string | - |
AuroraText props
Text whose gradient washes orbit the letters slowly: a premium title. Readable at every moment.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'span' | |
className | string | - | |
style | CSSProperties | - |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
ShimmerText
- Variants
variantlineorganic- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-shimmer-text- Data attributes
data-variant=organic
ScrambleText
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-scramble
Typewriter
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-typewriter- Data attributes
data-caret
RotatingText
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-rotating.alea-rotating-word
Highlighter
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-highlighter- Data attributes
data-in
ScrollTextReveal
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-scroll-text- Data attributes
data-on
AuroraText
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-aurora-text
Accessibility
- Screen readers get the real text once, never the frames.
- With reduced motion: shimmer is plain text, the typewriter shows the first phrase, words stop rotating.
Do and don't
Do
- Use one text effect per view, on a short headline.
Don't
- Don't animate body text or anything people need to read quickly.