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.