Animated Terminal

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)