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.

Every example below was made by asking Claude in VideoBuff — each one comes with the request that produced it.

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
• Your own 3D models — pass a .glb (from Blender or elsewhere) and it can be turned and framed, and the animations inside it (walking, waving and so on) can play at the times you choose. Exporting and asking are covered in Add Blender 3D models to your video

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 is good at: shapes Claude builds itself suit logos, lettering, shapes and stylized scenes. For realistic people or cars, pass your own 3D model (.glb) — see supported formats and how to export.

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
• No video inside — photos, logos (SVG) and 3D models (.glb) work when you tell Claude where the files are, but a video can't play inside the animation. Media already imported into the library can't be used as is either (give Claude the original file's location)
• File sizes — up to 50 MB per photo or logo, 100 MB per 3D model, and 16 files per animation. Large photos are scaled down to the size they're shown at automatically, but layering many of them makes rendering slower
• 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. The source, the finished video and any photos or models you pass never go to VideoBuff's servers. The only thing that leaves is the font request: fonts come from Google Fonts with just the characters you use, so the font name and those characters are sent to Google Fonts. Fonts for 3D lettering are fetched through VideoBuff's server, which receives them in a format that can be turned into 3D shapes. 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 or an SVG logo you pass
• model / play — places a .glb 3D model you pass and plays the animations inside it on the timeline (Draco and Meshopt compression supported)
• texture — puts a photo you pass onto a 3D plane or other surface
• Look — solid or gradient backgrounds, reflections (environment), shadows, bloom and fog
• Bundled helpers — SVGLoader, RoomEnvironment, RoundedBoxGeometry, mergeGeometries, ImprovedNoise (terrain), InstancedMesh (many trees or particles)

Photos and models are passed by telling Claude where the files are (the VideoBuff extension hands them straight to the editor, so their contents don't go through the conversation). Nothing else external loads: no texture URLs, 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."