Claude JavaScript Video · 86 Styles for Motion Graphics and Explainers

Quick Summary

• Futurepedia demonstrates a code-built video workflow in which Claude writes a self-contained HTML and JavaScript animation instead of asking a generative video model to invent pixels. The result is suited to motion graphics, diagrams and explainers because text, timing, colors and individual objects remain editable.
• The free AI Style Atlas contains 86 ready-made looks across 14 families. Every entry includes a 15-second preview, a shorter style clip, complete source code, a generated sound kit and a copy-ready prompt that can be adapted to a new topic.
• For a silent or music-led explainer, choose a style, enter a topic, decide whether to request a storyboard, then paste the generated brief into a new Claude conversation. Futurepedia demonstrates this with a glassmorphism explanation of noise-cancelling headphones.
• For narration, make or record the voice first, generate a timestamped transcript, select voiceover mode and provide both the transcript and audio. Word-level timings offer fine control for short pieces; line-level SRT is more manageable for longer videos.
• The consistency advantage comes from giving Claude the actual implementation of the reference style. The model modifies working code instead of trying to infer motion, easing and sound from a few screenshots of a reference video.
• The Atlas is free to access after registration, but generation is not unlimited. Claude, Gemini, ElevenLabs or any other narration and transcription service can have plan limits, usage costs and privacy implications that should be checked before production.

What this method is, and what it is not

Futurepedia published Claude Makes a New Kind of Video on October 19, 2026. The central idea is simple: Claude does not need a diffusion or text-to-video model to make a graphic film. It can write the page that draws the film, calculate what belongs on screen at any moment and attach sound cues to the same timeline.

This is best understood as programmatic motion design. The Canvas API gives JavaScript a drawing surface for animation, data visualization and other graphics. The Web Audio API can generate or process timed sound. A renderer can then capture the composition frame by frame and encode those frames with the audio into an MP4.

That makes the method fundamentally different from Seedance, Kling or another generative video model. It is strong at designed shapes, diagrams, type, charts, UI demonstrations and stylized illustration. It is not the obvious choice for photoreal actors, natural cinematography or physically complex footage.

Inside Futurepedia's free 86-style Atlas

Futurepedia created the AI Style Atlas to remove the blank-page problem. Its public page currently lists 86 visual styles grouped into 14 families, with examples including watercolor, whiteboard, synthwave, claymation, blueprint and Manim-style mathematics. The tutorial also previews 16-bit pixel art, chalkboard, cut-paper diorama, glassmorphism and flat-vector science.

Every style explains the same subject, how AI learns, in a 15-second sample. Because the message stays constant, readers can compare hierarchy, pace, transition language and legibility instead of being distracted by different topics. A shorter build clip shows how the style assembles a scene.

The important asset is not only the visible preview. Every Atlas entry includes a copy-ready Claude prompt containing the full source code and a sound kit. The page also exposes storyboard and voiceover modes, and says the generated composition targets a 1280 by 720 canvas that can be rendered frame by frame for MP4 delivery.

Open the complete library in Futurepedia's free 86-prompt AI Style Atlas viewer, linked in the sources below. The viewer lets you filter the collection, switch between the 15-second explainer and the shorter style clip, choose a voiceover or no-voiceover workflow, request a storyboard and copy the complete prompt.

Access is free after registration at Futurepedia. The Atlas prompt is a starting implementation, not a guarantee that every topic will fit every aesthetic. Test the selected style with real content before turning it into a house style.

The 86 prompts, organized into 14 visual families

The viewer currently organizes its 86 styles into Hand-Drawn (7), Painterly (6), Print (6), Paper & Craft (7), Illustration (7), Art & Design Movements (6), Retro Digital (7), Retro UI & Neon (6), Dimensional (6), Light & Imaging (7), Data & Information (6), Generative & Type (6), Popular Explainer Looks (7), and Cosmic & Psychedelic (2).

Use Hand-Drawn, Painterly, Print, Paper & Craft or Illustration when character and material personality matter. Use Retro Digital, Retro UI & Neon, Dimensional, Light & Imaging, or Generative & Type when the motion system should carry more of the spectacle. Use Data & Information and Popular Explainer Looks when hierarchy, labels and diagrams must stay primary.

The full source-code prompts and sound kits remain in the original Atlas viewer. The prompt pack later in this article adds original adaptation briefs that can be used after copying a style from Futurepedia. This keeps the original resource properly credited while giving you practical production controls for a new topic.

Six embedded Atlas previews to compare before you build

These public previews come directly from Futurepedia's AI Style Atlas. Compare them at the intended delivery size and pay attention to information density, transition language, text duration and how much visual texture competes with the explanation.

Flat-Vector Science is a clean educational default. Whiteboard Explainer favors sequential teaching. Tech Glow works for interfaces and digital systems. Manim-Style Math prioritizes equations and diagrams. Editorial Essay Collage feels more authored and narrative. Product Launch Reveal is designed around a controlled commercial payoff.

Open the full viewer for all 86 examples and their copy-ready code prompts. The six videos below are a curated sample, not a replacement for the original collection.

Choose a visual language for the information

A style should solve a communication problem. Glassmorphism can clarify layered systems and product interfaces. Flat vector graphics work well for science and education. Chalkboard and whiteboard looks suit sequential teaching. Pixel art can make software history or game topics feel playful. Blueprint and technical diagram styles support construction, engineering and process explanations.

More decorative looks such as cut paper, claymation or watercolor are useful when emotion and memorability matter more than data density. They need stricter text limits because texture and layered surfaces already consume visual attention.

Before copying a prompt, decide four things: who will watch, what they must understand, where the video will play and how long they can look at each beat. A good style selection is the one that makes the answer clearer at the target size, not the one with the most effects.

Workflow one: generate an explainer without voiceover

Futurepedia chooses the glassmorphism entry and enters a simple subject, how noise-cancelling headphones work. The Atlas combines that topic with the style implementation and creates a long prompt ready for a new Claude conversation.

Storyboard mode asks Claude to show the major visual beats before building the full animation. Keep it on when facts, sequencing or client approval matter. The preview lets you fix the explanation while changes are cheap. Turn it off for a fast experiment when the reference sample already makes the likely result obvious.

After approval, ask Claude to build the complete composition. Review the pacing, whether each transition explains something and whether the generated sound reinforces actual visual events. Futurepedia reports using Opus for the primary example and getting a comparable result from Sonnet. A test with ChatGPT and Astra also worked, although the creator preferred Claude's result. These are creator observations, not controlled benchmark results.

Why the long prompt includes real code

The Atlas prompts are long because they include the implementation behind the example. Claude receives the drawing functions, timing system, motion rules and sound ingredients that produced the reference, then adapts those pieces to the new subject.

That is more reproducible than sending a compressed video and asking for the same style. A model analysing video may work from selected frames and infer what happens between them. Source code exposes the exact object positions, colors, easing, draw order and event timing, so the model starts from working behavior instead of reconstructing it from appearance.

The practical rule is to preserve approved mechanics. Change content, labels and scene structure first. Change the visual system only when there is a specific reason, such as insufficient contrast, slow pacing or a palette conflict with the brand.

Workflow two: synchronize the animation to a voiceover

Futurepedia generates a short narration about how stars form with Gemini 3.8 Flash TTS in Google AI Studio. Google's current documentation describes Gemini 3.8 Flash TTS as a text-to-speech model with controllable voice, pace, tone and style. The same workflow can start from a human recording or another authorized voice service.

The animation also needs timing data. The tutorial asks Claude for a word-level SRT transcript, then pastes those timings into the Atlas voiceover mode. Google now documents word-level timestamps in Gemini 3.5 Transcribe, while many editing and transcription tools can produce line-level SRT. Word timing is useful for a short film because a visual can land on one exact phrase. For longer pieces, line-level segments keep the prompt and timeline smaller.

After copying the combined prompt into Claude, attach the audio file. The generated artifact exposes a Load voiceover action, so the narration becomes the clock for the visual sequence. Uploading the audio with the initial request is cleaner, but the tutorial confirms that adding it after the composition is created can still work.

Do not let timestamps replace editorial judgment. A graphic should appear when it helps the viewer form a mental model, not every time a noun is spoken. Reserve precise word hits for definitions, reveals, comparisons and conclusions.

Edit the system instead of regenerating the film

Code makes revisions local. Ask to slow one transition, keep a label on screen for another second, increase contrast, reserve space for a presenter or replace the palette without disturbing approved scenes. The model can change the relevant variables and functions instead of inventing the whole result again.

Keep a short change log. Record the approved palette, typography, transition durations, sound level, safe areas and forbidden effects. When an edit improves the result, add the rule to the template. When it does not, revert the code rather than layering more corrective prompts onto a broken version.

Once the look survives two or three different topics, ask Claude to package it as a reusable skill or starter project. A repeatable system should accept content, duration, aspect ratio, voiceover and brand tokens as inputs while keeping rendering and quality checks stable.

Render, inspect and export the real deliverable

A smooth browser preview is not final proof. Render the intended frame rate and resolution, combine the audio, then inspect the MP4 on the device and platform where it will be published. Text can wrap differently, audio can clip and a transition that feels smooth in real time can expose a bad frame when encoded.

Create a contact sheet with representative frames from every scene. Check title-safe margins, contrast, spelling, alignment, clipping, transition continuity and whether the visual hierarchy remains clear without sound. Then listen once without watching to catch abrupt effects, level jumps and a soundtrack that competes with narration.

For vertical delivery, do not simply crop a 16:9 master. Ask the composition to calculate a native 9:16 layout, shorten lines and move important objects inside mobile safe areas. Deterministic code makes multiple aspect ratios easier, but each layout still needs its own review.

Plain JavaScript artifacts versus Claude Motion

This Futurepedia tutorial uses a copied code prompt inside a normal Claude workflow. It should not be confused with Anthropic's separate Claude Motion template. Anthropic describes Motion as a beta Artifact template that builds short code-based explainers, charts and product walkthroughs, supports targeted edits and exports MP4 directly.

As of the evidence cutoff for this article, Claude Motion is documented for Team and Enterprise plans. General Artifacts, including code snippets, single-page sites and interactive tools, are documented across Claude plans when cloud code execution and file creation are enabled. Account interfaces and entitlements can vary during rollout, so check the current Output menu and organization settings.

Use the Atlas route when you want a broad visual reference library and portable source code. Use Claude Motion when your account includes it and the built-in editor and MP4 export reduce friction. Use Remotion or HyperFrames when you need a maintainable production repository, reusable components, automated rendering and many episodes in the same system.

Limits, costs, privacy and creative rights

The Atlas is promoted as free, but free access does not mean unlimited production. Futurepedia says the creator used a substantial amount of model usage to generate the library. Long prompts containing source code, repeated revisions, narration, transcription and rendering can consume plan allowances or paid API usage.

Treat uploaded audio and scripts as production data. Do not place confidential client material, unreleased product information or a person's voice into a service until its storage, training, retention and sharing terms match the project. Use only voices, logos, fonts and reference media you are authorized to use.

A named aesthetic is not permission to copy a living artist, protected character or another brand's distinctive campaign. Use the Atlas as a vocabulary for materials, movement, hierarchy and technique, then adapt those ingredients into an original system for the project.

A practical production recipe

Begin with a 15-second piece containing three beats: the problem, the mechanism and the result. Pick three Atlas candidates and compare their previews at the real delivery size. Select one, enter the topic and keep storyboard mode on for the first attempt.

If narration is required, approve the script and voice first. Produce word-level timestamps for a short piece or line-level timings for a longer one. Paste the transcript into voiceover mode, attach the audio and ask Claude to use the supplied timing as the master clock.

Review the storyboard, render the first pass, note no more than five high-impact corrections and request targeted edits. Export an MP4, inspect a contact sheet and test the audio. Save the final source with the brief, assets, timing file and approval notes. After the workflow succeeds on a second topic, convert it into a reusable template or skill.