Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Typewriter

Character-by-character text reveal animation with blinking cursor.

Components Typewriter
typography interactive
<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 simple `setTimeout` chain — no frame-sync overhead — making it lightweight and easy to reason about. 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. 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 — the 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
  • Public replay() method for manual restart
  • Fires `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>
      <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

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
nowrap boolean false
loop boolean false
Loop the animation indefinitely
pause-end number 2000
Milliseconds to pause at the end before looping

Events

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

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy