Building products that solve real problems

Developer, entrepreneur, and maker. I build SaaS products, Chrome extensions, and share what I learn along the way.

TikTok Terminal Animator

TikTok Terminal Animator

Browser-based tool for creating vertical terminal typing animations optimized for social media platforms.

completed

A browser-based tool for creating vertical (9:16) terminal typing animations optimized for social media platforms. It simulates realistic terminal sessions with smooth typing effects and exports professional WebM videos.

Key Features

  • Terminal Animation: Creates realistic typing animations with customizable speed and timing
  • Video Export: Records canvas at 60fps and exports as WebM files with audio
  • Multiple Themes: Dark, AMOLED, and Green Phosphor visual themes
  • Flexible Timing: Per-line duration control and inter-line pauses
  • Audio Integration: Typewriter sounds with volume control
  • Script Management: Import/export scripts with URL sharing capabilities
  • Visual Customization: Adjustable fonts, backgrounds, watermarks, and glow effects

Technical Implementation

The tool uses canvas-based rendering for crisp visuals, WebAudio API for sound generation, and MediaRecorder API for video capture. It's built with zero dependencies and runs entirely in the browser with Chromium compatibility.

Use Cases

Perfect for content creators making programming tutorials, terminal demonstrations, and educational videos for platforms like TikTok, Instagram Reels, and YouTube Shorts. The vertical format is specifically optimized for mobile-first social media consumption.

Why I Built This

Isn't it obvious? I was struggling to record my terminal for a tiktok video. So I just faked it.

Tech Stack

JavaScriptCanvas APIWebAudio APIMediaRecorder APIWebM

Screenshots

TikTok Terminal Animator screenshot 1

© 2025 Mike Grant. All rights reserved.