Algorand Code Example Videos

Remotion template for creating animated code snippet videos.

Quick Start

npm i                    # Install dependencies
npm run dev              # Preview in browser
npx remotion render      # Render video to ./out/

How It Works

The template animates the diff between sequential code files. Each code*.ts file becomes a "slide" and the video smoothly transitions between them.

Example: To show a feature being added:

• code1.ts - Base code without the feature
• code2.ts - Code with the feature added

The video will animate the new code appearing.

Code Snippets

Edit files in public/ (code1.ts, code2.ts, etc.). Use // @noErrors as the first line to suppress TypeScript squiggles.

Annotations

Use // !mark to highlight the next line:

// @noErrors
await appClient.send.payment({
  args: {},
  // !mark
  coverAppCallInnerTransactionFees: true,
})

Batch Video Production

For multiple videos, organize them in the videos/ directory:

videos/
  01-my-first-tip/
    code1.ts
    code2.ts
    tweet.txt
  02-another-tip/
    code1.ts
    code2.ts
    code3.ts
    tweet.txt

Then render all videos:

./scripts/render-all.sh    # Renders all videos to out/
./scripts/show-tweets.sh   # Display all tweet text

Configuration

Edit src/Root.tsx to change theme, canvas size, clip duration, etc.