{"slug": "making-a-launch-video-for-claude-opus-5", "title": "Making a launch video for Claude Opus 5", "summary": "Anthropic shipped Claude Opus 5 today. An engineer created an unofficial 55-second launch video using the brand's exact design tokens, including colors, typefaces, and SVG paths, with transitions chosen by tone and animations driven by position rather than frames.", "body_md": "Anthropic shipped Claude Opus 5 today. Nobody asked us for a video, so we made one anyway — fifty-five seconds, twelve beats, every claim on screen lifted from the launch post itself. This is the hardest kind of unofficial spot to get away with: the brand is one most people look at daily, so a color that's a shade off or a serif that isn't quite the right serif reads instantly. Nothing here is eyeballed.\n\n`claude-opus-5`\n\narrives in clay.**The brand is Claude's own, down to the woff2.** The palette is read off claude.com's live stylesheet — the gray ramp for the stages, `--color-oat`\n\n, `--color-olive`\n\nfor anything verified, and `--color-clay`\n\n`#d97757`\n\nas the one accent, spent only on the payoff word, the winning bar and the spark. The type is the three faces the site actually serves, vendored and gated behind `delayRender`\n\nso a frame never catches the fallback mid-swap, set at the site's own scale. The spark, the wordmark and the \"By Anthropic\" mark are the shipped SVG paths — and for the outro the wordmark is split at its subpath boundaries into six glyphs that each keep their counter, so C-l-a-u-d-e animate independently while staying Anthropic's own letterforms. Taken apart, never redrawn.\n\n**Transitions are chosen by tone, not by variety.** Three grammars carry the whole film: a lateral slide (the outgoing scene shoved left, the incoming springing in from the right), a vertical rise, and a settle (the outgoing scene shrinking away as one group, one empty gap frame, the incoming items landing from above-1 scale). A slide hands the stage over while the content is still travelling, so the stage color has to crossfade across the slide window — gorgeous between two scenes in the same tonal world, and six frames of flat mid-grey when paper dissolves into near-black. So every big tonal jump takes the settle, whose color change happens inside the empty gap frame and lands instantly; the lateral moves ride the pairs that already share a tone. Twelve scenes, one continuous canvas, no slideshow.\n\n**No scene is allowed to arrive blank.** The flip side of a clean hand-off: a slide gives the incoming scene a bare stage, so a scene whose first reveal starts at local frame 0 rides in as an empty card — the exact slideshow feel the cut exists to avoid. Every sliding scene pre-rolls its own clock by twelve to twenty frames, so its opening element is already on screen and moving as it arrives, while the rest of its reveals still land on their spoken cues.\n\n**Two properties of one element never share a curve.** Opacity rides a short quad ramp; transform rides a long exponential or a damped spring roughly three times its length. Stagger compresses rather than marching — `pow(i, 0.8) × base`\n\nwith a deterministic one-to-two-frame jitter — and children follow through, a check landing a few frames after its row on a looser damping. It is the difference between a slide that faded in and something that arrived.\n\n**The outro is driven by position, not by frames.** The spark's travel is one unbroken curve: a short counter-move to wind up, an accelerating sweep that eats the line, and a hand-off — with the slope still high — into a continuing acceleration straight off-scene. Each glyph's fate is a function of where the mark *is*, not of what frame it is, so the bite always lands exactly as the spark passes over, whatever the curve does. The spin is one constant rate, held from launch to the last blurred frame; it survives that speed because the mark has no rotational symmetry to alias against.\n\nThe brief, as a prompt (validated against a clean project + the [remocn skill](https://remocn.dev/docs/ai/agent-skill) before publishing):\n\n```\nI'm making an unofficial launch video for Claude Opus 5\n(anthropic.com/news/claude-opus-5) with remocn (remocn.dev) in a Remotion\nproject — install anything you need with `npx shadcn add @remocn/<name>`.\nEvery claim on screen must come from that page, verbatim or cut.\n\nBuild a ~55-second, 1280×720, 30fps introducing spot in twelve beats:\n\n1.  Tradeoff — \"Frontier intelligence\" lands alone on warm paper, \"Or a price you can run every day\" swaps in beneath it, then both dim and lift as \"Until today, you picked one\" lands below.\n2.  Name — black stage; the real Claude spark scales in on a rotation settle, \"Claude Opus 5\" lands beneath with \"Opus 5\" one beat behind \"Claude\". Then hold — camera only.\n3.  Promise — \"It comes close to the frontier intelligence of Claude Fable 5 at half the price\", with \"half the price\" in clay on its cue; the Max/Pro availability line ruled off beneath.\n4.  Frontier-Bench — two bars on an asymmetric plot: Opus 4.8 in muted grey, then Opus 5 in clay past double its height, a count-up landing on \"double\" and the cost line falling beside it.\n5.  Board — four benchmark rows arriving from the right, one per cue — CursorBench 3.2, ARC-AGI 3, Zapier AutomationBench, OSWorld 2.0 — each a name → ratio pair, the ratio following through behind its label.\n6.  Mechanism — dark stage, an agent transcript writing itself: the FreeCAD ask types in, three steps check off in olive, and the receipt lands in serif: \"No competing model solved it in five attempts.\"\n7.  Outside voice — Framer's quote under a short clay rule, held still, attribution muted beneath.\n8.  The bill — three efficiency counters on oat, the biggest number last and in clay, the Citadel and LexisNexis attributions ruled off under.\n9.  Alignment — one claim, one number, then a held frame.\n10. Price — \"$5\" and \"$25\" land as a pair; the pair anticipates downward and lifts to make room for \"The same price as Opus 4.8\"; then `claude-opus-5` in clay with \"on the Claude API\" beside it.\n11. End card — the real Claude lockup holds, then the spark winds up with a counter-move, launches right and eats the wordmark letter by letter, flying off-screen and blurring out into its own speed.\n12. Sting — black, empty for a full second past where the film should have ended, then \"Available today\" fades up dead-center and never moves.\n\nStyle: tokens read off claude.com's live stylesheet — #f0eee6 paper,\n#faf9f5 ivory, #e3dacc oat, #141413 / #1f1e1d dark stages, #73726c muted\nink, with #d97757 clay as the ONE accent (the spark, the payoff word, the\nwinning bar) and #788c5d olive reserved for anything verified. Claude's\nown three faces: serif for every spoken headline, sans for body and data\nlabels, mono for numbers, model ids and the transcript — at the site's own\ntype scale, sentence case, default tracking. Use the real spark and\nwordmark SVG paths; split the wordmark into glyphs for the outro rather\nthan redrawing it.\n\nSequence all twelve scenes on ONE stage so the stage color is continuous\nand scenes never overlap. Three transition grammars, chosen by TONE not\nvariety: a lateral slide (A shoved left, B springs in from the right) and\na vertical rise only between scenes that already share a tone; a settle\n(A shrinks and fades as one group, one empty gap frame, B's items land\nfrom above-1 scale) for every big tonal jump, so the color change happens\ninside the gap. Pre-roll each sliding scene's internal clock by 12–20\nframes so it never arrives as a blank card. A slow camera scale runs under\nevery scene, split across three depths. Two properties of one element\nnever share a curve: opacity on a short quad ramp, transform on a long\nexponential or a damped spring ~3× as long; compressing stagger with a\ndeterministic jitter; children follow through a few frames behind their\nparent. A vignette and one small clay spark hold above everything from\nbeat 3 to beat 10 so the cuts read as camera moves inside one film.\n\nNo letter-spacing, no uppercase, no badges, no eyebrows, no pulsing, no\ninstall pills, no bounce as a default.\n```\n\nThe generic recipe is [Launch video](https://remocn.dev/docs/guides/launch-video); the part that makes a spot feel like it came from inside the company — pointing your agent at the site's own tokens — is [Your brand](https://remocn.dev/docs/guides/your-brand).", "url": "https://wpnews.pro/news/making-a-launch-video-for-claude-opus-5", "canonical_source": "https://dev.to/remocn/making-a-launch-video-for-claude-opus-5-2jlo", "published_at": "2026-07-24 20:15:50+00:00", "updated_at": "2026-07-24 20:33:27.534454+00:00", "lang": "en", "topics": ["artificial-intelligence", "ai-products", "developer-tools"], "entities": ["Anthropic", "Claude Opus 5", "remocn", "Remotion"], "alternates": {"html": "https://wpnews.pro/news/making-a-launch-video-for-claude-opus-5", "markdown": "https://wpnews.pro/news/making-a-launch-video-for-claude-opus-5.md", "text": "https://wpnews.pro/news/making-a-launch-video-for-claude-opus-5.txt", "jsonld": "https://wpnews.pro/news/making-a-launch-video-for-claude-opus-5.jsonld"}}