Source from repo

remotion-best-practices

Apply best practices for creating programmatic videos with Remotion and React

remotion-devGitHub remotion-devSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

111.5 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/text-animations.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown21 linesFree

rules/text-animations.md

1---
2name: text-animations
3description: Typography and text animation patterns for Remotion.
4metadata:
5  tags: typography, text, typewriter, highlighter ken
6---
7 
8## Text animations
9 
10Based on `useCurrentFrame()`, reduce the string character by character to create a typewriter effect.
11 
12## Typewriter Effect
13 
14See [Typewriter](assets/text-animations-typewriter.tsx) for an advanced example with a blinking cursor and a pause after the first sentence.
15 
16Always use string slicing for typewriter effects. Never use per-character opacity.
17 
18## Word Highlighting
19 
20See [Word Highlight](assets/text-animations-word-highlight.tsx) for an example for how a word highlight is animated, like with a highlighter pen.
21

Loading source

Preparing the source view

Pulling the file list, source metadata, and syntax-aware rendering for this listing.

Marketplace

Source from repo

remotion-best-practices

Apply best practices for creating programmatic videos with Remotion and React

remotion-devGitHub remotion-devSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

111.5 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/text-animations.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown21 linesFree

rules/text-animations.md

1---
2name: text-animations
3description: Typography and text animation patterns for Remotion.
4metadata:
5  tags: typography, text, typewriter, highlighter ken
6---
7 
8## Text animations
9 
10Based on `useCurrentFrame()`, reduce the string character by character to create a typewriter effect.
11 
12## Typewriter Effect
13 
14See [Typewriter](assets/text-animations-typewriter.tsx) for an advanced example with a blinking cursor and a pause after the first sentence.
15 
16Always use string slicing for typewriter effects. Never use per-character opacity.
17 
18## Word Highlighting
19 
20See [Word Highlight](assets/text-animations-word-highlight.tsx) for an example for how a word highlight is animated, like with a highlighter pen.
21