Claude Opus 5.5 代码渲染视频实例：13 个片段及其提示词拆解

Claude Opus 5.5 makes video by writing the animation as code. A browser draws that code one frame at a time, and the frames get encoded into an MP4. So the output behaves like motion design work: crisp typography, exact colors, mocked-up interfaces, charts, and shape-to-shape transitions.

Across 475 public Opus 5.5 videos, about six in ten are motion graphics, four in five are 16:9 landscape, and the median length is 30 seconds.

How an Opus 5.5 Video Gets Rendered

Veo, Kling, and Seedance output pixels. Opus 5.5 outputs a self-contained HTML file built on Canvas, SVG, CSS, GSAP, or Three.js. A headless browser then renders that file one frame at a time, and ffmpeg encodes the captured frames into the final file. Canvas shows up most often, in 336 of the 475 videos. SVG follows at 193 and Three.js at 141. Video isn't mentioned anywhere on the Opus 5.5 announcement page; creators worked out this use themselves.

Treating video as code has three practical effects:

• Type renders as type and color values are literal. Put a hex code in the prompt and that exact hex code ends up in the frame.
• Iteration is cheap. A scene change is a diff of a few lines.
• Photorealism isn't on the table. Deedy Das, whose video appears below as #2, put it this way when talking about explaining technical ideas: "photorealistic video gen like Seedance is not very useful here" (post).

Left to its defaults, Opus 5.5 drifts toward centered text over a gradient with every element fading in. That default is why so many of the first videos looked interchangeable. The good ones share four traits you can spot in seconds:

1. The pacing varies: quick cuts alternate with beats that hold.
2. The type has hierarchy, with one dominant line, smaller supporting labels, and an obvious reading order.
3. Scenes are connected, so one shape becomes the next scene.
4. The clip resolves on an end card or a clean loop point.

Showreels and Motion Design

1. The One-Sentence Showreel Prompt Dozens of Creators Reused

From Stephan Livera's post: 16,983 likes, 15 seconds, 16:9.

The whole prompt fits on one line:

make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.

Opus treated it as a portfolio piece, complete with a timecode HUD and chapter labels. One chapter plots six easing curves next to each other under the heading "Six ways to get from A to B." Another fills the frame with a tiling pattern on loop. A single word slams in at poster scale, and a red end card wraps it up.

The prompt sets a goal, a 15-second length, and an ambition level, then leaves every content decision to the model. That makes it a good test of the model's taste and a poor fit for anything tied to your own brand.

At least 90 public Opus 5.5 videos use this sentence or something close to it, among them reels from Ajith (4,057 likes) and Leon Abboud, and each one looks different. We gave Opus 5.5 the same sentence:

Our run of the same prompt: 15 seconds, 450 frames.

Stephan's version leaned on easing curves and tiles. Ours started with a bouncing ball that bursts into the word "MOTION," then cut to a wave made of 2,304 dots and a ring of points morphing from circle to square to star.

Launch Videos

2. A Startup Launch Film From a Single Vague Sentence

From Deedy Das's post: 3,264 likes, 26 seconds.

make a modern slick and punchy video for a modern startup that works on inference

No company name was given, so Opus made one up: "muda," Japanese for waste. The film opens on a user stuck waiting 2.81 seconds for a response, shows a GPU cluster ramping to 94% utilization, and lands on a logo. Every scene has a small numbered label, the way keynote slides are chaptered. Nobody asked for a problem-product-proof-name arc; the model supplied it.

How it was made: the single sentence above. It took Deedy about a minute and roughly $2.

The product, every number on screen, and the brand name are fiction, so a real launch means feeding those in yourself.

3. A SaaS Launch Assembled From Real Product Assets

From Moritz Kremb's post: 418 likes, 46 seconds.

How it was made: Moritz told Opus to pick a product people know and pull its real assets from the internet.

I want you to create a highly professional SaaS product launch video. Go and find some SaaS, preferably just one that people know, so it's easier to identify with it. Pick that, and then make sure to get actual assets and images and all of that stuff from the internet.

Opus went with Notion and hit the standard launch-film beats: "Docs here. Chats there. Tasks everywhere." over drifting app icons, a rebuilt project board, a feature line paired with a chart, a strip of customer logos, and a closing card where a cursor clicks the call to action.

Those real inputs are where the specificity comes from. For your own product, give it screenshots, your headline, and your feature list. Notion owns the brand and logos in this one, so it only works as a demo.

4. A Print App Launch Shot as One Continuous Take

From zero's post: 2,103 likes, 29 seconds, 1:1.

This one is a long, structured prompt of several thousand characters, organized into <inputs>, <direction>, <structure>, <build>, <gotchas>, and <start> blocks. Here is how the direction block begins:

An Apple-keynote launch film, 2D only, one continuous take. Every scene is made out of the previous one: nothing fades, blurs or cuts. [...] Banned: crossfades, blur-ins, brightness "developing", 3D flips, particles, glows, holds longer than 1s, anything that looks like a template.

How it was made: the photos, music, and wall footage were the creator's own, and the prompt requests them up front. It also has Opus produce a beat map plus four still frames for review before writing the full film.

A button turns into a photo, a glass slider relights that photo to golden hour, the image travels from a phone to a browser window, and the sequence finishes as a framed print on live footage of a wall. The banned list strips out the template look faster than extra adjectives would.

These three launch videos follow the same arc: hook, product, a few features, end card.

UI Motion and App Walkthroughs

5. Nine UI States, One Morphing Element

From zero's post: 12,044 likes, 14 seconds, 1:1.

Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags.

One black element cycles through a button, a checkmark, a music player, a volume slider, a toggle, a tab set, a chart, a ⌘K command palette, and a toast before returning to the button. Each transition is triggered by a cursor on the beat of a 120 BPM track, and the final frame matches the first, so the clip loops without a seam.

A single persistent object keeps the eye locked for all fourteen seconds. The states themselves are placeholders; for a real app you'd swap in your actual screens.

How it was made: zero supplied the music, and the prompt pins the tempo ("120 BPM, 7 bars, something happens on every beat"), which gives each morph a fixed slot on the timeline.

Social Ads and Identity Bumpers

6. A Vertical Fintech Ad for Social Feeds

From David Marcus's post: 283 likes, 23 seconds, 9:16.

make a punchy and modern short video for social that promotes @lightspark capabilities. Needs to be production grade with sound

Oversized type on a pale grid, one idea per screen: "Money still moves like it's 1973," then a USD-to-MXN transfer finishing "In seconds," then "For humans. And AI agents" and "The TCP/IP of money," then the logo. The whole pitch rests on one contrast, a 1973 date against an instant transfer, and every line reads on a phone with the sound off.

7. A 20-Second Kinetic Identity Loop

From TechHalla's post: 270 likes, 20 seconds, 1:1.

How it was made: a prompt that reads like a spec sheet, with the whole look written as numbers.

DURATION: exactly 20.00 seconds. LOOPABLE: frame 0 == frame last (position, opacity, cursor if any).
FORMAT: one HTML file, 1080×1080 (square, X-native). 60fps.
PALETTE (strict): bg #0A0A0A, magenta #FF2BD6, acid green #B8FF00 [...] No other hue

Heavy white type on black, acid-green characters scrambling until they settle into words, and a handle typing itself out over a magenta bar.

Replace the palette with yours and keep the numbers that tight. There isn't much room for content in a piece like this, so it fits best as an intro or outro.

Explainer and Data Story Videos

8. A Negroni Recipe, One Measured Pour at a Time

From Rory Flynn's post: 1,025 likes, 30 seconds, 1:1.

We're going to try a little test. Do you think you could render a recipe motion graphic animation using javascript or html (w/e you think will produce the best) to show the full recipe from start to finish (empty glass to completed cocktail) - Explainer video style - Showing the recipe ingreidents + measurements as they're going into the cup. Should be a 30s video.

The prompt left both the drink and the choice between JavaScript and HTML to Opus. It picked a Negroni. A hand-drawn glass fills in layers, with measurement ticks running up its side. A step card reads "1 oz GIN" or "20 SEC STIR," and a six-step tracker at the bottom checks off ice, gin, Campari, vermouth, stir, and peel as each happens.

The tracker is the piece worth reusing: any step-by-step video is easier to follow when the viewer can see which step they're on. Name the recipe or product you want; otherwise the model chooses.

9. Recursion, Taught in a New Genre Per Layer

From Ethan Mollick's post: 554 likes, 75 seconds.

A video explaining recursion, where every explanation about recursion has a radically different video style, make this self-referential & clever & fast moving.

Every explanation sits inside the previous one and jumps genre: corporate explainer, nature documentary, movie trailer, kids' TV. A "call stack" bar along the top gets one level deeper per layer, which turns the nesting into a visible data structure. At the end, the video plays inside itself under "STILL CONFUSED?"

10. A Timeline of Key Moments in AI History

From klöss's post: 192 likes, 2 minutes 52 seconds.

make a video highlighting key moments in the history of AI.

One line was enough for Opus to build a dark timeline with orange accents, split into numbered chapters: the 1943 artificial neuron rendered as a logic diagram, ELIZA's 1966 dialogue typed out on a terminal, and a bar chart for the 2012 ImageNet results. A caption strip at the bottom carries the narration, and the end card credits motion design, sound design, and code to Claude.

Timelines map well onto code animation because every moment reduces to text, a number, or a simple diagram. Opus generated all the dates and figures itself, so check them before publishing an explainer like this one.

Narrative and History Animations

11. The Human Story as an Origami Doodle

From songkeys's post: 423 likes, 1 minute 48 seconds.

Create a short origami / doodle-style animation showing humanity's development, progress, and civilization from birth to the present, and ultimately the hatching of AI. [...] Style: doodly, cute, warm, strongly narrative, no spoken language (simple text is OK, but don't use too much explanatory/narrative text, because I want different civilizations to be able to understand it), poetic, moving, high quality.

Soft paper-cut hills at sunrise lead into a first village, then the Earth at night strung with glowing icons, then network lines spreading across a village, and finally a sketchbook page where a pencil draws a small creature. Asking for "no spoken language" pushed the entire narrative into visuals, so the video works in any market without translation.

12. 250 Years of U.S. History in Sand

From Michael Guo's post: 349 likes, 2 minutes.

Make a 2-minute sand animation that tells the story of 250 years of U.S. history. Keep it lively, engaging, and tasteful. Add appropriate background music and sound design.

Grainy sepia silhouettes with a year stamped in the corner of each scene: wagons rolling west in the 1840s, a steamship gliding past the Statue of Liberty in 1886 beneath the line "Give me your tired, your poor...", the crowds of 1963, and fireworks over "250, 1776-2026." From the two words "sand animation," Opus derived the sepia grain, the silhouettes, and scene transitions that look like sand being swept.

13. Four Seasons Through a Train Window

From Ole Lehmann's post: 264 likes, 30 seconds.

4 seasons passing outside a train window, a cozy carriage, a cup of coffee on the table, Grand Budapest Hotel style

A locked, symmetrical frame of purple curtains, two table lamps, and a coffee cup never moves, while the view outside cycles through spring, summer, autumn, and winter and back to blossom, with a pink hilltop palace in the distance. Four words of film reference brought the symmetry, the pastel palette, and the pink building.

Each of the three narrative pieces names a medium or a reference: origami, sand, a Wes Anderson film.

Patterns Across the 13 Prompts

The one-sentence showreel prompt gave polished reels that could belong to anyone. The launch videos that pass for a real company had real inputs behind them: an actual product, screenshots, a palette, photos or footage from the creator. Rexan Wong's summary: "everyone has the same model. the context you give it is what makes it look pro" (post, 6,730 likes).

Six of the 13 prompts specify a duration or a tempo, and that group contains the two most-liked videos in this list (#1 and #5). Across all 475 public videos, half run between 15 and 43 seconds. Leave the length out and Opus decides on its own: klöss's one-line history prompt gave no duration and returned a video just under three minutes long.

The creators also named styles: origami, sand animation, Grand Budapest Hotel, Apple keynote, Dribbble-level UI motion. Each of those names encodes a palette and a pace that would take a full paragraph to spell out.

The longest prompts put a planning step ahead of the animation. They ask for a beat map, a list of states, or still frames before code gets written, so problems show up while they are still cheap to fix.

Time and cost range widely. At the fast end, about a minute and $2 (Deedy Das). At the slow end, about eight hours for a launch video whose soundtrack was itself written in code (Leon Lin). Between those: 15 minutes (Chain), 19 minutes including two revisions (David Ch), and three prompts (Miles).

Limits of Code-Rendered Video

• It can't film anything. For a realistic person or location you need a camera or a video generation model like Veo or Seedance. Opus can edit that footage and layer type and graphics over it, but only in a setup that can load video files, for example Claude Code with Remotion, where the <OffthreadVideo> component drops clips into a composition. The browser tool covered below works from a text description and doesn't accept video input.
• It won't record songs or voiceovers. In #4 and #5 the creators brought the music and Opus synced the animation to it. Opus can generate audio in code, as Leon Lin did for a full soundtrack and sound effects, but a recorded track or voiceover has to come from another source.
• It doesn't know your brand. Without a reference, a logo, and a palette, output slides back toward the same centered-text look.

Make Your Own Opus 5.5 Video

Choose an entry point based on what you already have:

• To test what the model does on its own, run the showreel prompt from #1.
• To announce a product, reuse the launch structure from examples 2 through 4 with your product name, three features, and brand colors.
• For more than 30 seconds, or for your own footage and audio, work in Claude Code with a renderer such as Remotion or HyperFrames.

Option 1: Run Your Own Render Pipeline

Pair Claude Code with a pipeline that opens the HTML in a headless browser, captures every frame, and encodes with ffmpeg. The Hugging Face walkthrough has the setup details. This path supports long videos, audio, and footage.

Option 2: Use a Hosted Browser Tool

opus6.video runs Claude Opus 5.5 on its side, so there's no Claude subscription and nothing to install. Write a description or start from a template like Designer showreel, App launch video, or Product walkthrough, then choose 16:9, 9:16, or 1:1 and a length of 10, 15, or 30 seconds. Opus 5.5 drafts a storyboard and writes the scenes, you iterate in chat, and the result downloads as a 1080p MP4. Each video maxes out at 30 seconds, and exports have no audio, so music goes in during editing.

The same site keeps a gallery of finished videos next to the prompts that made them.

FAQ

Is There a Length Limit on Opus 5.5 Videos?

Not when you render locally; the examples here span 14 seconds to almost 3 minutes. Render time grows with length, because each frame is drawn and captured individually. The hosted browser tool above caps each video at 30 seconds.

Can These Prompts Be Reused?

Yes, as templates. Replace the product, subject, and palette with your own. The videos belong to the people who made them, so link back to their original posts.

This article was drafted with AI assistance. opus6.video is built by the author.