fal Motion to Code Turns Clips Into GSAP and GLSL

Introduction
fal just shipped Motion to Code, a closed API tool that hands you an animation as code instead of as a video file. You describe a motion, drop in an image, or upload a short reference clip, and it returns either a self-contained GSAP web page or a seamlessly looping GLSL shader. It runs today on fal as two endpoints, fal-ai/motion-to-code/gsap and fal-ai/motion-to-code/glsl.
The pitch from fal is simple and very appealing for motion designers: a few kilobytes of code instead of megabytes of video, and it stays sharp at any resolution. Even better, you can open the result and change it.
What Shipped
Motion to Code is a video-to-code pipeline with a built-in quality check. If you give it only a prompt or an image, MiniMax H3 Max first animates that into a reference clip (text-to-video or image-to-video). Then the tool writes code that recreates the clip, renders that code, and compares the render against the reference.
There are two output flavors:
- GSAP: one self-contained HTML page with inline SVG, animated by a single GSAP 3 timeline. fal says the timing of every move is measured on both clips and matched.
- GLSL: one Shadertoy-style fragment shader (a
mainImagefunction, GLSL ES 3.00, single pass, no textures) that loops seamlessly over the duration and renders in WebGL2.
Inputs and Options
- prompt: up to 4,000 characters, describing what to build or what to change from the reference
- video_url: a reference clip from 1 to 15 seconds, which sets duration and aspect ratio (fal notes flat motion design works best)
- image_url: a still that H3 Max animates first; its shape sets the aspect ratio
- audio_url: an optional soundtrack up to 15 MB; with a prompt or image, H3 Max makes its clip to that sound
- duration: 1 to 15 seconds, default 6 (ignored when you give a video)
- aspect_ratio: 16:9, 9:16, or 1:1, default 16:9
- refine_rounds: 0 or 1, default 1, which compares the render with the reference and fixes the code once
You need at least a prompt, image, or video, and a video plus an image together is refused.
What You Get Back
Each run returns the code itself, a ready-to-open HTML page that plays it, an MP4 preview rendered frame by frame from the code, the H3 Max reference clip when one was made, and a contact sheet that puts the reference and render side by side at the same timestamps. That contact sheet is a lovely touch: you can see at a glance where the code drifted from the motion you wanted.
Pricing
Billing is per second of animation, with a 5-second minimum and a 15-second maximum:
- $0.30 per second when MiniMax H3 Max makes the reference clip from your prompt or image
- $0.20 per second when you bring your own video
fal's own examples: a 6-second loop from a prompt costs $1.80, and a 10-second clip rebuilt from your video costs $2.00.
Try It
Here's a minimal call to the GSAP endpoint, using fal's own example prompt:
curl --request POST \
--url https://fal.run/fal-ai/motion-to-code/gsap \
--header "Authorization: Key $FAL_KEY" \
--header "Content-Type: application/json" \
--data '{"prompt": "A blob squashes, hops and lands; the word LOOP pops in letter by letter.", "duration": 6, "aspect_ratio": "16:9", "refine_rounds": 1}'Swap gsap for glsl in the URL to get a looping shader instead. A starter prompt for the shader side:
Soft aurora ribbons in lilac and aqua drift slowly across a deep indigo sky, folding over each other in a calm, seamless six-second loop.Why It Matters
Most AI motion today arrives as a flattened video you can only trim. Motion to Code flips that: the output is a timeline or a shader you can retime, recolor, and drop straight into a website, a game menu, or a live visual set. For loaders, hero banners, title cards, and VJ loops, that's a far better deliverable than an MP4, and the file sizes are tiny.
Original Source
Model pages: Motion to Code GSAP on fal and Motion to Code GLSL on fal.
Conclusion
Motion to Code is the rare AI video tool whose output gets more useful after it's done generating. Let H3 Max sketch the motion, let the code rebuild it, then make it yours by editing a few numbers. Start with a short flat-design loop, check the contact sheet, and see how close it lands.
Want to sketch the motion first with H3? Try this on Gen → https://artrealmai.com/gen?utm_source=magazine&utm_campaign=gen&utm_content=fal-motion-to-code-gsap-glsl-animations-minimax-h3
—Aurelia ♡
