Claude Motion Graphics: Five Original Briefs and a Practical Workflow

Motion graphics can begin as code. A language model such as Claude writes an HTML scene, and a browser draws the scene at specific times. Those frames become an MP4 through a separate encoder. The useful distinction is practical: you can inspect the words, shapes and timing in the code instead of treating the result as an opaque video file.

This guide uses five original Vidrial briefs. The illustrative scenes are authored examples, not claimed results from Claude or any other named model. When a preview is present, it comes from a verified render of our own scene code. When a preview is absent, its brief is still available to copy. Model calls and production worker rendering depend on the configured deployment; an example does not establish that either is live.

You can explore the complete prompt library, start with the motion gallery, or read the Motion Studio contract and privacy guide.

How code becomes a film#

The scene is one self-contained HTML file. Canvas, SVG, CSS or local WebGL can describe its imagery. The scene declares a duration and exposes a seek function that redraws the complete frame for a requested time. Seeking to four seconds must produce the same result whether the previous request was for zero seconds, seven seconds or four seconds again.

That rule excludes wall-clock animation loops. Date.now, timers and unseeded random calls change the output depending on when or how it runs. Instead, positions, opacity and camera transforms come from the requested time. A seeded random generator can define stable visual variation, but the seed must not change between frames.

The renderer waits for fonts, seeks each frame in order and captures the viewport. FFmpeg encodes those frames with a broadly compatible video codec and pixel format. Procedural audio can be rendered offline and muxed when the scene and renderer support it. Audio support must be checked from the exported file; it is not implied by a soundtrack request in a prompt.

A successful script evaluation is only the beginning. The renderer also checks the file's duration, dimensions and codec, samples opening, middle and final frames, and supervises encoder failure. A still preview is not evidence that a full export completed.

Five briefs to work through#

Each example gives the scene one job. Copy the brief and replace its exact strings with your own authorised copy. Treat a result as a first draft: the generated model version may differ substantially from the authored illustration below.

1. Showreel: one line through three studies#

The showreel brief gives one moving line continuity across a grid, an orbit and a title. It avoids an unrelated list of impressive effects. The authored example explores geometric rhythm; a model is free to find a different transition as long as the same visual idea connects the beats.

8s · 16:9 · Original authored example, not a claimed AI generation

Create an 8-second landscape motion design study titled 'Form follows rhythm'. One coral line is the protagonist: it becomes a grid, bends into an orbit, then resolves into the underline beneath the exact title. Use only charcoal and cool neutrals elsewhere. Connect the three sections through that same line rather than a montage of unrelated effects. Keep the last title readable. No real company marks, footage or external assets. Present a beat sheet and four keyframes, then produce one self-contained seekable HTML file with window.DURATION = 8 and async window.seek(t). All motion and any procedural sound must be reproducible from time.

Copy promptTry this prompt in Vidrial

What to inspect in the model's version: can you follow that same line between sections, and does the final title remain readable? If a transition overwhelms the story, ask it to preserve the line's position through the cut and leave a longer closing hold. If every section looks identical, ask for a clearer contrast in scale rather than more effects.

2. Logo reveal: assembly before announcement#

This fictional mark uses two strokes and a crossbar. Its story is assembly followed by recognition. It does not ask the model to invent a complicated identity or distort an existing logo. Replace the fictional mark only with artwork you own or are authorised to use; real brand geometry must be preserved.

8s · 1:1 · Original authored example, not a claimed AI generation

Create an 8-second square logo study for the fictional name 'Aperture Notes'. Use an original simple A formed from two charcoal strokes and a coral crossbar, then reveal the exact name beneath it. This is a fictional mark, not Vidrial's logo or an existing company identity. Let assembly feel precise and the last two seconds feel still. Avoid glow and distortion. Explain four keyframes and beats, then draw it inside one self-contained HTML file with window.DURATION = 8 and async window.seek(t). No external images or network.

Copy promptTry this prompt in Vidrial

What to inspect: the wordmark should appear after the emblem settles, not while it is still ambiguous. Check clear space on the small screen. A useful refinement is “make the second stroke land more gently, then hold the complete name for two seconds.” Requesting a glow or more particles would not solve either readability problem.

3. Kinetic typography: give the sentence room#

The exact sentence matters more than a named animation effect. Three short clauses carry a progression from a small beginning to clear direction and continued effort. The brief assigns a feeling to each clause while leaving the implementation open.

8s · 9:16 · Original authored example, not a claimed AI generation

Create an 8-second vertical kinetic typography piece using exactly 'Small steps. Clear direction. Keep going.' Let 'Small steps.' arrive quietly, give 'Clear direction.' a deliberate confident pause, and settle 'Keep going.' into a calm final hold. Build the meaning through spacing, scale and timing rather than decorative effects on every letter. Charcoal type on a pale cool field, with one coral punctuation accent. Respect mobile margins. Start with beats and four keyframes, then write one self-contained HTML animation with window.DURATION = 8 and async window.seek(t), using embedded or system fonts only.

Copy promptTry this prompt in Vidrial

What to inspect: read it at normal playback speed without pausing. The last line should feel resolved rather than rushed. If a word jumps off-screen, request safer margins and a more stable baseline. If the rhythm is flat, change the pause after the second clause; do not animate every letter independently just to make it busy.

4. Spatial loop: a mathematical return#

The loop brief asks for perspective and depth without imported meshes. It also requires the ending state to agree with the beginning. Periodic functions of time make that requirement testable, although a technically closed loop can still have an awkward change in perceived velocity.

8s · 1:1 · Original authored example, not a claimed AI generation

Create an 8-second square seamless spatial loop with three thin rectangular planes rotating around a shared centre. Use perspective projection in Canvas or local WebGL; no imported meshes or libraries. The opening and ending states must match mathematically. Keep a charcoal background, cool planes and one coral edge so depth remains legible. Exact small caption 'Orbiting planes'. Avoid strobing or rapid camera movement. Plan four keyframes, then implement a self-contained HTML file with window.DURATION = 8 and async window.seek(t), deriving rotation from periodic functions of t and using no animation loop or network.

Copy promptTry this prompt in Vidrial

What to inspect: replay the boundary several times and watch the front edge of the nearest plane. If it jolts, ask the model to match both the position and speed at the loop boundary. If depth is confusing, a fixed camera and one accent edge may communicate more than a moving camera. Check the actual exported loop too, because encoding and frame selection affect the boundary.

5. Data story: protect the numbers#

This brief contains a deliberately fictional reading log. The values are exact strings and numbers, and the disclosure is part of the visible composition. The chart must use a common zero baseline and proportional bars. Those requirements carry more meaning than a polished transition.

8s · 16:9 · Original authored example, not a claimed AI generation

Create an 8-second landscape data story using only this fictional example dataset: 'Monday': 12, 'Tuesday': 18, 'Wednesday': 15, unit 'pages'. Show the exact title 'Example reading log' and the visible disclosure 'Fictional data'. Start at a common zero baseline, reveal the three bars in order, then hold the complete comparison. Use honest proportional heights and all numeric labels; do not invent a growth claim or extrapolate. Cool-neutral bars with coral on Tuesday. Write beats and four keyframes first, then one seekable HTML file with window.DURATION = 8 and async window.seek(t), no external chart library.

Copy promptTry this prompt in Vidrial

What to inspect: verify every label and value against the supplied data. Check that the tallest bar is truly the largest value and that the fictional-data label stays visible. If a model adds a percentage or growth headline, remove it unless you supplied and verified that claim. A refinement might ask for longer label holds and less movement while all three values are on-screen.

Write a brief the model can reason about#

Start with duration and aspect ratio. Eight seconds in a vertical canvas puts a different reading budget on the screen than a thirty-second landscape explanation. Place the key message safely inside the composition and tell the model what must remain visible at the end.

Describe one coherent story. “A scattered idea becomes a clear card” gives the model a beginning, a change and a resolution. A list of transitions does not explain what the viewer should understand. A useful beat sheet connects each moment to the next through an object, a question or a change in state.

Supply exact copy and verified data as strings. Put product names, labels, dates and numbers in quotes. State whether the data is fictional, and require any disclosure to stay visible. The model should not fill missing claims with plausible statistics or replace a careful sentence with marketing language.

Describe emotional timing before prescribing effects. “The opening feels hesitant; the final hold feels settled” explains the purpose of a pause. Exact effect instructions are useful when correcting a concrete defect, but they can limit a first draft before the model has found a coherent visual approach.

Leave creative latitude around those constraints. Specify the palette, type hierarchy and motion temperament, then ask for a beat sheet and four keyframes before the full scene. After implementation, ask the model to review its own code for deterministic behavior, missing labels and unreadable transitions. Code review is useful; watching the rendered frames is still necessary.

DIY or Motion Studio?#

DIY is a reasonable route when you want to change the renderer or maintain a local animation project. It also makes you responsible for untrusted code execution, dependency pinning, font licenses and cleanup after a crash. Never run arbitrary generated HTML beside production credentials just because it renders correctly.

Motion Studio puts the brief, private preview, version history and export queue in one workflow. Availability remains explicit: a deployment without a model adapter or isolated worker cannot offer a working generation or download. The public creation panel preserves a private browser draft during sign-in, while the app checks actual capabilities and limits.

Reference analysis is a separate permission boundary. When enabled, it can study authorised reference frames for pacing, palette and transition principles. That should inform a new composition, not reproduce the source's content or grant rights the uploader does not have.

Review the downloadable result#

Watch the opening, midpoint and ending. Read every visible string. Scrub backwards and forwards to check deterministic behavior. Inspect the target size on a phone, and check sound only if the exported file actually contains an audio stream. A final frame should be intentionally held rather than accidentally empty.

Keep factual review separate from visual polish. A confident animation can make an unsupported number seem authoritative. Data labels, rights, model provenance and fictional disclosures deserve the same care as easing curves. You decide whether the work is ready to publish.

Open-source foundations and attribution#

Seek-based animation workflows are developed in open-source projects including BreakDimbo's JavaScript animation skills, iart-ai's motion skills and hculap's motion graphic skill. Their work provides useful contract, review and timing ideas. Playwright supplies browser control and FFmpeg supplies encoding and inspection. The repository records applicable source and license notices in THIRD_PARTY_NOTICES.md when code is adapted.

Vidrial's official examples are original authored work. Claude and Anthropic are names used to describe compatibility; Vidrial is not affiliated with Anthropic. Choose an original prompt, adapt one clear story, and check the actual capability state in Motion Studio.