Quick story first 🕹️
Wait, why After Effects?
After Effects (AE) is where motion designers put together and finish videos: ads, title sequences, music videos, product animations, social clips, and more. Think layers, keyframes, compositing, text, effects, and a timeline that controls the whole shot.
The problem is that sometimes you want graphics that are easier to build in code than with AE's native tools. That's where three.js comes in.
The Problem
Remember those 80s arcade machines? A huge cabinet, a couple of clunky knobs, and inside, a tiny chip running the actual game.
After Effects plugins work a bit like that. The effect itself might be simple, but wrapping it into a proper plugin — UI, rendering, compatibility with new AE versions — takes a lot of work. So a lot of cool real-time ideas never make it into motion design.
So here's the gap
You already build the interesting stuff: shaders, particles, 3D scenes, generative visuals, all running in real time in a browser.
Motion designers could use those things in actual video projects, but getting a three.js scene into an AE comp isn't straightforward. Screen-recording a canvas loses flexibility and can introduce quality and frame-rate issues. It also doesn't give you proper control through AE's camera and timeline.
So we built the cabinet once. You bring the chips.
I'm working on ShotLink NextGen, which lets you run a three.js scene and use its output directly inside After Effects. Here's how it works:
- AE drives the scene. The AE camera drives the scene camera, and AE's timeline controls scene time. You can scrub through your composition and render through AE instead of screen-recording the browser.
- Your scene's parameters become AE controls. Declare parameters like color, speed, or density, and they show up in Effect Controls. Motion designers can keyframe them or connect them to expressions.
- You can build video filters, too. The footage on the layer with ShotLink is passed into your scene every frame, so you can process it with your own shaders and effects.
- A scene is just a web page. Build it with HTML and JavaScript, usually using three.js. Write it yourself or use an AI coding agent. There's a prompt template to help make the result compatible with ShotLink.
The interesting part is that your work doesn't have to stay in a browser demo. It can become part of a finished video production — and motion designers become a whole new audience for the things you create.
Closed beta: Free to try, Windows only for now, and definitely still rough around the edges. We're also seriously considering keeping NextGen free in the long run.
Disclosure: I'm one of the developers. I'd especially like feedback from people who actually build things with three.js.
Join the beta: https://discord.gg/85W8VmNMQZ
Base site: shotlink.io