Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip
ARC UI ARC Radiant Components
v4.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip

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. `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 — 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
  • `replay()` restarts the animation from the beginning, safe to call mid-type
  • Fires `arc-complete` event when typing finishes
  • Inherits font from parent — works with any typography

Preview

Usage

Typewriter is in the marketing domain group, so it is deliberately 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

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
pause-end number 2000
Milliseconds to pause at the end before looping
cursor boolean true
Show a blinking cursor during and after typing
loop boolean false
Loop the animation indefinitely
nowrap boolean false

Methods

replay()
Restart the typing animation from the beginning.

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