Characters land one by one, hold, then erase into the next phrase. Use a single text, or pass texts with loop.
48ms
28ms
1400ms
tsx
"use client"import { useState } from "react"import { Typing } from "@/components/motion/typing"import { Button } from "@/components/ui/button"const TEXTS = [ "Quiet motion, typed out.", "Compose freely.", "Ship quieter UI."]export function Example() { const [play, setPlay] = useState(0) return ( <div className="flex flex-col items-center gap-6"> <Typing texts={TEXTS} play={play} loop speed={48} deleteSpeed={28} pause={1400} className="text-2xl font-medium tracking-wide text-foreground sm:text-3xl" /> <Button variant="outline" onClick={() => setPlay((n) => n + 1)}> Replay </Button> </div> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add typingUsage
import { Typing } from "@/components/motion/typing"<Typing texts={["Quiet motion, typed out.", "Compose freely.", "Ship quieter UI."]} loop/>API Reference
Typing
| Prop | Type | Default |
|---|---|---|
| text | string | "" |
| texts | string[] | — |
| play | number | 0 |
| speed | number | 48 |
| deleteSpeed | number | 28 |
| pause | number | 1400 |
| loop | boolean | false |
| cursor | boolean | true |
| className | string | — |
Also accepts the other native span attributes. speed, deleteSpeed, and pause are in milliseconds. Bump play to restart.