Components

Typewriter

Types and deletes a cycling list of words — for hero headlines and taglines.

php artisan blatui:add typewriter

We help you design, build, ship faster.

<p class="text-2xl font-semibold tracking-tight">
    We help you <x-ui.typewriter :words="['design', 'build', 'ship']" class="text-primary" /> faster.
</p>

Custom

I'm a developer, designer, maker

{{-- Tune the speeds; pass :cursor="false" to hide the caret, :loop="false" to stop on the last word. --}}
<p class="text-xl">
    I'm a <x-ui.typewriter
        :words="['developer', 'designer', 'maker']"
        :type-speed="70"
        :delete-speed="35"
        class="text-primary font-semibold"
    />
</p>

API Reference

Props, slots and exposed methods for <x-ui.typewriter>.

Props

Prop	Type	Default	Description
`words`	`array`	`[]`	The phrases to type and delete in a cycle. When empty, the trimmed slot text is used as the single word.
`typeSpeed`	`int`	`90`	Milliseconds per typed character.
`deleteSpeed`	`int`	`40`	Milliseconds per deleted character.
`pause`	`int`	`1600`	Milliseconds to hold a fully typed word before deleting it.
`loop`	`bool`	`true`	Cycle through the words forever. When false, typing stops on the last word.
`cursor`	`bool`	`true`	Show the blinking caret next to the text.

Slots

Slot	Description
`default`	Fallback text used as the single word when words is empty. The animated text is aria-hidden and a visually-hidden span carries the full word list, so assistive tech reads the content once. Shows the first word statically under prefers-reduced-motion.