---
title: "Animated Terminal — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Syauqizaidan Khairan Khalaf · Text. Animated Terminal supports two line types— Typing (per-character) and Animated (fade/slide)—and can sequence them…"
canonical: "https://framer.elliotli.dev/component/animated-terminal"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Animated Terminal

# Animated Terminal

Terminal that types out your lines

[View on Framer](https://framer.com/marketplace/components/animated-terminal/?via=elliot-li)

![Animated Terminal preview image 1](https://framer.elliotli.dev/og/component/animated-terminal/1816fb4f2f545703/1600x1200.jpg)

## Summary

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…

## Description

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.

## Key Features

-   **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.
    

## Perfect For

-   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
    

## How It Works (under the hood)

-   **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.
    

## Props & Controls

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.
    

## Quick Start

1.  Add **Animated Terminal** to your canvas.
    
2.  Open **Lines** → add/arrange steps (mix _Typing_ and _Animated_).
    
3.  Toggle **Sequence** ON for step-by-step flow.
    
4.  Turn **Start on View** ON to begin on scroll.
    
5.  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.
    

## Example Line Set (copy ideas)

-   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)
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-nt2fdsx1-Tvyz87N0VYHrpfL1xFz5nbSulfjcDI)

## Rank history [How rankings work →](/terms#rankings)

-   All · #7883

## Details

- **Author**: Syauqizaidan Khairan Khalaf
- **Price**: $5.00
- **Published**: 2025-10-09
- **Updated**: 2026-11-05
- **Added**: 2025-10-03
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing