TypewriterText Typewriter Text

Neobrutalist-style typewriter effect text component that displays text character by character with a blinking cursor animation. Suitable for landing pages, welcome messages, code demonstrations, and similar scenarios.

Demo

Preview

基础用法

循环播放

尺寸与粗细

无光标

Installation

pnpm dlx brutx-vue@latest add typewriter-text

Usage

<script setup>
import { TypewriterText } from 'brutx-ui-vue'
</script>

<template>
    <TypewriterText
        text="Welcome to BrutxUI!"
        :speed="80"
        cursor
    />
</template>

Loop Playback

<template>
    <TypewriterText
        text="Continuous typing effect..."
        :speed="60"
        :delay="2000"
        loop
        cursor
    />
</template>

Event Listening

<script setup>
import { TypewriterText } from 'brutx-ui-vue'

function onStart() {
    console.log('Typing started')
}

function onComplete() {
    console.log('Typing completed')
}
</script>

<template>
    <TypewriterText
        text="Callback triggered after typing completes"
        :speed="80"
        @start="onStart"
        @complete="onComplete"
    />
</template>

Variants

Variant	CSS Class
normal	font-normal
medium	font-medium
bold	font-bold
black	font-black

Sizes

Size	CSS Class	Cursor Height
sm	text-sm	h-3
default	text-base	h-4
lg	text-lg	h-5
xl	text-xl	h-6
2xl	text-2xl	h-7

<template>
    <TypewriterText
        text="Large bold text"
        size="xl"
        weight="bold"
        :speed="100"
    />
</template>

API Reference

TypewriterText — Props

Name	Type	Default	Description
text Required	string	—	The full text to reveal one character at a time.
Details Declared type string Default value details Not declared — Source TypewriterText.vue:12 packages/ui/src/components/typewriter-text/TypewriterText.vue
speed	number | undefined	50	The delay between revealing characters, in milliseconds.
Details Declared type number | undefined Default value details Declaration 50 Source: packages/ui/src/components/typewriter-text/TypewriterText.vue Resolved value 50 Source TypewriterText.vue:14 packages/ui/src/components/typewriter-text/TypewriterText.vue
delay	number | undefined	0	The wait before typing begins; in loop mode it is also the delay before each restart.
Details Declared type number | undefined Default value details Declaration 0 Source: packages/ui/src/components/typewriter-text/TypewriterText.vue Resolved value 0 Source TypewriterText.vue:16 packages/ui/src/components/typewriter-text/TypewriterText.vue
loop	boolean | undefined	false	Repeats the typing animation after the text is fully displayed.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/typewriter-text/TypewriterText.vue Resolved value false Source TypewriterText.vue:18 packages/ui/src/components/typewriter-text/TypewriterText.vue
cursor	boolean | undefined	true	Shows the typing cursor; in non-loop mode it hides after typing completes.
Details Declared type boolean | undefined Literal values false true Default value details Declaration true Source: packages/ui/src/components/typewriter-text/TypewriterText.vue Resolved value true Source TypewriterText.vue:20 packages/ui/src/components/typewriter-text/TypewriterText.vue
size	"2xl" | "default" | "lg" | "sm" | "xl" | undefined	"default"	Sets the preset font size for the typed text.
Details Declared type NonNullable<"default" | "lg" | "sm" | "xl" | "2xl" | null | undefined> | undefined Literal values "2xl" "default" "lg" "sm" "xl" Default value details Declaration 'default' Source: packages/ui/src/components/typewriter-text/TypewriterText.vue Resolved value "default" Source TypewriterText.vue:22 packages/ui/src/components/typewriter-text/TypewriterText.vue
weight	"black" | "bold" | "medium" | "normal" | undefined	"normal"	Sets the font weight of the typed text.
Details Declared type NonNullable<"medium" | "bold" | "normal" | "black" | null | undefined> | undefined Literal values "black" "bold" "medium" "normal" Default value details Declaration 'normal' Source: packages/ui/src/components/typewriter-text/TypewriterText.vue Resolved value "normal" Source TypewriterText.vue:24 packages/ui/src/components/typewriter-text/TypewriterText.vue
class	string | undefined	undefined	Custom CSS classes added to the typed text root element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/typewriter-text/TypewriterText.vue Resolved value undefined Source TypewriterText.vue:26 packages/ui/src/components/typewriter-text/TypewriterText.vue

TypewriterText — Events

Name	Signature or type	Description
@complete	[]	Emits when one text pass completes; it fires after every pass in loop mode.
Details Declared type [] Source TypewriterText.vue packages/ui/src/components/typewriter-text/TypewriterText.vue
@start	[]	Emits when each typing pass begins.
Details Declared type [] Source TypewriterText.vue packages/ui/src/components/typewriter-text/TypewriterText.vue

Accessibility

• ARIA attributes: The component uses aria-live="polite" to ensure screen readers can detect text changes; the cursor uses aria-hidden="true" to mark it as a decorative element
• Motion reduction: When the user prefers prefers-reduced-motion: reduce, the full text is displayed immediately, skipping the animation; this preference responds to system setting changes in real time

FAQ

Q: What happens when the text prop changes?

A: When the text prop changes, the typing animation restarts.

Q: How are timers handled when the component is unmounted?

A: All timers (including typing timers and delay start timers) are automatically cleaned up when the component is unmounted to avoid memory leaks.

Q: What is the behavior in loop mode?

A: In loop mode, after typing completes, it waits for delay milliseconds before restarting.

Q: How do I customize styles?

A: The component root element always has the brutx-typewriter CSS class, which can be used for custom style overrides.