Animated IndentLines
An animated, colour-coded vertical scope indicator for VS Code — always know which block your cursor is in.
Animated IndentLines draws a coloured vertical line alongside the code block your cursor is currently inside, expanding outward with a smooth animation as you move through your code. The line colour matches VS Code's bracket pair colouring, so nested scopes get distinct colours automatically.
Features
- Animated scope line — expands outward from the cursor when you enter a new block
- Bracket pair colours — line colour cycles through the same 6 levels as VS Code's built-in bracket colouring, so nesting depth is instantly visible
- Works with
{ and [ — covers function bodies, classes, control flow, and array/collection initialisers
- Handles empty blocks — shows a scope line even before you've written any code inside a block
- Smart brace navigation — cursor on
{, }, [, or ] shows the scope for the block being opened or closed, not the surrounding one
- Optional border markers —
╷ and ╵ characters can be shown at the top and bottom of the scope boundary
- Zero configuration needed — works out of the box with any language and any indentation style
Demo
The vertical line animates outward from the cursor and changes colour as you move between nesting levels.
Installation
From the Marketplace:
- Open VS Code
- Press
Ctrl+P (or Cmd+P on macOS)
- Type
ext install animated-indentlines and press Enter
From a .vsix file:
code --install-extension animated-indentlines-x.x.x.vsix
Usage
Animated IndentLines activates automatically when VS Code starts. Move your cursor into any indented block and the scope line appears.
Toggle on/off via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
Animated IndentLines: Toggle
Configuration
All settings are available under Settings → Extensions → Animated IndentLines or directly in settings.json.
| Setting |
Type |
Default |
Description |
indentlines.enabled |
boolean |
true |
Enable or disable Animated IndentLines |
indentlines.delay |
number |
100 |
Debounce delay (ms) before drawing starts after cursor movement |
indentlines.animationStep |
number |
20 |
Milliseconds between animation steps — lower is faster |
indentlines.animationStyle |
string |
"outward" |
"outward" animates from the cursor; "none" draws instantly |
indentlines.lineWidth |
number |
1 |
Width of the scope line in pixels |
indentlines.lineHeight |
string |
"1.6em" |
Height of each line segment — increase if you see gaps at large line heights |
indentlines.showBorder |
boolean |
false |
Show ╷ / ╵ markers at the top and bottom of the scope |
indentlines.borderTopSymbol |
string |
"╷" |
Character used for the top border marker |
indentlines.borderBottomSymbol |
string |
"╵" |
Character used for the bottom border marker |
indentlines.borderColor |
string |
"#a89984" |
Color of the border markers |
Example settings.json:
{
"indentlines.delay": 50,
"indentlines.animationStep": 15,
"indentlines.animationStyle": "outward",
"indentlines.showBorder": true
}
How it compares
| Feature |
Animated IndentLines |
VS Code built-in bracket guides |
| Highlights the scope you are currently in |
✅ |
❌ |
| Animated entry |
✅ |
❌ |
| Colour matches nesting depth |
✅ |
✅ |
Works with [ array blocks |
✅ |
❌ |
| Works without brackets (indent-only) |
✅ |
❌ |
| Empty block indicator |
✅ |
❌ |
Inspiration
Animated IndentLines was built on ideas from two excellent projects:
- mini.indentscope for Neovim — the animated, cursor-aware scope indicator that inspired the whole concept
- Bracket Pair Colorizer 2 for VS Code — the technique of anchoring decorations to non-empty lines and using CSS
transform: translateY to render them on empty lines, which solved a fundamental VS Code rendering limitation
About this project
This extension was built entirely as a hobby project through vibe coding with Claude Sonnet 4.6. Just curiosity, iteration, and a lot of bug screenshots.
License
MIT
