remotion-dev / html-in-canvas
★ 192A skill package that teaches your agent 1 capability — every one documented and browsable below, no GitHub required · by remotion-dev.
Each skill below is one capability this package teaches your agent. Install the whole package, or open a skill to install just that one.
Remotion HTML-in-canvas examples
Shows the capabilities of HTML-in-canvas and Remotion using the <HtmlInCanvas> component.
Magnifying Glass
https://github.com/user-attachments/assets/23142326-fa95-4783-a8c6-bffffead87cd
Source: src/MagnifyingGlass/
Crt
https://github.com/user-attachments/assets/a59b7549-4b89-46c3-821a-9a134c2689d2
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
https://github.com/user-attachments/assets/02d48660-6c77-4f1a-9941-ca318a226f94
Source: src/Vintage/
GlowingBarChart
https://github.com/user-attachments/assets/4797f7aa-c5ce-4c93-9e1f-3e22bdcfa038
Source: src/CenteredWhitePaper/
StorePeel
https://github.com/user-attachments/assets/bd5d6110-12bf-48d7-9317-9f3f4728b206
Source: src/CubeTransitionCard/
ArticleHighlight
https://github.com/user-attachments/assets/8294d4c6-e4cd-48ef-a402-220bb72ce2fe
Source: src/ArticleHighlight/
Additional experiments live in src/Bonus/.
Commands
Install Dependencies
npm iStart Preview
npm run devRender video
npx remotion renderUpgrade Remotion
npx remotion upgradeDocs
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.
Install the whole package (1 skills):
npx skills add https://github.com/remotion-dev/html-in-canvasOr install a single skill:
npx skills add https://github.com/remotion-dev/html-in-canvas --skill <name>Pick the skill name from the Skills tab — each entry there installs independently.