termove

Animated code presentations in the terminal. Transform code step-by-step with smooth, syntax-highlighted animations inspired by Shiki and shiki-magic-move.

Demo

Installation

# Using bun (recommended)
bun add termove

# Using npm
npm install termove

Quick Start

1. Create a config file termove.json:

{
  "filename": "example.js",
  "steps": [
    { "file": "steps/01-basic.js", "label": "Basic function" },
    { "file": "steps/02-async.js", "label": "Add async/await" },
    { "file": "steps/03-error-handling.js", "label": "Error handling" }
  ]
}

2. Create your step files in the steps/ directory.

3. Run the presentation:

termove
# Or specify a config path
termove ./my-presentation/termove.json

Controls

| Key | Action | | ---------------- | --------------------------- | | Left / Right | Navigate between steps | | Space | Auto-play from current step | | q | Quit |

Configuration

Config File (termove.json)

{
  "filename": "src/api.ts",
  "theme": "./my-theme.json",
  "animationDuration": 500,
  "autoplayInterval": 1000,
  "delayMove": 0.3,
  "delayLeave": 0.1,
  "delayEnter": 0.7,
  "steps": [
    { "file": "step1.ts", "label": "Step 1" },
    { "file": "step2.ts", "label": "Step 2" }
  ]
}

Options

| Option | Type | Default | Description | | ------------------- | ------ | -------- | --------------------------------------- | | filename | string | - | Display filename in header | | theme | string | Vercel | Theme name or path to custom theme JSON | | animationDuration | number | 500 | Transition animation duration (ms) | | autoplayInterval | number | 1000 | Delay between auto-play steps (ms) | | delayMove | number | 0.3 | When move animations start (0-1 ratio) | | delayLeave | number | 0.1 | When leave animations start (0-1 ratio) | | delayEnter | number | 0.7 | When enter animations start (0-1 ratio) | | steps | array | required | Array of step configurations |

Step Configuration

| Option | Type | Required | Description | | ------- | ------ | -------- | -------------------------------------- | | file | string | yes | Path to code file (relative to config) | | label | string | no | Display label (defaults to filename) |

Animation Timing

termove uses shiki-magic-move's timing model for choreographed animations:

Timeline (0% to 100% of animation duration):
|-------|-------|-------|-------|-------|-------|-------|-------|-------|-------|
0%     10%    20%    30%    40%    50%    60%    70%    80%    90%   100%
       ^ Leave starts fading out (delayLeave: 0.1)
                      ^ Move tokens start moving (delayMove: 0.3)
                                                  ^ Enter tokens start fading in (delayEnter: 0.7)

Supported Languages

termove supports 50+ languages through Shiki, including:

• JavaScript, TypeScript, JSX, TSX
• Python, Ruby, Go, Rust
• HTML, CSS, SCSS, SASS
• JSON, YAML, TOML
• Bash, SQL, GraphQL
• And many more...

Language is auto-detected from file extension.

Custom Themes

Use any VS Code theme by providing a path to the theme JSON:

{
  "theme": "./themes/dracula.json",
  "steps": [...]
}

A default Vercel theme is included.

Examples

Check out the examples/ directory for sample presentations:

• examples/js/ - JavaScript REST API evolution
• examples/ts-types/ - TypeScript type system
• examples/react/ - React component patterns
• examples/py/ - Python patterns
• examples/rs/ - Rust examples
• examples/go/ - Go examples

CLI Usage

termove [config-path] [options]

Arguments:
  config-path    Path to termove.json (default: ./termove.json)
                 If a directory is passed, looks for termove.json inside it

Options:
  --help, -h     Show help message

Requirements

• Bun runtime (recommended) or Node.js 18+
• Terminal with 24-bit color support

License

MIT