skill
opus-5-5-video-templates
30 free motion-graphics templates remade from viral Claude Opus 5.5 videos, plus a Claude Code skill that rebrands one and renders it to MP4 with HyperFrames.
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/lumian2015/opus-5-5-video-templates itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
Skills do not use an MCP config. Follow the steps in the README below.
README
synced Oct 21, 2026Opus 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 hyperframes@0.8.96 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 hyperframes@0.8.96 snapshot --at 1,4,8 # check a few frames
npx hyperframes@0.8.96 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 |
| 06 | 06-screen-to-wall-prints | Photo print shop reel — A wordmark dot opens into a shutter, a photo grid, a relight slider and a lens, then the print lands framed on a wall. | Ad | 29s | 1:1 | framed. | yes, 7 | watch |
| 07 | 07-i-make-things-move | Animation principles reel — A bouncing ball with onion skin, then bounce, stretch, spin and snap spelled out in motion. | Explainer | 15s | 16:9 | Claude Imagine | — | watch |
| 08 | 08-saas-launch-growth | SaaS launch film — A blank page, an app tour, an editor with a rating panel, a calendar and a closing stat card. | Launch film | 30s | 16:9 | Upwell | — | watch |
| 09 | 09-app-launch-mascot | Mobile app launch with a mascot — An app icon that winks, seven phone screens, a dark-mode wipe and a waving mascot at the end. | Product demo | 18s | 16:9 | Pip | — | watch |
| 10 | 10-saas-demo-warm | Warm paper product demo — A research modal, a spiking chart, an editor with a coach panel and tilted tutorial cards. | Product demo | 30s | 16:9 | Viewcraft | — | watch |
| 11 | 11-synthwave-app-promo | Synthwave app promo — Pixel type on camera cards, a 3D tunnel, a neon flyover, a phone feed and a 64-icon grid. | Ad | 15s | 16:9 | BLAST | — | watch |
| 12 | 12-launch-reel-ember | Ember launch reel — Pain point to product in one take: a reply card, a logo ignition, a 3D model grid and a closing lockup. | Launch film | 15s | 16:9 | Claude Imagine | — | watch |
| 13 | 13-self-planning-calendar | Self-planning calendar launch — A now-line grows a calendar, meetings pile up, a prompt replans the week in 3D, and tiles tessellate into the end card. | Launch film | 33s | 16:9 | slotwise | — | watch |
| 14 | 14-publish-everywhere | Create once, publish everywhere — Channel icons orbit a video card, a composer posts it, and ten phones fill one by one as a counter reaches 10/10. | Product demo | 15s | 16:9 | fanout | — | watch |
| 15 | 15-bauhaus-motion-reel | Bauhaus motion reel — One dot through six techniques: squash and stretch, type, Bauhaus tiles, a sphere of dashes, metaballs and data. | Showreel | 15s | 16:9 | forma | — | watch |
| 16 | 16-ai-workspace-launch | AI workspace launch film — Scattered tools collapse into a dot, then a product board, meeting notes, charted answers with sources, agents at work and stats. | Launch film | 46s | 16:9 | Workgrove | — | watch |
| 17 | 17-vertical-app-update | Vertical app update — A 9:16 tour of five new screens: a habit grid, a form with modes, a gauge, a cloud backup and a restore on a new phone. | Product demo | 15s | 9:16 | Tickly | — | watch |
| 18 | 18-kinetic-type-cat | Kinetic type with a running cat — A cut-paper title reel: a cat’s eye, a road run, a boiling starburst, extruded letters and scrolling title rows. | Showreel | 15s | 16:9 | MICHI TV (fictional show) | — | watch |
| 19 | 19-lowpoly-logo-reveal | Low-poly logo reveal — A wireframe draws itself, 65 facets fly in and land, a ring blooms, and the mark resolves into an app icon and wordmark. | Logo reveal | 21s | 16:9 | Claude Imagine | — | watch |
| 20 | 20-product-parody-launch | Keynote-style launch parody — A baguette revealed like a flagship phone: feature lines, a size counter, a macro close-up, a battery gag and the price. | Ad | 20s | 16:9 | Baguette Pro | yes, 3 | watch |
| 21 | 21-ecg-device-film | Medical device product film — A monitor rises out of haze, then seven feature scenes with live screens, a scan line, a shield and a printout feeding out. | Product film | 40.5s | 16:9 | ORVICA CARDIA E12 | yes, 4 | watch |
| 22 | 22-maker-map-globe | Community map app reel — A button becomes a sign-up, a profile check and a dot that grows into a dotted globe, then matches, stats and an event. | Product demo | 20s | 1:1 | Pinhive | — | watch |
| 23 | 23-caption-app-promo | Caption app promo — Before and after clips, a style picker in the hand, an edit that adds captions, b-roll and music, then four creators. | Ad | 15s | 16:9 | subline | yes, 11 | watch |
| 24 | 24-one-time-bundle | One-time bundle promo — Twenty subscriptions pile up and swirl into a vortex, then tool slides, a 3D screenshot wall and a pay-once deal. | Ad | 15s | 16:9 | Toolnest | — | watch |
| 25 | 25-ugc-product-reel | UGC-style lip gloss reel — Unboxing, the wand, a swatch, the gloss on the lips and a café table, cut like a handheld phone video. | Ad | 10s | 9:16 | LUMÉ | yes, 6 | watch |
| 26 | 26-pay-per-job-vs-pro | Pay-per-use vs Pro explainer — Job cards stack up on a receipt while the Pro price per job drops row by row, then features, the math and a checkout. | Explainer | 15s | 16:9 | CVtune | — | watch |
| 27 | 27-doc-to-drawn-video | Document-to-explainer reel — A page of text flips into a book, a paragraph dissolves into a hand-drawn diagram, and a script rolls through 19 languages. | Launch film | 40s | 16:9 | Chalkline | — | watch |
| 28 | 28-roof-inspection-film | Roof inspection brand film — A roof cutaway comes apart in layers, then three close-ups, photos pinned on a turning house, a report and a booking form. | Brand film | 28.5s | 16:9 | ROWAN | yes, 5 | watch |
| 29 | 29-habit-app-ui-reel | Habit app UI reel — One surface morphs from app icon to button, form, tab bar, stats card, widget and a check, in 11 seconds. | Product demo | 11.3s | 1:1 | streakly | — | watch |
| 30 | 30-best-replies-mcp | Best-replies MCP promo — A wall of replies, an agent calling two tools, kept replies stamped, and the best one walking a red carpet. | Product demo | 20s | 16:9 | Replyfire | — | 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.