Oct 21, 2026year 2026relevance 63319 min read

Claude + Three.js · Premium 3D Motion Graphics from Code

Matt Penny shows how Claude can build browser-rendered 3D explainers with Three.js, moving cameras, reflective materials, particles and glass-like interfaces. This researched guide turns the demonstration into a repeatable production workflow, adds an original prompt pack, explains the real cost and quality tradeoffs, and recommends the best stack for each kind of project.

Video credit: Matt Penny | Applied AI.Source video: Claude + Three.js = Premium 3D Motion Graphics.

Quick Summary

Matt Penny demonstrates five code-rendered motion pieces: a glass-like particle environment, a metallic LLM explainer, a RAG vector visualization, a paper-textured gradient-descent scene and a globe that explains internet messages.
The core pipeline is not an AI video generator. Claude writes a small web application, Three.js renders the 3D scene, a browser captures deterministic frames, and FFmpeg assembles those frames into a video.
Three.js is a JavaScript 3D library, not the whole motion-design system. Camera direction, materials, lighting, typography, compositing, post-processing, timing and quality control determine whether the result feels premium.
The video's 37,000-output-token example correctly works out to $0.74 at Claude Opus 5.5's current $20 per million output-token API rate. Input tokens, cache use, retries, subscription allocation, hardware, assets and labor are additional costs.
Programmatic 3D is strongest for crisp text, UI, diagrams, reusable brand systems and precise revisions. Generative video remains better suited to organic, photorealistic or performance-led footage. These approaches can also be combined.
For a short standalone graphic, vanilla Three.js is the leanest default. Use React Three Fiber when the project already uses React, Remotion when timeline and media composition matter, and a custom Playwright plus FFmpeg pipeline when low-level deterministic export is the priority.

--what to try first

Write the story and scene timings before asking for code. One visual idea per beat is easier to read and easier to revise.
Specify output dimensions, frame rate, duration, safe zones and the exact seconds at which each scene begins and ends.
Use camera movement to reveal spatial relationships, not as decoration. Move either the camera or the subject aggressively, rarely both at once.
Start with standard Three.js materials, lights and environment maps. Add custom shaders only when a specific surface or transition cannot be achieved cleanly with built-in tools.
Keep important text in HTML or SVG layers when possible. Three-dimensional text can be useful, but ordinary web typography is usually sharper and easier to edit.
Render from a frame number and fixed time step. Do not depend on requestAnimationFrame timing, wall-clock time or unseeded randomness for exported frames.
Preload fonts, textures, models and environment maps, then precompile shaders before frame zero to prevent blank frames and first-use stalls.
Review a contact sheet before the final export. Check overlap, minimum text size, clipping, contrast, camera continuity and whether every scene communicates its intended point.
Treat model claims as workflow-specific. Benchmark two or three models against your own storyboard, correction loop and output requirements.
Three.js is open source, but production is not cost-free. Budget for model usage, retries, rendering hardware, licensed assets, sound, creative direction and review time.

What the video demonstrates

Matt Penny's examples show a useful middle ground between flat code animation and generative video. Claude creates the scene as code, while Three.js supplies a real 3D scene graph, cameras, geometry, materials, lights and GPU rendering. The result can be captured frame by frame like any other browser composition.

The strongest examples use depth to explain an idea. Vectors occupy a spatial field in the RAG sequence, a surface becomes an optimization landscape in the gradient-descent piece, and network connections travel around a globe. Three dimensions are doing explanatory work instead of merely adding polish.

The creator credits Claude Opus 5.5 as the best model in his tests. That is a practitioner judgment, not a universal benchmark. Anthropic recommends testing models with prompts and data from the actual workload, then comparing quality, edge cases, latency and cost.

What Three.js really does

Three.js is a JavaScript 3D library that abstracts much of the low-level WebGL work. A typical scene contains a renderer, scene and camera, then adds meshes, lights, materials and animation. The official examples gallery is the fastest way to understand what is already available before asking Claude to invent an effect from scratch.

It is more precise to say that Three.js enables the 3D layer than to call it the entire video framework. It does not automatically provide a film timeline, editorial structure, audio mix, captions, quality rubric or delivery workflow. Those responsibilities remain in your application or in a surrounding framework such as Remotion.

The transcript associates reflections, glow and particles with shaders. Shaders are important because they control how vertices and pixels are processed on the GPU, but they are not the only route. Standard physical materials, environment maps, lights, sprites, points and post-processing passes can create many of the same visual ingredients with less custom code.

The production pipeline, from brief to MP4

1. Define the message, audience, duration, format and delivery resolution. 2. Break the story into timed scenes. 3. Approve a text storyboard and one or two style frames. 4. Build the Three.js scene and any HTML or SVG overlay. 5. Load and validate every asset. 6. Drive all animation from the requested frame number. 7. Capture a PNG sequence in a controlled browser. 8. Assemble frames and audio with FFmpeg. 9. Review a contact sheet and representative motion segments. 10. Fix one class of issue at a time and render again.

At 60 fps, a 15-second video contains 900 frames. That is enough work for tiny inefficiencies to become expensive. A 30 fps proof is often the sensible first pass. Move to 60 fps only when the destination, motion or client specification benefits from it.

The browser approach is powerful because revisions remain declarative. Change the camera path, copy, material, color or timing in code and render again. You are not asking a video model to reinterpret the whole shot each time.

Best advice: choose the smallest stack that fits the job

Vanilla Three.js is the best default for a short, self-contained 3D explainer or looping brand graphic. It has the fewest conceptual layers, direct access to the renderer and a large official examples library. Choose it when one developer or agent owns the entire composition and low-level control matters.

React Three Fiber is the better fit when the product already uses React or when the 3D world should be divided into reusable, state-driven components. Drei adds practical helpers, but every extra abstraction is another dependency that Claude must understand and keep compatible.

Remotion plus @remotion/three is the strongest option when the work needs a real video composition system: exact frame-based timing, sequences, audio, captions, reusable episodes, a timeline and supported rendering. Its ThreeCanvas explicitly synchronizes React Three Fiber with Remotion's current frame, which removes a large class of nondeterministic export bugs.

A custom HTML, Playwright and FFmpeg pipeline is best for experiments, procedural visuals and teams that want to own every rendering step. It is also the easiest pipeline to accidentally make fragile. You must control viewport, device scale, fonts, asset readiness, randomness, frame time, browser version and encoder settings yourself.

Plan scenes and timing before writing code

The video's most transferable prompting lesson is specificity about what happens and when. A useful scene record contains start and end time, narration or message, visual state, camera state, subject motion, transition, on-screen copy and an acceptance criterion.

For a 15-second explainer, try three to five beats rather than fifteen micro-scenes. Establish the world, reveal the mechanism, show a transformation, then land the conclusion. Give the viewer time to understand each spatial relationship before the camera moves again.

Ask Claude to propose three concepts in plain text first. Select one, improve the metaphor and only then request implementation. This cheap decision gate prevents an agent from spending thousands of tokens polishing the wrong idea.

Build a premium visual system without effect overload

Start with a restricted palette, one material family, one type scale and a clear background treatment. Add a key light, softer fill, rim or environment light, then tune roughness and metalness before adding bloom. A coherent light and material system feels more expensive than a long list of unrelated effects.

Glass-like panels need more than transparency. Use restrained transmission or opacity, a visible edge, controlled background contrast and sufficient separation from whatever sits behind the panel. Protect legibility with an opaque text layer and avoid stacking many transparent surfaces, which can create sorting and performance problems.

For metallic forms, use a physically based material and a suitable environment map so there is something meaningful to reflect. For particles, prefer instancing, sprites or THREE.Points over thousands of separate mesh objects. For a paper style, texture and shadow direction matter more than a complex shader.

Camera motion should have a narrative verb: approach, orbit, pass through, reveal or pull back. Use easing and a stable point of interest. If the camera and every object move independently, the viewer loses the visual hierarchy.

Shaders and post-processing, used deliberately

Use ShaderMaterial when the design genuinely requires custom vertex displacement, procedural color, a special transparency model or an effect tied to uniforms such as time and audio amplitude. Keep uniforms named by purpose, expose safe parameters and include a simpler fallback material while debugging.

Three.js includes EffectComposer for an ordered chain of post-processing passes. A conservative stack might use one render pass, subtle bloom, color treatment and an output pass. The community postprocessing library is another strong option when you need optimized combined effects such as bloom, depth of field, outlines, tone mapping or chromatic aberration.

More bloom is not more premium. Use effects to support focus and depth, check gradients for banding, and preserve readable whites. If the pipeline uses HDR-like values, high-precision buffers and explicit tone mapping deserve attention.

Models, assets and typography

Use glTF or GLB for portable 3D assets. Three.js provides GLTFLoader and supports common compression and material extensions. Validate files before production and confirm that the asset license permits the intended commercial use.

Khronos recommends optimizing geometry, textures, materials and transparency for the target renderer. glTF Transform provides a reproducible command-line and JavaScript workflow for resizing textures, applying mesh compression and cleaning model data. Keep the original asset beside the optimized derivative.

Treat typography as a separate system. HTML or SVG text is often the safest choice for sharp, accessible labels and interface copy. Reserve 3D text for a deliberate object in the scene. Load fonts before rendering frame zero and test the smallest copy at the final delivery size, not only in a large browser preview.

Render deterministically at 30 or 60 fps

Every visible property should be a function of frame number. For 60 fps, time is frame divided by 60. Seed every random generator and avoid Date.now(), uncontrolled requestAnimationFrame loops, physics that depends on variable time steps and asynchronous content that may arrive after capture.

Set a fixed viewport, output resolution, device scale factor and color pipeline. Wait for document.fonts.ready, decoded images, textures, GLB models and environment maps. Ask WebGLRenderer to compile or compileAsync after lights and environment are configured so shader compilation does not interrupt the first captured frames.

Playwright can capture each page state as an image. FFmpeg's image2 workflow then reads a numbered image sequence into a video. Preserve an image-sequence master for difficult projects because it makes individual frame defects inspectable and lets you re-encode without rerendering the 3D scene.

The verification loop that catches expensive mistakes

Before a full render, capture the first, middle and last frame of every scene. Then create a contact sheet at regular intervals. Check blank frames, asset pop-in, clipped type, unsafe margins, overlapping panels, Z-fighting, transparent sorting, sudden exposure changes and camera paths that cross geometry.

Measure as well as look. WebGLRenderer exposes render calls, triangles, points, geometries and textures. Record those values for representative frames. If a scene stalls, Spector.js can inspect WebGL commands, shaders and textures rather than asking the model to guess blindly.

Run a final motion review at playback speed with audio, then a second pass muted. The first reveals synchronization and pacing; the second makes visual hierarchy problems easier to notice. Human approval is still required before client delivery or publication.

Cost reality check

Anthropic currently lists Claude Opus 5.5 at $4 per million input tokens and $20 per million output tokens on the standard API. At that output rate, the video's stated 37,000 output tokens equal $0.74. A complete API bill can also include input, cache writes, cache reads and additional correction runs.

The creator estimates roughly five cents under a Claude subscription and says the lowest plan could produce 400 similar videos per week. Those figures are allocation estimates, not a metered per-video price or guaranteed quota. Subscription usage limits, model availability and fair-use controls can change, and the amount of work per composition varies substantially.

Three.js, Playwright and FFmpeg are available without per-render licensing fees, but production still has costs: the AI plan or API, compute, storage, electricity, licensed fonts and 3D assets, sound, debugging, art direction and review. Compare the total approved-deliverable cost, not only the first generation.

Where this workflow wins, and where it does not

Programmatic 3D is an excellent fit for product launches, abstract technology explainers, data stories, logo environments, podcast overlays, feature demonstrations and branded social loops. These projects benefit from crisp copy, exact colors, repeatable layout and inexpensive revisions.

It is a weaker replacement for natural acting, documentary footage, complex organic simulation or a fully photorealistic location. Use a video model, conventional 3D package or filmed footage for those needs, then combine the result with code-rendered titles, diagrams and interface layers.

The best hybrid workflow often keeps brand-critical information in code and uses generated or filmed material as a controlled plate. That preserves legibility and editability without giving up cinematic texture.

A practical starter checklist

Choose one 10 to 15-second explainer with three scenes. Use a simple abstract subject, one camera, standard materials and HTML text. Render a 1280 by 720 proof at 30 fps. Do not begin with custom shaders, a large GLB environment or a complicated physics simulation.

Approve the storyboard, then the style frame, then the first five seconds. Add one premium feature at a time: an environment reflection, restrained bloom, particles or a camera pass. Keep the feature only if it improves the message at normal playback speed.

When the proof is stable, render at delivery resolution, create the contact sheet, review the encoded video, archive the source and asset licenses, and record the exact versions and command used. That small production record makes future revisions far safer.

Claude + Three.js production prompt pack

These original templates turn the public workflow into a safer production sequence. Replace every bracketed field, approve the concept before implementation and keep human review at each gate.

Prompt pack credit: Workflow inspired by Matt Penny | Applied AI.

1. Generate three concepts before code

Use this decision gate to explore the metaphor and camera language without spending tokens on implementation.

I need a [DURATION]-second [ASPECT RATIO] motion graphic explaining [TOPIC] to [AUDIENCE]. The single idea viewers must remember is: [MESSAGE].

Propose three distinct concepts in text only. Each concept must use 3D space to clarify the idea, not merely decorate it.

For each concept provide:
1. One-sentence visual metaphor.
2. A scene-by-scene timeline with exact start and end seconds.
3. Camera behavior and the reason for each move.
4. Main objects, materials, lighting and color palette.
5. On-screen copy, capped at [WORD LIMIT] words per scene.
6. Technical risk and a simpler fallback.
7. Why this concept is appropriate for [PLATFORM].

Do not write code yet. Avoid generic glowing dashboards unless the subject specifically requires them.

2. Turn the selected concept into a production brief

Locks timing, visual rules and acceptance criteria before Claude builds the scene.

Turn Concept [NUMBER OR NAME] into a production-ready brief for a Three.js motion graphic.

Delivery:
- Duration: [DURATION]
- Canvas: [WIDTH] x [HEIGHT]
- Frame rate: [FPS]
- Format: [MP4 / WEBM / IMAGE SEQUENCE]
- Safe zone: [MARGINS]
- Brand fonts: [FONTS]
- Brand colors: [COLORS]

Create a table-like scene plan in plain text. For every scene include exact frames and seconds, narrative purpose, visible objects, starting and ending transforms, camera position and target, easing, transition, copy, audio cue and acceptance test.

Then define global rules for typography, lighting, materials, depth, motion, particle count, post-processing and accessibility. Identify every external asset and its license requirement. Flag any part that would benefit from a standard Three.js material instead of a custom shader. Do not implement until I approve this brief.

3. Build the deterministic Three.js composition

Requests a lean implementation whose state can be reconstructed for any frame.

Implement the approved brief as a self-contained Three.js composition.

Requirements:
- Use [VANILLA THREE.JS / REACT THREE FIBER / REMOTION + @REMOTION/THREE].
- Drive every animation from an explicit frame number. time = frame / [FPS].
- Do not use wall-clock time, uncontrolled requestAnimationFrame state or unseeded randomness.
- Keep editable text in HTML or SVG unless it must exist as a 3D object.
- Build reusable components for scene, camera rig, lighting, typography and transitions.
- Preload fonts, textures, environment maps and models before frame zero.
- Use standard physical materials first. Add ShaderMaterial only for effects named in the brief.
- Use instancing or THREE.Points for repeated objects.
- Add a debug mode that shows camera coordinates, scene bounds, safe zones, frame number and renderer.info.
- Add a render-ready signal only after every asset is decoded and shaders have been precompiled.

First show the proposed file structure and dependency list. Wait for approval before writing the full implementation.

4. Premium glass and particle direction

A focused art-direction block for the glass-like style shown in the video.

Refine this approved scene into a restrained premium glass-and-particle system.

Art direction:
- Deep [BACKGROUND COLOR] environment with clear foreground separation.
- Translucent panels with visible edges, controlled blur/transmission and enough opacity for legibility.
- One coherent lighting setup with key, fill and rim or environment contribution.
- Sparse particles that establish depth and flow, not visual noise.
- A single continuous camera move that [APPROACHES / ORBITS / PASSES THROUGH / REVEALS] the main idea.
- Subtle bloom only on designated emissive elements.
- High-contrast HTML or SVG typography on a stable plane.

Technical limits:
- Maximum [DRAW CALL TARGET] draw calls on representative frames.
- Maximum [PARTICLE COUNT] particles.
- No stacked transparent panels behind body copy.
- No chromatic aberration unless I explicitly approve it.
- Preserve readable copy inside [SAFE ZONE].

Explain which parts use standard materials, which use post-processing and which genuinely require a custom shader.

5. Browser capture and FFmpeg export

Creates a reproducible low-level export path when you are not using Remotion.

Create a deterministic export script for this browser-rendered Three.js composition.

Use Playwright to:
1. Launch a pinned Chromium build with a fixed viewport of [WIDTH] x [HEIGHT] and device scale factor [SCALE].
2. Open the local composition and wait for document.fonts.ready plus the application's render-ready signal.
3. Set frame numbers from 0 through [TOTAL FRAMES - 1].
4. Render exactly one frame after state has settled.
5. Save lossless PNG files as frames/frame_%06d.png.
6. Fail loudly on page errors, missing assets, shader compilation errors or inconsistent dimensions.

Use FFmpeg to assemble the numbered sequence at [FPS] fps, add [AUDIO FILE OR NONE], preserve sync, encode to [CODEC] and write [OUTPUT FILE].

Also create a contact sheet with the first, middle and last frame of every scene. Print the exact commands and version information needed to reproduce the export.

6. Visual verification and correction loop

Turns the creator's verification advice into an evidence-based QA pass.

Review the rendered contact sheet and the current MP4 against the approved brief. Do not redesign the piece.

Check every scene for:
- Incorrect or missing content.
- Text below the agreed minimum size.
- Clipping, unsafe margins and overlapping elements.
- Camera intersections, Z-fighting and transparent sorting errors.
- Asset pop-in, blank frames and shader compilation stalls.
- Inconsistent lighting, exposure, color or depth.
- Abrupt motion, weak easing and transitions that obscure meaning.
- Excessive draw calls, triangles, textures or particles.

Return a numbered defect list with evidence: scene, frame range, screenshot reference, severity, likely cause and smallest safe fix. Group defects by root cause. Recommend one change at a time, rerender only the affected representative frames, compare before and after, then request human approval before the final full render.

Video Timestamps

Opening: premium motion graphics with Claude and Three.js00:00 Demo 1: glass panels, particles and camera movement00:46 How to specify scenes and timing01:03 Why the moving 3D camera matters02:03 Model choice and the creator's Opus 5.5 verdict02:23 Demo 2: metallic forms, reflections and vertical output02:51 How browser frame capture works03:28 What Three.js and shaders contribute04:12 Applied AI Mastermind05:08 Demo 3: a 3D RAG and vector explainer05:38 Cost calculation and comparison06:02 Demo 4: paper-style gradient descent07:51 Social clips, explainers and product-launch uses08:20 Demo 5: globe and internet messages09:28 Prompting tips for premium 3D motion09:44 Camera and object movement10:57 Verification loop11:15 Closing advice11:29

FAQ

Does Claude generate the final video directly?

No. In this workflow Claude writes and revises code. Three.js renders the 3D scene in a browser, then a capture tool records deterministic frames and FFmpeg encodes them into a video.

Do I need Three.js, React Three Fiber or Remotion?

Use vanilla Three.js for the smallest standalone 3D piece. Use React Three Fiber when a React component architecture helps. Use Remotion with @remotion/three when the project needs frame-synchronized 3D alongside audio, captions, sequences and a video timeline.

Are custom shaders required for premium motion graphics?

No. Standard physically based materials, environment maps, lights, particles and restrained post-processing can produce sophisticated results. Use custom shaders for effects that genuinely require custom vertex or fragment behavior.

Is the workflow really free?

Three.js, Playwright and FFmpeg can be used without per-render license charges. You may still pay for Claude or another model, computing, storage, licensed assets, music and human production time. API usage also includes input and correction tokens, not only final output tokens.

How do I prevent different frames from changing unpredictably?

Drive the scene from a fixed frame number, seed randomness, preload every asset, pin the viewport and browser, avoid wall-clock state and capture only after the renderer signals that the requested frame is ready.

Can this replace After Effects or Blender?

It can replace them for some code-friendly explainers, diagrams, UI animation and branded loops. Blender remains stronger for complex modeling, simulation and photorealistic 3D, while After Effects remains valuable for compositing, established motion workflows and artist-led finishing.

What is the best first project?

Build a 10 to 15-second explainer with three scenes, simple geometry, standard materials, one camera and HTML typography. Render a 720p proof at 30 fps, then add one advanced effect only after the story and timing work.