Have Claude make animations — GSAP titles and three.js 3D from a description

What you can make

Describe what you have in mind and Claude builds the animation — motion with GSAP, 3D with three.js — and puts it on your timeline. Without learning a dedicated tool like After Effects, you can make things such as:

• Animated titles — letters rising one by one, a color band sweeping across before the headline appears
• 3D logos and lettering — a logo spinning into view, a headline arriving letter by letter in extruded 3D type (Japanese included)
• 3D scenes — the camera circling a low-poly island with trees, glowing rings opening like neon
• Charts and diagrams — bars growing while their numbers count up, arrows and lines drawing themselves
• Maps — pins dropping in and a plane following the route
• Rankings — rows re-sorting, with a badge on the one that climbed
• Captions — a long news-style sentence wrapping to its box and revealing line by line
• Numbers and draws — a counter running from 0 to 1,000,000, a roulette spinning to a stop

The finished animation sits on your timeline as a regular video clip, so you can trim, arrange, color grade and add transitions to it like any other clip.

How to ask

Ask in everyday words. Before finishing, Claude looks at frames from the animation itself to check that nothing is cut off or overlapping.

Examples

• "A 5-second 3D opening for a product launch: the logo spins into view over a navy gradient"
• "Monthly sales as a bar chart, with the last month highlighted in gold"
• "Tokyo → Osaka → Fukuoka on a map, with a name card at each city"
• "A breaking-news caption where this text rises line by line"
• "'Lighter video.' in heavy 3D letters flying in one at a time"

Getting what you want

• Say what the scene is for — "opener," "closing shot of a product video," "first two seconds of a social clip." It sets the length and energy
• Name colors, fonts and length if you can — "white and gold," "heavy sans-serif," "4 seconds." Otherwise Claude chooses
• Ask again if something's off — "slower," "bigger text," "hold the last second." It doesn't have to be right the first time

"Make it cool" or "make it cinematic" on its own still produces something, but whether it suits your taste is hit or miss. The more you say about the scene, colors and length, the closer the first version lands.

What 3D can do

three.js 3D covers motion flat shapes can't.

• Extruded lettering — any Google Fonts family, Japanese included, turned into letters with depth, optionally moving one letter at a time. Heavy faces like Dela Gothic One look best
• 3D logos and icons — a logo shape (SVG) extruded, spun and lit
• Camera moves — circling the scene, pushing in, looking down
• Light and materials — shadows, fog, metallic reflections, and bloom that makes bright colors glow like neon
• Repeated objects — low-poly terrain, hundreds of trees, stars and particles

Regular text and captions can sit on top of the 3D. Keeping the words you want read flat, with the background or hero element in 3D, works well.

What 3D can't do: it can't load 3D model files (glTF and the like) or photo textures. Claude builds every shape itself, so 3D suits logos, lettering, shapes and stylized scenes rather than realistic people or cars.

Revising a finished animation

You can ask Claude to revise an animation it made: "make the background blue," "change the number to 12,800," "make it 2 seconds longer." This works from another chat, too.

VideoBuff keeps the original source (HTML) with the video. Claude reads it back, edits it, and swaps in the re-rendered result.

• What changes — the content of every clip that uses that media, including clips you split
• What stays — each clip's position, trims, color adjustments, and transitions
• If the length changes — clips that ran to the end are stretched or shortened to the new length (stopping before the next clip if they would run into it)
• Undo — a single Undo brings back the previous version

The original code is stored in your browser. If you clear the browser's data, the code goes with it, and the animation has to be made again from scratch.

Limits

• Up to 30 seconds per animation — split longer scenes into several clips
• No overlay on footage — the background can't be transparent, so an animation can't sit on top of your video like a caption. Use it as a scene before, after or between your shots
• Your photos and videos can't go inside — imported media can't be used within the animation (small images written into the animation itself are fine)
• Text inside isn't editable on screen — ask Claude to change words or colors. For text you'd rather edit yourself in the inspector, see "Animation or a plain title?" below
• Long, intricate pieces are a stretch — long motion graphics with dozens of interacting elements aren't a replacement for a professional motion designer. Short scenes with a clear message are the sweet spot

How it works

Claude writes the animation as HTML: motion with GSAP (an animation library) and 3D with three.js. VideoBuff plays it off-screen, turns each frame into an image, encodes them to MP4 with WebCodecs, and places the clip on a video track.

All of this happens in your browser, in the tab where VideoBuff is open. Neither the source nor the video goes to VideoBuff's servers; only fonts are fetched from Google Fonts. GSAP is bundled under the Webflow Standard License and three.js under the MIT License (see the Open-Source Licenses page).

Checking before rendering (dryRun)

Before the real render, Claude can make a draft that skips the MP4 (options.dryRun: true). It returns an image of six frames spread from start to end, plus warnings: script errors (script-error), a timeline that doesn't move (no-animation / static-output), text past the frame (text-overflow), fonts that couldn't be fetched (font-load), 3D that isn't drawn or is hidden behind the SVG (three-not-drawn / three-hidden), and more — each with how to fix it. Claude reads both and fixes things before rendering, so you don't find clipped text only after the encode.

Available GSAP features

The composition iframe pre-registers these GSAP plugins (no registerPlugin call needed):

• DrawSVGPlugin — progressively draws an SVG path's stroke (line-drawing-on animation)
• MorphSVGPlugin — smooth morphing between shapes
• MotionPathPlugin — move elements along an arbitrary path
• TextPlugin — rewrite text content one character at a time (typewriter)
• ScrambleTextPlugin — scramble characters and progressively settle to the final string
• Physics2DPlugin / PhysicsPropsPlugin — gravity / velocity / friction simulation
• CustomEase / CustomBounce / CustomWiggle — author arbitrary easing curves
• EasePack — extended easing set (rough, slowMo, expoScale, etc.)
• SplitText — split HTML text into characters or words (letters flipping up one by one, etc.)
• Flip — animate between two layouts by filling in the difference (re-sorting a ranking, etc.)
• InertiaPlugin — throw something and let it settle (a spun roulette stopping on a slot, etc.)

VideoBuff also provides window.vbSplitText, which splits SVG text into one element per character (or word), and window.vbSplitLines, which splits an HTML paragraph into the lines the browser wrapped it into (keeping Japanese line-break rules intact).

HTML and CSS work too

Placing HTML inside the SVG with <foreignObject> gives you CSS layout (flex / grid), text that wraps to its box, gradient text, shadows, blur, clipping and perspective rotation. Use HTML for text-and-box screens such as long captions, cards and ranking tables, and SVG for geometry such as line drawing, morphing and charts — the two combine freely.

Not bundled

• ScrollTrigger / ScrollSmoother / ScrollToPlugin / Observer / Draggable — they react to scrolling or the pointer; in a video, the same motion is just a timeline tween
• GSDevTools / MotionPathHelper — editor GUI dev tools, irrelevant during a real render

The core GSAP API (gsap.to / gsap.from / gsap.fromTo / gsap.timeline / stagger / all standard eases) works as expected.

Available three.js features

3D starts with vbThree(). VideoBuff sets up the renderer, camera and lights and draws every frame of the timeline, so Claude only adds objects and animates them with GSAP.

• text3d — extruded lettering from a font (any Google Fonts family, Japanese included), optionally split into one mesh per letter
• shape3d — extruded shapes (logos, icons) from an SVG path
• Look — solid or gradient backgrounds, reflections (environment), shadows, bloom and fog
• Bundled helpers — SVGLoader, RoomEnvironment, RoundedBoxGeometry, mergeGeometries, ImprovedNoise (terrain), InstancedMesh (many trees or particles)

Nothing external loads: no texture URLs, glTF / OBJ / FBX models or HDR environments. Random numbers are seeded, so the same source always renders the same video.

Animation or a plain title?

For something like "a white title that fades in over one second," a regular text clip with a transition is faster than an animation, and you can edit the words yourself in the inspector. You can ask Claude for that too ("as a text clip").

A plain text clip is enough when

• You want one fade, zoom or blur on still text
• You want to edit the text yourself later
• You want color adjustments or audio effects on the same clip

Make an animation when

• Letters or words appear one after another
• Several elements play off each other in sequence — title → subtitle → arrow → icon
• Shapes morph, lines draw themselves, things travel along a path, numbers count up
• You want 3D

Asked only to "make a title animation," Claude tends to build an animation. For something simple you'd like to edit yourself, add "as a text clip."