Remotion HTML-in-canvas examples

Shows the capabilities of HTML-in-canvas and Remotion using the <HtmlInCanvas> component.

Magnifying Glass

MagnifyingGlass.mp4

Source: src/MagnifyingGlass/

Crt

Crt.mp4

Source: src/Crt/

Starter Prompt:

use remotion best practices, especially HTML in canvas.
create a CLI animation which first does "npm create video", then "claude" and asks to create a CRT effect using html-in-canvas.
then, use html-in-canvas to make it look like an old computer. add a scanline filter and screen
curvature to the composition.

Vintage

Vintage.mp4

Source: src/Vintage/

GlowingBarChart

GlowingBarChart.mp4

Source: src/CenteredWhitePaper/

StorePeel

StorePeel.mp4

Source: src/CubeTransitionCard/

ArticleHighlight

ArticleHighlight.mp4

Source: src/ArticleHighlight/

Additional experiments live in src/Bonus/.

Commands

Install Dependencies

npm i

Start Preview

npm run dev

Render video

npx remotion render

Upgrade Remotion

npx remotion upgrade

Docs

Get started with Remotion by reading the fundamentals page.

Help

We provide help on our Discord server.

Issues

Found an issue with Remotion? File an issue here.

License

Note that for some entities a company license is needed. Read the terms here.