TerminalUI

An animated terminal window with realistic typing animation, sequential line reveals, and full macOS-style chrome. Mix typing and instant lines in any order. Trigger on scroll into view or page load. Built for developer portfolios, documentation pages, SaaS landing pages, and any interface that needs a realistic CLI experience.

Features

• Realistic terminal chrome — red, yellow, green dot controls

• Two animation types — typing (character by character) and instant line reveal

• Mix typing and instant lines in any order

• Sequential animation — each line waits for the previous to complete

• Start on view — trigger animation when scrolled into viewport

• Up to 30 terminal lines supported

• Four text tone presets per line — text, muted, success, info

• Optional prefix per line — supports "> " · "$ " or any custom prefix

• Configurable typing speed (5–120ms per character)

• Configurable delay between sequential lines (0–1000ms)

• Full color controls — background, border, header, all text tones

• Custom dot colors — red, yellow, green

• Full typography controls — size, weight, spacing, line height

• Radius, padding and line gap controls

• Static preview in Framer canvas — no animation during export

• Accessible — ARIA labels and semantic HTML

• No dependencies

SEO Keywords

framer terminal component · framer terminal UI · framer code terminal · framer typing animation · framer CLI component · framer terminal window · framer developer component · framer code window · framer animated terminal · framer command line · framer typing effect · framer tech component · framer sequential animation · framer code component · framer developer portfolio