Crossfade Typewriter
Crossfade Typewriter is an animated text effect in the UI HUB animated text collection. A two-slot racing typewriter that cycles through ALL provided lines. Slot 0 holds the previous finished line dimmed at 30%; slot 1 types the current line bright with a blinking serif caret. On a full type the state machine holds, then swaps: the finished line becomes the dim previous and the next line starts typing.
The component is driven by 5 documented props (lines, speedMs, pauseMs, textClass, cursorColor), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: inline styles + scoped <style>; interval tick with ref state machine; N-line cycling.
Preview the animated text effect in the browser above, copy the source, and paste it into your project. Animated Text components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Crossfade Typewriter?
N-line crossfade typewriter: previous line dims while the next types, then swaps.
Crossfade Typewriter at a glance
- Category
- Animated Text
- Pricing
- Free to use
- Libraries
- React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 5
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Crossfade Typewriter works
A two-slot racing typewriter that cycles through ALL provided lines. Slot 0 holds the previous finished line dimmed at 30%; slot 1 types the current line bright with a blinking serif caret. On a full type the state machine holds, then swaps: the finished line becomes the dim previous and the next line starts typing. Length tracking lives in refs (no stale-closure bugs), charge pauses while the tab is hidden, and prefers-reduced-motion renders all lines statically.
Technical information for Crossfade Typewriter
| Category | Animated Text |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| State change | line N dim, line N+1 typing to full line holds, blink, then swap to the next line |
| Props | 5 configurable |
| Usage example | Not published yet |
What Crossfade Typewriter requires
- inline styles + scoped <style>
- interval tick with ref state machine
- N-line cycling
- reduced-motion static mode
Crossfade Typewriter questions
What is Crossfade Typewriter?
N-line crossfade typewriter: previous line dims while the next types, then swaps.
How does Crossfade Typewriter work?
A two-slot racing typewriter that cycles through ALL provided lines. Slot 0 holds the previous finished line dimmed at 30%; slot 1 types the current line bright with a blinking serif caret. On a full type the state machine holds, then swaps: the finished line becomes the dim previous and the next line starts typing. Length tracking lives in refs (no stale-closure bugs), charge pauses while the tab is hidden, and prefers-reduced-motion renders all lines statically.
Which category does Crossfade Typewriter belong to?
Crossfade Typewriter is listed under Animated Text in the UI HUB catalog. Typography effects that animate letterforms rather than fading a whole block: scramble reveals, rolling letters, random swaps, gradient fills, vaporising text and scroll-linked highlights. Every effect is scoped to a single text element, so you can apply it to a headline without restructuring the surrounding markup. Built for hero headings and section titles.
What does the lines prop do in Crossfade Typewriter?
Any number of lines cycled as a two-slot crossfade typewriter. It defaults to [].
What does the speedMs prop do in Crossfade Typewriter?
Milliseconds per typed/deleted character. It defaults to 90.
Is Crossfade Typewriter free to use?
Crossfade Typewriter is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Crossfade Typewriter use?
Crossfade Typewriter uses React and is styled with Tailwind CSS.
What does Crossfade Typewriter need to run?
Crossfade Typewriter needs inline styles + scoped <style>, interval tick with ref state machine, N-line cycling and reduced-motion static mode.