Typewriter
Character-by-character text reveal animation with blinking cursor.
<arc-typewriter>Overview
Typewriter reveals text one character at a time, recreating the classic typewriter effect used in hero headlines, onboarding sequences, and conversational UI. The animation is driven by a setTimeout chain, with no frame-sync overhead.
The speed prop controls milliseconds per character (default 50ms, roughly 20 characters per second), and an optional delay defers the start for staggered or sequenced reveals. When loop is enabled, the text clears after a configurable pause-end duration (default 2s) and replays indefinitely, useful for rotating taglines or feature highlights.
replay() restarts the animation from the beginning, which is the method behind a "watch again" control and the way to re-trigger a one-shot reveal after the content around it changes. It restarts the same sequence rather than queueing a second one, so calling it mid-type is safe.
A blinking cursor (the classic | caret) appears by default and automatically fades out once typing completes. The cursor color follows --accent-primary, so it adapts to any theme. When prefers-reduced-motion is active, the full text is shown immediately with no animation, so content is never hidden from users who need reduced motion.
Guidelines
When to use
- Use in hero sections and landing pages for dramatic text reveals
- Set speed between 30-80ms for natural-feeling typing
- Use delay to stagger multiple typewriters in sequence
- Enable loop for rotating taglines or feature highlights
- Pair with a static heading. Typewriter text should be supplementary, not the only content
When not to use
- Do not use for critical content that users need to read immediately. The delay hides information
- Do not run more than 2-3 typewriters simultaneously. It becomes chaotic
- Do not set speed below 20ms. It looks like a flash, not typing
- Do not use loop on long paragraphs. The constant reset is distracting
- Do not rely on the typewriter for the only instance of important text. Screen readers see it all at once
Features
- Character-by-character text reveal with configurable speed
- Optional initial delay for sequenced or staggered animations
- Blinking cursor that fades out on completion
- Loop mode with configurable pause between cycles
- Respects `prefers-reduced-motion`: shows full text immediately
- `replay()` restarts the animation from the beginning, safe to call mid-type
- Fires `arc-complete` event when typing finishes
- Inherits font from parent, so it works with any typography
Preview
Usage
Typewriter is in the marketing domain group, so it is absent from the default @arclux/arc-ui barrel. Import it from@arclux/arc-ui/marketing, or from its own subpath@arclux/arc-ui/typewriter. Everything else (the element, the CSS, the framework wrappers, the support it gets) is unchanged.
This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.
<!-- Simple typewriter -->
<arc-typewriter text="Welcome to the future of UI." speed="60" cursor></arc-typewriter>
<!-- With delay and loop -->
<arc-typewriter
text="Build faster. Ship sooner."
speed="40"
delay="500"
loop
pause-end="3000"
></arc-typewriter>
<!-- No cursor -->
<arc-typewriter text="Clean and simple." cursor="false"></arc-typewriter>import { Typewriter } from '@arclux/arc-ui-react';
function Hero() {
return (
<div>
<h1>
<Typewriter
text="Welcome to the future of UI."
speed={60}
cursor
onArcComplete={() => console.log('done')}
/>
</h1>
<Typewriter
text="Build faster. Ship sooner."
speed={40}
delay={1800}
loop
pauseEnd={3000}
/>
</div>
);
}<script setup>
import { Typewriter } from '@arclux/arc-ui-vue';
function onComplete() {
console.log('Typing finished');
}
</script>
<template>
<h1>
<Typewriter
text="Welcome to the future of UI."
:speed="60"
cursor
@arc-complete="onComplete"
/>
</h1>
</template><script>
import { Typewriter } from '@arclux/arc-ui-svelte';
</script>
<h1>
<Typewriter
text="Welcome to the future of UI."
speed={60}
cursor
on:arc-complete={() => console.log('done')}
/>
</h1>import { Component } from '@angular/core';
import { Typewriter } from '@arclux/arc-ui-angular';
@Component({
imports: [Typewriter],
template: `
<h1>
<arc-typewriter
text="Welcome to the future of UI."
[speed]="60"
cursor
(arcComplete)="onComplete()"
/>
</h1>
`,
})
export class HeroComponent {
onComplete() {
console.log('Typing finished');
}
}import { Typewriter } from '@arclux/arc-ui-solid';
function Hero() {
return (
<h1>
<Typewriter
text="Welcome to the future of UI."
speed={60}
cursor
/>
</h1>
);
}import { Typewriter } from '@arclux/arc-ui-preact';
function Hero() {
return (
<h1>
<Typewriter
text="Welcome to the future of UI."
speed={60}
cursor
/>
</h1>
);
}API
textstring''- The text to type out character by character
speednumber50- Milliseconds per character
delaynumber0- Initial delay in milliseconds before typing starts
pause-endnumber2000- Milliseconds to pause at the end before looping
cursorbooleantrue- Show a blinking cursor during and after typing
loopbooleanfalse- Loop the animation indefinitely
nowrapbooleanfalse
Methods
replay()- Restart the typing animation from the beginning.
Events
arc-complete- Fired when the typing animation finishes revealing all characters