Typewriter — ARC UI

Components

Typewriter

typography

interactive

<arc-typewriter>

Overview

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

Use for critical content that users need to read immediately — the delay hides information
Run more than 2-3 typewriters simultaneously — it becomes chaotic
Set speed below 20ms — it looks like a flash, not typing
Use loop on long paragraphs — the constant reset is distracting
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
Public replay() method for manual restart
Dispatches arc-complete event when typing finishes
Inherits font from parent — works with any typography

Preview

Usage

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>
      <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

Prop	Type	Default	Description
`text`	`string`	`''`	The text to type out character by character
`speed`	`number`	`50`	Milliseconds per character
`delay`	`number`	`0`	Initial delay in milliseconds before typing starts
`cursor`	`boolean`	`true`	Show a blinking cursor during and after typing
`loop`	`boolean`	`false`	Loop the animation indefinitely
`pause-end`	`number`	`2000`	Milliseconds to pause at the end before looping

Events

Event	Description
`arc-complete`	Fired when the typing animation finishes revealing all characters

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight