A slick macOS-style terminal for Framer with per-character typing, sequenced lines, and in-view triggers. Perfect for product launches, CLI demos, and “how it’s built” sections.
Make it with Workshop
Build your own component with AI
Showcase your build pipeline, tests, deployments, or CLI walkthroughs with a realistic terminal that types and reveals lines in order. Animated Terminal supports two line types—Typing (per-character) and Animated (fade/slide)—and can sequence them automatically, loop the whole story, and start when visible in the viewport. Customize colors, fonts, border, and macOS window controls to match your brand.
Built with framer-motion, the component uses a lightweight internal sequencing context to unlock reliable step-by-step reveals without janky timing math. Drop it on any canvas, edit your lines, and you’re done.
Two animation modes: Typing (per-char, configurable speed) and Animated (fade/slide in).
Automatic sequencing: Lines advance only after their animation completes—no manual delays needed.
Start on view: Begin the whole sequence when the component enters the viewport (great for long pages).
Looping: Replay the entire script with a custom loop delay.
macOS chrome: Optional traffic-light window controls for instant “terminal” vibes.
Fine-grained styling: Background, border, base text color, per-line color, and full font control (monospace default).
Safe by default: No global CSS; encapsulated styles to avoid leaking across your page.
Product pages & “Build/Deploy/Test” sections
Dev tool marketing sites
Docs & tutorials (CLI steps)
Case studies and engineering blog visuals
Launch timelines and status feeds
Typing lines render characters over time (duration = ms per character).
Animated lines fade/slide into place and instantly mark themselves “complete.”
When Sequence is ON, each line waits for the previous one to complete before starting.
Start on View can gate the entire sequence until the component is ~30% visible.
Loop resets state and replays after loopDelay.
Content
Lines (Array of Objects)Configure each line independently.
type: "typing" | "animated"
content: string (the text to render)
textColor: color (overrides base text color)
duration: number (ms/char, typing only; default 60)
delay: number (ms before line starts; optional)
Behavior
Sequence (boolean, default true)When ON, each line waits for the previous one to finish.
Start on View (boolean, default true)Delays the first line until the component is in view.
Loop (boolean, default false)Replays the full list of lines after completion.
Loop Delay (number, ms, default 2000)Pause before replaying (visible only when Loop = ON).
Visuals
Window Controls (boolean, default true)Toggle macOS-style red/amber/green dots.
Background (color, default #000000)
Text Color (color, default #FFFFFF)Base color for lines (can be overridden per line).
Border Color (color, default #333333)
Font (Framer font control)Defaults to a legible monospace with tuned line-height/letter-spacing.
Add Animated Terminal to your canvas.
Open Lines → add/arrange steps (mix Typing and Animated).
Toggle Sequence ON for step-by-step flow.
Turn Start on View ON to begin on scroll.
Optionally enable Loop to replay the script.
Tip: Use textColor per line to indicate state:
green #27C93F for success,
yellow #FFBD2E for progress/warnings,
white #FFFFFF for commands.
typing: npm run build --production (60 ms/char)
animated: ✔ Compiling TypeScript files... (green)
animated: ✔ Bundling assets complete. (green)
typing: docker compose up -d
animated: ✔ Starting containers... (yellow)
animated: ✔ All services running. (green)
