Text Animations

Basic syntax

A text scene starts with a separator, followed by a heading and any number of paragraphs. The optional duration token controls how long the scene lasts.

--- text ---                      default fade + slide-up
--- text (typewriter) ---         character-by-character reveal
--- text (bounce, 8s) ---         bounce variant, 8 second duration

# Your heading here
First paragraph fades in after the heading.
Second paragraph staggers in after the first.

Background images are supported in any text scene variant. Add an image line and it renders at 20% opacity behind the text:

--- text (bounce) ---
# Revenue grew 40%
Our best quarter yet.
![Background](https://example.com/office.jpg)

Inline formatting

Headings and paragraphs support inline formatting. These also work inside typewriter and cursor variants - characters type out with their style applied.

# **Bold**, _italic_, and colored text
Use **double asterisks** for bold, _underscores_ for italic.
Use <font color="red">red text</font> for any CSS color.
Use <i class="fas fa-check"></i> for Font Awesome icons.

Default (fade + slide up)

The default variant eases the heading in from 50px below with a fade. Paragraphs stagger 12 frames after the heading. Clean and versatile - use it whenever you want a polished entrance without a strong personality.

--- text ---
# Introducing SlickVid
Record. Annotate. Export. Done.

Typewriter

Characters reveal one by one from left to right, combined with a simultaneous ease-out slide from the right. The typing speed auto-scales to the scene duration so the heading always finishes at 90% of the scene length. Paragraphs fade in after typing completes.

Inline images and icons appear instantly at their position while surrounding text types out. Bold, italic, and color formatting type out character by character inside their wrapper.

--- text (typewriter) ---
# Built for product teams
No timeline. No keyframes. Just write.

Cursor

Same character-by-character reveal as typewriter, but with a blinking cursor that appears 1s before typing starts, blinks continuously while typing, then blinks for 1s after completion before fading out. Great for terminal-style or developer-focused demos.

--- text (cursor) ---
# npm install slickvid
Zero config. Just run it.

Bounce

The heading springs up from below using spring physics (damping 8, stiffness 120) with a characteristic overshoot. Paragraphs stagger 8 frames behind the heading. Energetic and attention-grabbing - works well for product announcements and key metrics.

--- text (bounce) ---
# 10x faster exports
Powered by Remotion Lambda.

Zoom-in

The heading scales in from 0.3x to full size using spring physics (damping 12, stiffness 100). Heading and paragraphs stagger. Feels cinematic - pairs well with a dramatic one-line statement.

--- text (zoom-in) ---
# 1 million videos rendered

Zoom-out

The opposite of zoom-in: text starts oversized at 1.5x and ease-outs to normal size over 22 frames (scaled to scene duration). Creates a "rush in" effect. Paragraphs stagger behind the heading.

--- text (zoom-out) ---
# Watch it in action
Full demo below.

Warp

The heading enters at 10x scale with a strong blur, overshoots to 0.75x, then settles at 1x. The blur tracks the scale keyframes - maximum blur as it flies in, clearing to sharp as it lands. A high-energy entrance for hero moments and section openers.

--- text (warp) ---
# Ship in 60 seconds
No setup. No timeline. No compromise.

Sweep

A three-phase entrance: (1) oversized text (200px) sweeps right-to-left off screen; (2) re-enters from left and settles at center; (3) font shrinks from 200px to 72px as paragraphs fade in. Creates a dramatic, editorial feel. Works best with short headlines.

--- text (sweep) ---
# The future of demos
Start free today.

Slide-left

Ease-out horizontal slide from 80px to the right. Simple, clean, and modern. Paragraphs stagger behind the heading. Works well in a sequence of related points sliding in from the same direction.

--- text (slide-left) ---
# Step 1 - Record
Hit the extension icon and click Start.

Slide-down

Ease-out downward slide from 60px above. The text drops in from above, which feels natural for titles, chapter headers, and section intros. Paragraphs stagger in after the heading.

--- text (slide-down) ---
# Chapter 2
Customizing your workspace.

Pulse

The heading enters with a fade + slide-up, then breathes with a continuous ±2.5% scale pulse at 0.8 Hz for the rest of the scene. Paragraphs fade in after the entrance. Use this for emphasizing a live metric, countdown, or anything you want viewers to feel is actively happening.

--- text (pulse) ---
# 247 files processing...
Upload in progress.

Duration & timing

All text animations scale their timings to the scene duration. Specify the duration with a number followed by s in the separator params. Default is 6s.

--- text (typewriter, 10s) ---    10 second scene
--- text (bounce, 4s) ---          4 second scene
--- text ---                          default 6 seconds

All animation timings scale proportionally - a 10s typewriter scene types at the same relative speed as a 6s one; the heading always finishes at 90% of scene duration regardless of total length.