TerminalUI — Animated terminal window with typing fx

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

Property Controls

Content

• Lines — up to 30 lines · kind, text, tone, prefix, ID per line

• Sequence — enable/disable sequential animation

• Start On View — viewport trigger toggle

Timing

• Typing Speed — milliseconds per character (5–120ms)

• Line Delay — delay between lines (0–1000ms)

Colors

• Terminal — background, border, header background, header border

• Dots — red, yellow, green dot colors

• Text Tones — text, muted, success, info colors

Layout

• Radius · outer padding · header padding · content padding · line gap

Typography — font family, size, weight, spacing, line height

Technical Details

• Framer Motion for typing and line reveal animations

• Context API for sequential animation state management

• useInView for viewport-triggered animation

• startTransition for React 18 non-blocking updates

• Static renderer detection skips animations on export

• Memoized context and children prevent unnecessary re-renders

• SSR-safe window and document guards

Use Cases

Developer portfolios · Documentation pages · SaaS landing pages · CLI tutorials · Build and deploy status displays · Code showcases · Onboarding flows · Tech company homepages · Developer tool marketing

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