Animations

Dev Reel offers 11 pure CSS animations that can be combined to create impressive visual effects. All animations are made with SVG + CSS, no JavaScript runtime.

Using animations

Animations are specified as an array in the frontmatter. You can combine multiple animations:

yaml

animation:
  - typing
  - fade-lines
  - blink-cursor

Or use just one:

yaml

animation:
  - typing

Or none (no animations):

yaml

animation: []
# or simply omit the option

typing

Classic typing effect. Characters appear one by one as if being typed in real-time.

yaml

animation:
  - typing

Features:

Speed: ~50ms per character
Works line by line
Respects line order
Combines well with blink-cursor

Best for: CLI demos, tutorials, interactive commands

blink-cursor

Blinking cursor at end of content. Simulates active terminal cursor.

yaml

animation:
  - blink-cursor

Features:

Blinks every 530ms
Block style cursor (_)
Positioned after last line
Requires cursor: true (default)

Best for: active terminal, combine with typing

Use cursor: false to disable cursor even with animations.

fade-lines

Lines appear gradually with sequential fade-in. Each line goes from opacity 0 → 1.

yaml

animation:
  - fade-lines

Features:

Staggered delay between lines
Smooth fade (200ms duration)
Sequential top-to-bottom order
Combines well with typing

Best for: gradually revealing output, creating visual hierarchy

scanline

CRT scanline effect. Horizontal line moves from top to bottom creating old monitor effect.

yaml

animation:
  - scanline

Features:

Semi-transparent line
Infinite loop (3s per cycle)
Smooth vertical movement
Nostalgic/retro effect

Best for: retro aesthetic, vintage terminals, hacker vibes

wave

Subtle wave movement. Lines have slight undulating vertical movement.

yaml

animation:
  - wave

Features:

Subtle vertical movement (2-3px)
Staggered delay between lines
Smooth infinite loop
Hypnotic effect

Best for: landing pages, visual demos, adding life

pulse-error

Pulse on error lines. Lines with ✖ or ✗ pulse with red glow.

yaml

animation:
  - pulse-error

Features:

Affects only error lines
Pulsing red glow
Infinite loop (2s per cycle)
Draws attention to errors

Best for: highlighting errors, debugging workflows, critical messages

glow-success

Glow on success lines. Lines with ✔ or ✓ have soft green glow.

yaml

animation:
  - glow-success

Features:

Affects only success lines
Soft green glow
Infinite loop (2s per cycle)
Reinforces positive feedback

Best for: successful installations, completed builds, confirmations

noise-overlay

Animated noise/grain overlay. Subtle noise texture over all content.

yaml

animation:
  - noise-overlay

Features:

SVG noise texture
Very low opacity (0.03)
Subtle movement animation
Film/grain effect

Best for: cinematic aesthetic, analog vibe, visual polish

progress-bar

Animates progress bars. Lines with syntax [=== ] have animated fill.

yaml

animation:
  - progress-bar

Progress bar syntax:

bash

[========>   ] Installing... 75%
[====        ] Downloading... 40%

Features:

Automatically detects bars with [=== ]
Animated fill from left to right
Speed based on percentage
Respects bar width

Best for: installations, downloads, processes with progress

grow-bars

Bars grow horizontally. Similar to progress-bar but with growth effect.

yaml

animation:
  - grow-bars

Features:

Width 0 → 100%
Smooth easing
Staggered delay for multiple bars
Reveal effect

Best for: bar charts, statistics, dashboards

slide-cards

Cards slide in. Used specifically for layout: bento.

yaml

layout: bento
animation:
  - slide-cards

Features:

Cards enter alternating from left/right
Staggered delay
Grid assembly effect
Only works with layout: bento

Best for: bento layouts, multiple demos, side-by-side comparisons

slide-cards only works when you use layout: bento in multiple blocks.

Recommended combinations

Some combinations work especially well together:

Combination	Effect	Use case
typing + blink-cursor	Classic interactive terminal	CLI demos
typing + fade-lines	Gradual reveal with typing	Tutorials
fade-lines + glow-success	Reveal with success highlight	Installations
typing + pulse-error	Typing with highlighted errors	Debugging
scanline + noise-overlay	Retro/vintage terminal	Hacker aesthetic
wave + glow-success	Smooth movement + feedback	Landing pages
progress-bar + fade-lines	Progress with reveal	Builds/installs

Performance and best practices

All animations are pure CSS: excellent performance
Combine 2-4 animations for best effect
More than 5 animations can be visually cluttered
typing + blink-cursor is the most popular combination
Loop animations (scanline, wave, pulse) can be distracting in excess
Use glow-success/pulse-error to highlight important states
progress-bar requires specific bar syntax [=== ]
slide-cards is specific to layout: bento

Complete example

Demo with multiple animations and different line types:

markdown

```dev-reel
title: animation-showcase
theme: dracula
animation:
  - typing
  - fade-lines
  - blink-cursor
  - glow-success
  - pulse-error
  - progress-bar
frame: terminal

$ npm install my-awesome-lib
[=========>  ] Downloading packages... 85%

✔ Installed successfully in 2.1s
ℹ Run 'npm run dev' to start

$ npm run dev
> Starting development server...
✔ Server ready at http://localhost:3000

$ npm run build
> Building for production...
[============] Bundling... 100%

✖ Error: Type check failed
  Expected 'string', got 'number' at src/app.ts:42

⚠ Warning: Build completed with errors
```

Disabling animations

For static SVG without animations, simply omit the animation option or use an empty array:

yaml

# Option 1: omit
title: static-demo
theme: nord
frame: terminal

# Option 2: empty array
title: static-demo
theme: nord
frame: terminal
animation: []

Static SVGs are useful for documentation that doesn't need movement or when animations might distract from content.

Frames CLI Reference