Opus 5.5 Video Templates

30 free motion-graphics templates remade from viral Claude Opus 5.5 videos: launch films, app promos, ads, product demos, explainers and logo reveals. A Claude Code skill rebrands one for your product and renders it to MP4 on your machine.

Watch all 30: claudeimagine.com/opus-5-5-video

Each template is an HTML composition for HyperFrames, the open-source renderer that turns HTML into video with headless Chrome and FFmpeg. All copy and colors are variables, so a rebrand is a list of values.

Install

git clone https://github.com/lumian2015/opus-5-5-video-templates \
  ~/.claude/skills/opus-5-5-video-templates

Then check that your machine can render:

npx [email protected] doctor

You need Node.js 22 or newer, FFmpeg and Chrome.

Use

Ask Claude Code for the video you want:

Make a 15-second launch video for Acme Notes with the caption app template.

I need a vertical app-update video for our habit tracker. Our colors are #1f6feb and #ffd33d.

Claude picks a template, writes the copy for your product, checks the frames and renders the MP4. Or run the steps yourself:

S=~/.claude/skills/opus-5-5-video-templates
node $S/scripts/new-video.mjs 23 my-video        # copy template 23
node $S/scripts/vars.mjs my-video                 # list its variables
node $S/scripts/vars.mjs my-video values.json     # set them from a JSON object
cd my-video
npx [email protected] snapshot --at 1,4,8        # check a few frames
npx [email protected] render -f 60 -q high -w 4 -o out.mp4

Templates

#	Template	What happens	Kind	Length	Format	Demo brand	Photos	Preview
01	01-launch-paper	Paper launch film — Marker notes on a paper canvas, bouncing physics, hard light-to-dark cuts and a logo lockup.	Launch film	15s	16:9	Claude Imagine	—	watch
02	02-showreel-kinetic	Kinetic type showreel — A variable-font wordmark, easing curves, shape morphs and a 3D point cloud in 15 seconds.	Showreel	15s	16:9	Claude Imagine	—	watch
03	03-resume-reel	15-second résumé reel — A motion designer’s reel: transform handles, particles, color fields and a serif name card.	Showreel	15s	16:9	fictional designer "Nova"	—	watch
04	04-reel-depth	Showreel with depth — Kinetic type walls, a 3D prism field, a ticker and particles, drawn on a canvas.	Showreel	15s	16:9	Claude Imagine	—	watch
05	05-launch-muda	Startup launch in 26 seconds — Problem, reframe, proof, name and claim, told with counters, a dictionary card and a single mark.	Launch film	26s	16:9	Claude Imagine	—	watch

Your own product photos

Six templates (06, 20, 21, 23, 25 and 28) are built around photos. They ship with demo images made with Claude Imagine. Swap in your own files, or let Claude generate new ones through the Claude Imagine MCP. The prompt behind every demo image is in that template's template.json.

claude mcp add --transport http claude-imagine https://claudeimagine.com/api/mcp

Generating images uses Claude Imagine credits; new accounts start with free signup credits.

Credits and licenses

• Templates and scripts are MIT-licensed; see LICENSE.
• Each template credits the post that inspired it in its template.json. The structure and pacing follow the original; the code, copy, brands and images are new. Demo brands are fictional, and the people in the photos are AI-generated.
• Fonts come from Google Fonts under the SIL Open Font License 1.1; each font's license is in licenses/fonts.
• GSAP (assets/gsap.min.js) is subject to GreenSock's standard license.
• The land dots in template 22 come from Natural Earth (public domain) through the world-atlas package (ISC).
• HyperFrames by HeyGen (Apache-2.0) is fetched by npx; it is not bundled here.