Direct answer
Install the terminal session component, list the commands in order, give it the success line to land on, and pass your theme. It types each command at a human pace, shows the work and keeps the newest line in view, so a long session never overflows the window.
Three beats of a terminal shot
Three beats of a terminal shot
Type the command, show the work, then cut to what it made.
- Type the command: At a human pace, one command at a time.
- Show the work: The output scrolls and the newest line stays in view.
- Cut to the result: Move to the screen the command produced.
Install the terminal component
npx shadcn@latest add https://better-design.com/registry/video/terminal-session.jsonWrite the session as it should read
Show the shortest real path: the install, one command that does the job, and the line that proves it worked. A line that starts with "$ " is a command and types out; any other line prints as output.
import { TerminalSession } from "@/components/bd-video/terminal-session";
<TerminalSession
commands={["$ npm install your-cli", "added 214 packages", "$ your-cli build"]}
success="Build complete."
theme={theme}
/>Pair it with the result
- Cut from the terminal to the thing it made: a screen recording, a laptop mockup or a screenshot.
- Use a whip pan or a zoom-through between the two, so the cause and the effect read as one move.
Steal this workflow
Run this guide in your own assistant. The prompt carries the guide link and the workflow summary, so the assistant can adapt it to your project.
Read the guide "Terminal animation for a developer tool video" at https://better-design.com/blog/terminal-animation-video and help me apply it to my project.
Install the terminal session component, list the commands in order, give it the success line to land on, and pass your theme. It types each command at a human pace, shows the work and keeps the newest line in view, so a long session never overflows the window.
Start by asking what I am building and which tools I use. Then walk me through the workflow step by step, adapted to my answers.Claude and ChatGPT open with the prompt filled in. Gemini copies the prompt to your clipboard first, so paste it when the app opens.
Questions
Can I use my own font?
Yes. Pass a monospace family the project has loaded through the font prop. It defaults to the theme's face, then JetBrains Mono.