A terminal that plays a session on view: commands type with a human rhythm, output prints and spinners resolve into ticks, then it offers a replay.
$ npx create-acme-app@latest Creating a new Acme app in ./acme ✓ Installed 214 packages in 3.2s $ npm run dev ▲ Ready on http://localhost:3000
Customize
Usage
import { AnimatedTerminal } from "@/components/motionkit/animated-terminal";
<AnimatedTerminal
lines={[
{ command: "npx create-acme-app@latest" },
{ output: "Creating a new Acme app in ./acme", tone: "muted" },
{ spinner: "Installing dependencies", done: "Installed 214 packages in 3.2s", duration: 1.6 },
{ command: "npm run dev" },
{ output: "▲ Ready on http://localhost:3000", tone: "success" },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Typing
Scrolls into view
Spinner
A long-running step
Caret blink
Session finished
Developer tool and CLI landing pages, README-style heroes, docs that show what a command prints, and changelogs announcing a new command.
The session is a list of lines: commands, output and spinners. Once the terminal is properly in view, a single effect schedules one timeout at a time. Commands advance a character at a time, with delays varied by an integer hash so the rhythm feels human but is identical on every run; output prints after a short beat; spinners cycle braille frames for their duration, then become a tick and their done text. It ends on a blinking caret, and Replay resets the two counters that drive it. Screen readers get the whole transcript at once.
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | TerminalLine[] | — | Commands ({ command }), output ({ output, tone }) and spinners ({ spinner, done, duration }). |
| title | string | "zsh" | Shown in the title bar. |
| prompt | string | "$" | Printed before each command. |
| typeSpeed | number | 45 | Average milliseconds per typed character. |
| replay | boolean | true | Offer a replay button when finished. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/animated-terminal. It saves the file to components/motionkit and installs its dependencies.
Animated Terminal is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the finished session shows straight away and the caret doesn't blink.
$ npx create-acme-app@latest Creating a new Acme app in ./acme ✓ Installed 214 packages in 3.2s $ npm run dev ▲ Ready on http://localhost:3000
Customize
Usage
import { AnimatedTerminal } from "@/components/motionkit/animated-terminal";
<AnimatedTerminal
lines={[
{ command: "npx create-acme-app@latest" },
{ output: "Creating a new Acme app in ./acme", tone: "muted" },
{ spinner: "Installing dependencies", done: "Installed 214 packages in 3.2s", duration: 1.6 },
{ command: "npm run dev" },
{ output: "▲ Ready on http://localhost:3000", tone: "success" },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Typing
Scrolls into view
Spinner
A long-running step
Caret blink
Session finished
The live preview is free to explore. Plus unlocks the source for Animated Terminal and every other premium component.