Looping typewriter with glitch ticks and a blinking cursor.
npx shadcn@latest add @iconiq/typewriter"use client";
import TextTypewriter from "@/components/ui/typewriter";
export function TerminalHeadline() {
return (
<TextTypewriter
className="font-mono text-2xl text-foreground sm:text-4xl"
duration={2.6}
>
Deploying interface motion
</TextTypewriter>
);
}childrenThe text content to type. The component expects a single string because the animation advances through each character in order.
Type string
classNameMerged onto the root wrapper for local typography, color, spacing, or alignment classes.
Type string
durationScales the scheduled typing and glitch delays. Lower values make each pass faster; higher values slow the sequence down.
Type number·Default 3
The animation schedules a small sequence of per-character timeouts, occasionally inserts a wrong character, removes it, then types the intended character before continuing.
After the full string is typed, the cursor briefly returns and the sequence starts again from an empty string.
Spaces are typed directly without the wrong-character substitution, which keeps word breaks stable during the effect.
Unmount cleanup clears every pending timeout, so remounting the preview or leaving the page does not leave animation work behind.
Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.
Dependencies: motion.
Contact
Additionally, if you find any bug or issue, feel free to raise an issue.