DEV Community: Shayan

After Effects, but inside a browser tab (free, no install)

Shayan — Sun, 25 Oct 2026 00:37:12 +0000

AtomCut is a free motion design and video studio that runs in a browser tab. If you know After Effects, you already know most of it: compositions, keyframes, a graph editor, expressions, tracking, rigs, 3D. The difference is where it lives. You open a URL and start keyframing. No installer, no account, no Creative Cloud updater asking to restart.

This post maps the After Effects workflow onto AtomCut, tool by tool, with screenshots from the editor as it is today (version 4.17). It also lists where After Effects is still the better choice, because there are real ones.

A tracker on the cabin (97% confidence across the clip), and a label riding it. The green strip under the clip on the timeline is the tracked span.

What does each After Effects tool map to?

In After Effects	In AtomCut	Notes
Composition, precomp	Frame, nested comp	Frames sit side by side on an infinite canvas, like artboards in Figma. Nest one inside another and it plays as a clip.
Graph Editor	Curves panel	Speed and value curves, eased handles, every keyed property in one view.
Hold keyframe	Hold easing	Drawn as a step in Curves, and kept as a hold in Lottie.
Expressions	Expressions in any field	Type `wiggle(2, 10)` or `layer("Title").x + 40` into a field and press Enter.
Tracker, Mocha	Track tab	Point, Object, Surface (corner pin) or Outline.
3D Camera Tracker	Camera track	Solves the move and the lens, then builds a 3D scene behind your footage.
Rotobrush for "text behind a person"	Depth track + Behind	No masks to paint. More on this below.
Duik, RubberHose	Bones, IK, Character tab	Rigging, poses, blinking and lip sync are built in.
Newton (plugin)	Physics	Gravity, collisions, joints, forces. Built in.
Element 3D, Cinema 4D Lite	3D worlds	Meshes, lights, materials, extruded text, sculpting.
Bodymovin	Lottie export	With a fidelity report of anything that did not translate.
ExtendScript	Scripts panel	Plain JavaScript: `await ac.layer.create({…})`.

Most of these sit one click away from the layer you selected, in the tabs on the right: Design, Effects, Animate, Track, Physics, Sound.

Is there a graph editor?

Yes. Select a layer, open Curves under the timeline, and every keyed property is drawn as a curve you can shape. Below, a title fades in, drops 100 px and settles from 82% to 100% scale. Three properties, three easings, one view.

Curves: Scale, Y and Opacity keyed on one title, each with its own ease.

Easings have names you can type (ease-out-expo, ease-in-out-back, cubic-bezier(…)), so a curve you liked is a string you can copy into another project. Record mode keys every edit you make while it is on, the way After Effects' stopwatch does once you have clicked it.

Can I write expressions?

Every field that holds a value can hold a formula instead. Click a field, type wiggle(2, 10) or #layer.rotation * 2, press Enter, and it turns purple. Other layers are read by name: layer("Title").x + 40 keeps one layer 40 px to the right of another.

Two details After Effects users tend to like. Expressions are typed (number, vector, colour, text, layer), so a formula that returns the wrong kind of value shows an error while you type, not at render time. And if a formula breaks, the field keeps its last good value and turns red instead of throwing your layer to 0,0.

A tracker is readable the same way: track("Cabin").position is the cabin's position on the current frame. The same values are available on the node board, if you think in wires.

How does tracking work?

Open the Track tab on a video or picture and draw around what you want to follow: a box, an oval, a polygon or a pen outline. It tracks both directions from that frame while you watch the outline ride the footage. Then pick what to do with it: stick a layer on it, stabilize the shot, blur or grade a moving region, or read it in an expression.

The screenshot at the top is that whole loop. The cabin was drawn once on the first frame; the label follows it through the camera move; the Track tab says 97% confidence and lists the label under Used by. When a track drifts, drag the outline back onto the subject on that one frame. The stretch around your fix re-tracks by itself and lands on it, and the fix survives every later re-track.

Trackers belong to the footage, not the clip. Split it, trim it, speed it up, and the track stays glued to the picture. Drop the same file into another project and it is already tracked.

For shots where the camera itself moves, a Camera track solves where the camera went and what lens it used, and Make 3D scene turns that into a 3D world with your footage behind it. Click three points on the floor to level it, then stand a title on a wall or a table and it stays put as the camera moves. It needs real parallax over rigid scenery: a locked-off pan solves as a tripod shot, and a frame full of moving water will not solve.

How do I put text behind a person or a mountain?

In After Effects this is a rotoscoping job: paint a mask on the subject, refine it, fix the frames where it slips. In AtomCut, add a Depth track to the footage. Every pixel gets a distance from the lens, worked out on your own machine (on the GPU when there is one). Then add Behind to the title, and whatever stands in front of it in the shot covers it.

One effect card, Behind, on the title. The peak in front covers the letters; nothing was masked by hand.

The cover of this post is that frame, exported. The same depth drives three more things: Fog that thickens with distance, Lens blur that focuses at a depth (key the focus to rack it), and grade windows that select a band of depth, so you can cool the background and lift the subject without drawing anything.

The depth model downloads once, the first time you use it (60 to 130 MB depending on your machine), and is kept on the device across app updates. After that it works offline. On an M1 MacBook it took about three minutes for an 8-second 1080p clip.

What about characters, physics and 3D?

These are the places where After Effects users usually buy plugins, and where AtomCut ships the feature in the box.

Physics on a title: it falls, lands on the shelf, and the shapes pile up around it. The Physics tab holds body, bounce, friction and forces.

Physics. Give any layer a body in the Physics tab and it drops, lands and settles. A star lands on its points and a word on its letters. Every frame is a function of time, so you can scrub backwards through a collision.
Characters. Draw bones through your art, and dragging a hand pulls the arm along (IK). The Character tab holds poses for mouths, eyes, brows and hands. Give a character a voice clip and its mouth follows; fix one syllable by hand and the fix stays.
3D worlds. A world is a comp with depth: meshes, lights, materials, extruded text, sculpting and drawing in 3D. It renders on the same timeline as everything else.

A bone with Follow on: the antenna trails the hop and settles by itself. Five frames from a render.

Where is After Effects still the better tool?

Honestly, in several places:

Heavy footage. A browser tab works within the browser's memory. Long 4K timelines with many layers of video are After Effects (or DaVinci) territory. AtomCut is built for motion graphics, social video and UI animation, not for finishing a feature film.
The plugin and template ecosystem. Twenty years of Trapcode, Element and marketplace templates do not exist here.
The pipeline. If your studio hands .aep files around, AtomCut does not open them.
Tutorials. Every After Effects problem has a ten-year-old YouTube video. AtomCut has its docs and a changelog.

The free editor has every tool, but exports video up to 720p. Full HD and 4K, transparent video and the AI agent link are in Pro: $29 a year with a 7-day free trial, or $59 once for the first 300 buyers.

Can an AI agent drive it?

Yes, and this part has no After Effects equivalent yet. AtomCut speaks MCP, so Claude Code or any MCP client can build scenes, track footage, rig characters and render frames in the editor while you watch, each request one undo step. Every screenshot in this post came out of that same scripting surface: the scenes were built by script in a real editor, then captured. That is a Pro feature; the Scripts panel, where you write the JavaScript yourself, is free.

FAQ

Is AtomCut a free After Effects alternative? The editor is free with no account and no watermark, and exports up to 720p. Pro adds HD and 4K export for $29 a year (7-day free trial) or $59 once.

Does it open After Effects projects? No. It exports MP4, WebM, GIF, PNG sequences, SVG, Lottie and PDF.

Does it work offline? Yes. Once the editor has loaded on a device, it keeps working without a connection, and there are desktop apps for macOS, Windows and Linux.

Can it do motion tracking and text behind a subject? Yes: point, object, surface and outline tracking, a camera solve, and depth-based Behind, Fog and Lens blur. See the tracking docs.

Does it have expressions like After Effects? Yes, in any field, including wiggle(). See expressions and the full capability list.

Open AtomCut in a tab: app.atomcut.net

Pikimov vs AtomCut: two free browser motion studios compared (2026)

Shayan — Mon, 12 Oct 2026 13:42:18 +0000

Pikimov and AtomCut are both motion design and video editors that run in a browser tab, and both let you start without an account. Pikimov is the simpler deal: free forever, up to 4K, with After Effects-style expressions and a particle system. AtomCut is the wider tool: vector drawing and brushes, physics, character rigs, 3D worlds and a sound library, with exports above 720p behind a $29 a year Pro plan.

We make AtomCut, so read this with that in mind. Everything below about Pikimov comes from pikimov.com and docs.pikimov.com, read on October 12, 2026. Where its documentation is silent, the table says "not documented" rather than guessing.

The editor: canvas, the Physics tab for the selected title (body, bounce, friction, forces, gravity) and the timeline. A real capture.

How do they compare at a glance?

	Pikimov	AtomCut
Price	Free forever, no sign-up, "no paywall"	Free up to 720p export, no watermark. Pro: $29 a year (7-day trial) or $59 once for the first 300
Export size	Up to 4K	720p free; full HD, 4K and transparent on Pro
Where it runs	Chrome, Edge and Opera. Not Firefox or Safari, no iPad	Browser, plus a desktop app for macOS, Windows and Linux; touch and tablet supported
Offline	A standalone app, for Patreon supporters	Works offline; saves locally
Editing	Video editor, 2D compositing, 3D compositing as three editors	One document: canvas, multi-track timeline, nested comps
Animation	Keyframes, AE-syntax JavaScript expressions, motion tracking, rotoscoping	Keyframes on anything, curve editor, expressions and node drivers, contour tracking, shape morphing, flipbook
Drawing	Not documented	Bézier pen, 43 pressure brushes, simulated watercolour
Particles	A generator with presets	A 3D `particles` modifier; no 2D emitter or presets yet
Physics	Not documented	Any layer, in 2D and 3D; fields, joints; exact on every frame
Characters	Not documented	Rigs with IK, weight painting, spring bones
3D	XYZ transforms and a basic camera; GLB models can be imported	Worlds with meshes, lights, cameras, materials, modifiers, extrusion; glTF/USDZ/OBJ/STL export
Sound	Audio import and editing, details not documented	4,555 CC0 effects, per-glyph typing sound, EQ/reverb/compressor stack
AI	Deliberately none	Optional: a built-in agent and MCP link (Pro), Scripts panel (free)

Where does Pikimov win?

Price. There is nothing to pay for and nothing capping 4K. AtomCut's free tier stops at 720p. If you export social video at 1080p or above and never touch drawing or physics, Pikimov costs you less than the $29 a year Pro would.

The After Effects shape. Its documentation describes JavaScript expressions "using After Effects syntax", a particle system with presets, automatic motion tracking and rotoscoping. If your hands already know After Effects, it will feel like home faster than AtomCut does. AtomCut's particle story is weaker: the particles and explode modifiers work on 3D shapes, but there is no 2D emitter and no confetti-or-sparks preset shelf.

Its stance on AI. Pikimov's site says it is not bloated with AI and that projects are not used for training. If you want none of it, that is a clean answer. AtomCut's agent is optional, but it is there.

Where does AtomCut win?

Drawing and hand-made motion. AtomCut has a Bézier pen, 43 pressure-sensitive brushes, a watercolour that bleeds and dries, a frame-by-frame flipbook with onion skinning, and shape morphing. Pikimov's documentation does not describe a drawing toolset.

Physics and rigs. Right-click a layer, choose Physics › Falls, and it drops and lands on its real outline. Rigs bend art with IK and weight painting, and spring bones trail and settle. Every frame is exact, so you can scrub and export with nothing to bake.

Physics in AtomCut: a 3D 4 and falling shapes, five frames from a render.

3D that is more than a camera. Pikimov's 3D compositions give you X, Y and Z transforms and a basic camera, which covers parallax and card flips. AtomCut's worlds add meshes, lights, materials, modifiers, extruded text with bevels, and an edit mode. It is still not Blender, and does not try to be.

Five of AtomCut

Reach. AtomCut works with touch and on tablets, installs as a desktop app on macOS, Windows and Linux, and exports Lottie and SVG with a fidelity report. Pikimov's FAQ says it does not work on Safari, Firefox or iPad.

Which one should you pick?

Pick Pikimov if you want zero cost to 4K, an After Effects-style workflow with expressions, and a particle generator today.
Pick AtomCut if your work involves drawing, characters, physics, 3D scenes, sound design, Lottie or SVG export, or you need to work on a tablet or Firefox/Safari.
Use both if you like. Neither locks your files in a cloud: both work locally in the browser.

Where AtomCut falls short of what this post praises Pikimov for: the free tier caps export at 720p, there is no particle preset shelf, and the project is newer. Where we can't judge Pikimov: we did not run its editors side by side with ours on identical footage, so this compares documented features, not render speed or stability.

FAQ

Is Pikimov really free? According to its FAQ, yes: "free forever", with optional support on Patreon, and a desktop app for Patreon supporters.

Does AtomCut need an account? No. You open it and work; Pro uses a licence key.

Which is better for After Effects users? Pikimov, for the interface and expression syntax. AtomCut for people who want drawing, physics and 3D in the same project.

Can either export Lottie? AtomCut can, with a fidelity report that lists what could not be carried over. The Pikimov documentation we read does not list Lottie.

Open the studio: app.atomcut.net

Physics and 3D worlds in a free browser motion studio (AtomCut 4)

Shayan — Mon, 12 Oct 2026 12:15:33 +0000

AtomCut is a motion design and video studio that runs in a browser tab: an infinite canvas, a multi-track timeline, no account, no watermark. Version 4 adds the two things people kept asking where to find, a physics engine and real 3D worlds. This is the tour for someone who has never opened it.

Everything you see below is a frame rendered by AtomCut. They come from the launch film for version 4, which Claude built scene by scene through AtomCut's agent link. We'll get to that.

The editor: canvas, the Physics tab for the selected title (body, bounce, friction, forces, gravity) and the timeline. A real capture.

What does physics do to a title?

It drops it on the floor. Right-click any layer, choose Physics › Falls, and it falls from where it is, lands on the bottom edge of the comp and settles. Text, a logo, a sticker, a 3D mesh: any layer.

The part worth knowing is what it lands on. A rectangle is a box, but a star lands on its points, a word on its letters, a sticker on the edge of its picture. The collider is drawn dashed on the canvas so you can see what it will hit before it hits.

A 3D 4 and a pile of shapes, under two seconds, rendered in AtomCut. (On the blog version you can drag across this to scrub it.)

Scrubbing works because a physics frame in AtomCut is a function of time. You can ask for any frame in any order: scrub, loop, jump to the end, export. Nothing is baked, and there is no "bake" button hiding in a menu. Edit anything and it re-runs from the start; the rest of the time every frame reads a stored result.

Around the falling there is a small kit:

Fixed layers are shelves and ramps. Pushes layers move by their own keyframes and shove whatever is in the way.
Force fields live on their own layer: wind, vortex, attract, turbulence, drag. Aim one by turning it, key its strength, and a gust is two keyframes.
Joints hold a body to the comp or to another body: pin, weld, rope, spring. A hanging sign is a pin and a swing.
A layer that is keyed moving when physics starts keeps moving. Key a throw, start physics at its end, and it flies on.

Each comp has its own simulation settings. Gravity 981 is Earth; set it to 0 and everything floats, which is how the planets below stay up.

What is a 3D world, and why is it a comp?

A world is a composition like any other, except it contains meshes, a camera and lights instead of flat layers, and every one of them is keyed on the same timeline as everything else. Drop a world into a flat comp and it renders through its live camera, so a 3D title can sit under 2D captions without leaving the page.

Any flat layer can stand in a world: text, shapes, images, video, other comps. Text gets real thickness with bevels. Meshes get materials (gold, chrome, glass, neon, toon), modifiers (subdivision, mirror, array, bend, twist, wave, displace), and an edit mode with extrude, inset, loop cut and knife. The default keymap is Blender's, so the shortcuts you already know work.

A solar system in orbit. A point force at the sun, a starting velocity per planet, no position keyframes. (On the blog version you can drag across this to scrub it.)

Those orbits are physics, not animation. A point force sits at the sun, gravity is switched off, and each planet starts with a velocity that bends into a circle. It is the same Physics tab as the falling 4, one dimension up.

Worlds export as glTF/GLB with their motion, plus USDZ, OBJ, STL and PLY, so a scene you build here can leave for a game engine, a viewer, or a 3D printer.

Can a drawing have bones?

Yes, and they obey physics too. A rig is bones that bend your art, with IK, controls that have limits, and weight painting. Switches handle eyes, mouths and hands, and blinks run on their own.

Five moments of one hop. The antenna is a bone with Follow at 0.6, so it trails and settles by itself.

Physics reaches through the bones. Give a piece a body and it swings from its joint: a clock hand let go, a hanging lamp, a tail. Make the whole rig fall and the character tumbles with its limbs flopping. A joint's rotation limits are its stops, so a head can nod and never spin.

What else is in there?

Most of it predates version 4, so here is the short version for anyone who arrives at 4.

Draw. A Bézier pen, 43 pressure-sensitive brushes, and a watercolour that bleeds, granulates and dries on its own.
Morph. One shape becomes another, keyframed like anything else.
Type. Kinetic text looks previewed as the real animation, a sound per glyph, text on a path, and right-to-left and Arabic shaping that actually shapes.
Edit. A multi-track timeline with trims, ripples, transitions, speed ramps and nested comps. Groups behave like clips.
Effects. 36 stackable, keyframeable effects: glow, lightning, glitch, liquid glass, halftone, film grain, and a colour page with node graphs.
Libraries. 337,000 open-source icons from 208 licence-checked sets, each of which can draw itself on, and 4,555 CC0 sound effects.
Ship. MP4, WebM, GIF, PNG sequences, PDF, SVG, and Lottie with a fidelity report.

Morph: pentagon, heart, flower. Same layer, keyframed geometry.

One logo, five effects from the stack: glow, boil, lightning, pixelate, glitch.

If you are wondering whether it does a specific thing, ask the list. It is the same capability index as the landing page, so it can't promise anything the page doesn't.

Does it do the thing you need? The whole list, searchable, is on the blog version and on atomcut.net.

Who drew the film?

Claude did, through MCP. AtomCut exposes every command in the app to agents, so a chat model, or Claude Code in a terminal, can create layers, key them, run physics, render a frame and look at it. The launch film for version 4 was built that way, one generator script per scene. The small orange tool-call lines in the film's captions are the real calls that made the scene beneath them.

That leaves three ways to make something in it:

By hand. Draw it, key it, scrub it.
By script. Version 4.2 added a Scripts panel where await ac.layer.create({…}) runs against your project and saves with it. A button copies a briefing for a chatbot (your comps, your media, every command, the real property names), so you can ask any model for a script, paste its answer, run it, and paste the error back. Run a file again and it replaces what it made last time. This part is in the free editor.
By agent. The built-in agent, or Claude Code and other MCP clients, can run the commands directly, render a frame, look at it and fix it. That is the Pro part.

AtomCut's 3D is a space for motion graphics: titles with depth, objects with physics, camera moves, a scene that composes with your 2D. It is not a Blender replacement: there is no sculpting and no path-traced rendering, and if you need those, Blender is the right tool.

It also runs in a browser, so it has a browser's limits. A heavy 4K timeline will be slower than it would be in a native editor, and a world with particles and motion blur gets a time budget per frame instead of unlimited samples. A browser can also switch off 3D for a tab; AtomCut says so once and puts a Reload button where the world was, instead of flooding the console.

Particles are the gap that stung us while making the film. The 3D particles and explode modifiers exist and carry a Big Bang well, but there is no 2D emitter in a flat comp, no confetti or sparks preset, and particles don't collide with bodies yet. It's on the roadmap, with no date.

What does it cost?

Free: every tool, effect and panel, unlimited projects saved on your machine, no watermark, video export up to 720p. Pro is $29 a year with a seven-day trial, or $59 once for the first 300 buyers, and adds full HD and 4K export, transparent and per-layer export, and the AI agent.

Open the studio: app.atomcut.net

AtomCut made its own intro using Opus 5.5 ( Launch Motion design )

Shayan — Sun, 27 Sep 2026 21:29:46 +0000

The motion design you see was entirely built using Opus 5.5 using atomcut MCP.
and it has a great taste.

This is one of those short articles, nothing more to say.
Just amazed by the results and the fact that all is editable, and customizable.

The easiest way to add liquid glass to your videos

Shayan — Mon, 21 Sep 2026 05:39:14 +0000

Liquid glass looks great. It actually deserves to stay the design trend also in 2027.

And getting them to your video is usually hard and needs extra work.

So I added a built-in Glass UI effect to AtomCut.

1. Draw your shape

Create any shape on the canvas.

2. Add the Glass UI effect

Inside the effects panel, add Liquid Glass effect.

3. Tweak it

Adjust the settings until it looks right.

That's it.

You can animate the shape, change its position, scale, opacity, and the glass effect itself — just like any other layer in AtomCut.

No After Effects setup.
No plugins.
No manually building the glass effect.

Just draw → apply → animate → export.

Try it in AtomCut for free

Figma-inspired video editing and motion design, done right

Shayan — Sun, 20 Sep 2026 00:49:13 +0000

A Figma-inspired video editor is one where the canvas is the place you work, the document is the truth, the browser is the runtime, and the free tier is the whole tool rather than a trial. AtomCut is that, with one addition Figma never made: a real multi-track timeline under the canvas, so a frame has a duration, a group is a clip, and every property you can see can be keyframed. It is free, needs no account, runs offline, and exports MP4, WebM, GIF, PNG sequences, SVG and Lottie. I built it alone over the last few months, and this post is about which Figma ideas survived contact with a time axis, which had to change, and what "done right" has cost so far.

AtomCut is a free motion design and video editor that runs in the browser, at app.atomcut.net. I am not affiliated with Figma; it is the reference point because it is the one most designers and developers already have in their hands.

Canvas above, timeline below, one document underneath both. The rocket is a group; the group is a clip; its four paths are its rows.

What Figma got right, and what a timeline does to each idea

Figma's real invention was not the pen tool. It was a set of decisions about where work lives: on an infinite canvas with artboards, in one document, edited by direct manipulation, in a browser tab you can send to anyone. Everything below is one of those decisions, what it became in AtomCut, and the thing time does to it.

In Figma	In AtomCut	What time adds
Frames (artboards) on an infinite canvas	Frames on an infinite canvas, `F`	a frame carries a duration and its own frame rate; nest one inside another and it becomes a clip with speed, loop, ping-pong and reverse
Pages	Pages, plus auto-managed Nested and Components pages	pre-comps and component sources live on their own pages, so the page you design on stays clean
Components and instances	Components: a frame flagged as a shared source; an instance is a nested clip pointing at it	⌥-drag, paste and duplicate make new instances; editing the source updates all of them at the current time; detaching deep-clones on purpose
Variables	Five typed variables: color, number, fontFamily, fontWeight, string; bind any field	a variable shares one value across layers; a keyframe animates one value over time; they are different axes and both work on the same field
Auto layout	Select what you already arranged, press `⇧A`; the row, column or grid you made becomes the rule, gap included	gap, padding and alignment are keyframeable, so a layout can widen over time like a shape changes colour
Fills and strokes as paint lists	Paint lists, solid and gradient, dashes, caps, joins	every stop keyframes; a stroke can be trimmed along its length over time
Boolean operations	Composite groups: union, subtract, intersect, mask, as a mode on the group you already have	the group is also a clip, so the boolean result can be trimmed, faded and moved as one thing
Crop-mode image fill	A cropped layer has two transforms: the window and the picture inside it	you can pan the footage inside a nailed-down frame, and the two never fight between keyframes
Plugins	Sandboxed plugins with a typed API; install from a `.zip` under Plugins → Manage plugins…	the built-in Icons, Waveform Visualizer and LipSync Studio are plugins, and they insert ordinary clips
Multiplayer	Not yet	this is the gap; more below

The pattern in the right column is the whole design. Nothing in the timeline is a special case bolted onto the canvas; every canvas idea kept its shape and gained a time dimension.

Where Figma stops: a canvas has no time axis

Every browser tool for motion I have used picks a side. Canvas-first tools (Jitter, Fable, Figma's own prototype transitions) have a stage you can draw on and a thin timeline. Video-first tools (CapCut, Clipchamp, Canva's video mode) have a timeline and no pen, no boolean ops, no keyframes on arbitrary properties. Both are good at what they chose. Neither lets you draw a lower third with a pen tool and then ripple-trim it against a talking-head clip in the same window.

AtomCut's one structural bet is that the two halves belong together: canvas above, an NLE below. The timeline is a proper one, not a keyframe strip. Tracks are unified channels, so any clip rides any lane. Drag a clip into its neighbour to ripple or overwrite. Grab the seam between two clips to roll the edit. Link clips so they trim and delete together, the DaVinci way. Split with the razor and the split is keyframe-aware, so the curve is continuous across the cut. Audio shows real decoded waveforms and carries its own effect stack.

None of that is new to video editors. What is new is what sits above it: the same frame that plays in the timeline is an artboard you can pen-edit, auto-layout and turn into a component.

A group is a clip, and the row is the container

The place where "Figma idea meets timeline" is most visible is grouping. In Figma a group is a folder in the layers panel. In a video editor a group is usually a pre-comp: a separate composition you drill into, with its own timeline you cannot see next to the parent's.

In AtomCut a group is a clip, exactly like any other, that happens to hold rows of its own. It sits on an ordinary lane of its parent, at any z. Open it and its rows appear nested under its bar, in the same timeline, at the same zoom. Because it is a clip it carries what every clip carries: transform, paint, effects, opacity, blend mode, feather, an in and an out animation, on top of whatever its members carry.

Its span is a window, not a container that owns its children's time. Trim the group's edge and members past the edge are hidden, never retimed; trim it back out and they reappear where they were. Drop any clip onto a group and it joins. Drag a member past the group's edge and it lifts out onto its own row. A clip is in a group because it sits on one of that group's rows; there is no clip.groupId field anywhere, so moving a clip onto a row is moving it into the group, and nothing ever needs compacting.

This is also what an icon becomes. Drop a Lucide rocket from the built-in icon search and it lands as a group of four path layers. Turn on Draw On and the outline inks itself in over 900 ms, one path after another, in the order it was drawn. The group is the clip you trim; the paths are the rows you keyframe.

"Done right" means one document, evaluated as a function of time

Here is the engineering under the claim, because "done right" is cheap to type.

The document is the product. Everything a project is (frames, layers, paints, effects, keyframes, sounds, captions, variables, node graphs, motion tracks) lives in one zod-validated JSON document, AtomCutDocument, currently at schema version 75. Every migration up to it still runs on load, so a file saved by an older build still opens. Nothing editor-specific leaks into the document; the web editor renders it, and a future native plugin could rebuild it from the same file.

├── durationMs, stageBackground      // one shared timeline for all frames
├── pages: Page[]                    // Figma-style workspaces; the canvas shows one
├── frames: Frame[]                  // artboards (comps): x, y, w, h, durationMs, fps, component, instanceOf…
├── tracks: Track[]                  // kind-agnostic lanes; a track with groupId is a ROW of that group
├── variables, graphs, trackers      // typed variables, node graphs, motion tracks
└── assets, markers

The core is pure. @atomcut/core has no DOM and no React. Evaluation is a deterministic function, (document, time) → frame, and it is the same code path for playback, scrubbing, the MP4 and WebM encoders, the PNG sequence and the Lottie translator. If the export ever differs from what you saw while scrubbing, that is a bug with one place to look, not a second renderer to reconcile.

Undo is patches, not snapshots. Every mutation goes through one store using immer's produceWithPatches. A history entry stores forward and inverse patches; a continuous gesture coalesces into one entry through a merge key. Undo cost is proportional to the change, not to the document.

A frame rate is a grid, never a time. Every frame carries its own fps and there is no document-global rate, because a global rate plus a per-frame override is two stored fields for one fact, and the halves of the app that read each one disagreed the moment a comp set its own. A rate only quantizes: it is what the ruler ticks on, what ← and → step by, what snapping magnetises to, what the exporter iterates. So nesting composes for free. A 12 fps flipbook inside a 60 fps comp holds each drawing for 83.33 ms regardless; the parent samples every 16.67 ms and sees the same cell five times. Nothing resamples across a comp boundary, so nothing drifts.

One fact, one field. A mirrored layer is a negative scale and nothing else; there is no flipX flag, because a flag plus a sign disagree the moment a keyframe interpolates between them. The pivot is stored as a fraction of the layer's own box, like CSS transform-origin, so it survives a resize, a re-wrap and a media swap. Each of these replaced a family of bugs, not one bug.

If you build editors, I wrote up why a group is a clip and why a frame rate is a grid at length; the two-transform crop, and why the content transform must know nothing about the crop insets, is next.

Keyframe anything, including whether an effect is on

Figma's canvas is stateless in time. AtomCut's rule is: if a property has a value, it keyframes. Click the ◆ next to any field in the inspector to plant a key at the playhead. Or arm Record and just edit; every change you make while it is armed becomes a keyframe at the current time, which is how you animate things that have no obvious slider, like whether a blur is enabled or which font weight a word has.

Keys are value-typed. Numbers interpolate. Colours blend in RGBA. Discrete values (a font weight, the text itself, an effect's on/off) hold until the next key. So a gradient stop, a shadow's blur, an EQ band and an auto-layout gap all animate through the same engine as a position. The curves panel shows real Bézier easing with draggable tangents; non-numeric tracks show as a dope sheet you retime.

What is in the box

The point of this post is the model, not the feature list; I wrote the full contents, with every gap I know of separately. The short version: 337,000 open-source icons from 208 sets, searchable inside the editor and each one a group of paths that can draw itself on. 4,555 CC0 sound effects with an ear guard that measures perceived loudness. 103 kinetic text looks, captions you tap in time to the clip, text on a path that re-lays on a live curve. 36 keyframeable effects, 23 transitions, motion tracking, a frame-by-frame mode with onion skin, 43 pressure brushes including a watercolour that bleeds.

Export is where a Figma-shaped tool usually falls down, so: MP4, WebM, GIF, PNG sequence, a lossless MOV master with PCM sound for Resolve and Premiere, SVG with real glyph outlines, and Lottie with a fidelity report that says what the translator could not carry.

The export dialog. Free is everything up to 720p, no watermark. Lifetime is the ceiling removed.

Getting Figma work into it

There is no .fig import, and I am not going to pretend one is close. What works today: select the frame in Figma, export it as SVG, drop the file onto the AtomCut canvas. It lands as one resolution-independent layer, instantly, however many nodes it has. Click Edit as vector and every disjoint piece becomes its own layer with its own fill, transform, effects and keyframes. From there it is an AtomCut document. Figma outlines text on SVG export by default, so words arrive as paths; for anything you want to retype or animate per glyph, set the type again in AtomCut with T and bind it to a fontFamily variable.

What it does not do, in the order it will bother you

No multiplayer. This is the Figma feature, and AtomCut does not have it. The document is typed, versioned and patch-based, which is the groundwork a CRDT layer needs, and live collaboration is the next big piece of work. No date. Today it is one person per file.

No speech-to-text. Captions are typed and tapped, not transcribed.

No 3D. No cameras, no lights, no extruded text with materials; the text extrude is stepped 2D copies and its blurb says so.

Not for a two-hour feature. It is for motion graphics, short video, UI animation, launch clips and captions. A native NLE will handle a 4K multicam timeline better than a browser tab.

Two months old, one maintainer. Rough edges exist, and there is no community yet to have found them for you. Reported bugs are usually fixed in the next release, and the changelog is public.

What free means here, and what $29 buys

Every tool, effect, panel, icon and sound is free, with no watermark and no account, exporting up to 720p. AtomCut Lifetime is $29 once at launch ($49 later) and removes the resolution ceiling: Full HD, 4K, transparent and per-layer export, on web and desktop, every future version included. There is no subscription and there will not be one. The free tier has to be the real tool, because the only moment anyone pays is the moment they have something they want in HD.

FAQ

Is AtomCut a Figma plugin? No. It is a standalone editor at app.atomcut.net. Figma work comes in as SVG.

Can I import a Figma file? Not .fig. Export or copy the frame as SVG, drop it in, click Edit as vector.

Does it work offline and on an iPad? Yes. It installs as a PWA and keeps working offline, saving projects locally; on an iPad it is the same workspace with touch and pencil pressure. Desktop builds exist for macOS, Windows and Linux.

Can several people edit one file at once? Not yet. See the gaps above.

Is it open source? No. The GitHub repo hosts the releases and the changelog is public; the source is not open today.

Open app.atomcut.net, press R, draw a rectangle, arm Record, drag it somewhere else, and press Space.

A full motion design studio in a browser tab, free, on Mac, Windows, Linux and iPad

Shayan — Fri, 18 Sep 2026 14:01:59 +0000

AtomCut is a free motion design and video editor that runs in the browser: a Figma-style infinite canvas with a real multi-track timeline underneath it, in one window, with no account and no install. It ships with 337,000 open-source icons, 4,555 public-domain sound effects, 103 kinetic text looks, 36 keyframeable effects, 23 transitions, vector morphing, captions, motion tracking and a frame-by-frame mode, and it exports MP4, WebM, GIF, PNG sequences, SVG and Lottie. It runs on macOS, Windows and Linux as a desktop app, on an iPad with touch, and offline once it has loaded.

I built it, alone, so discount everything below by however much you like. Then open app.atomcut.net. It is free and there is nothing to sign up for, which means every sentence in this post can be checked in about ten minutes. That is the only reason I feel fine writing a post that is, unavoidably, a list of things my own app does.

What "a whole studio in a tab" means

Most browser tools for motion pick a side. Canvas tools (Jitter, Fable, Figma's prototype animations) have a good stage and a thin timeline. Video tools (CapCut, Clipchamp, Canva's video mode) have a timeline and no real vectors, no pen, no keyframes on arbitrary properties. AtomCut's one structural bet is that the two halves belong in one window: the canvas above, an NLE below, and one document underneath both, so a group is a clip, a text layer is a caption, an icon is a set of paths, and all of them keyframe the same way.

One window. Canvas, inspector, plugins rail, and the timeline with a group opened to show the four paths a Lucide rocket is made of.

The rest of this post is the contents. I have kept a "what it does not do" line in most sections, because a list with no gaps is an advert, and because those lines are where you decide whether it fits your work.

Vector tools that are actually vector tools

A Bézier pen with per-node corner rounding. Parametric shape tools. Segment-level path editing. Boolean composite groups (union, subtract, intersect) that carry their own fill, stroke and effects and that you can still get back out of. Strokes are a pipeline, so one path can have trim, dash, wave, taper and markers stacked on it. Masks, track mattes and feathering. Auto layout that reads the row, column or grid you already arranged and makes it the rule (⇧A).

Shape morphing is keyframed path geometry: set the points at one time, set them differently at another, and the app interpolates point by point. Draw on a raster layer with 43 pressure-sensitive brushes, including a simulated watercolour with wet bleed, granulation and drying, then split the drawing on its ink into separate layers.

What it does not do: it is not Illustrator. No mesh gradients, no CMYK, no print workflow.

337,000 icons that animate themselves

Every open-source icon set (208 sets: Lucide, Tabler, Phosphor, Material Symbols, Simple Icons, the emoji and flag sets) is searchable inside the editor, licence-gated so nothing non-commercial or share-alike can end up in your export. An icon is not a special object; it goes in through the SVG importer and lands as path layers in a group, so it morphs, takes effects, keyframes and exports like anything you drew.

Draw On is the part people stop on. It is a layer animation that inks the outline instead of moving the layer: together, one by one along the length, or staggered; from either end or the middle; fills kept, faded along or faded late. Drop a Lucide rocket, and it draws itself on over 900 ms, in the order it was drawn. Change the icon, the timing stays. Change the timing, the icon stays.

Frame 12 of a 900 ms Draw On. It is one tile in the same Animate tab every layer has.

What it does not do: search matches icon names, not synonyms. "home" misses the sets that call it "house". I wrote up how the icon panel is built if you want the engineering.

Text animation is the big one

Text was the first thing AtomCut did and it is still the deepest. Per-character styling. 103 text looks in the library (Karaoke, Neon, Synthwave, VHS, Typed, Terminal, Hologram, Lower Third, Title Card, Credits, Ticker, Datamosh…), each previewed as the real animation, each recoloured by one colour dial. 43 layer animations for entrances and exits. Per-glyph shadow, glow, extrude and echo as effect cards you can stack, sort and keyframe. Text converts to editable vector outlines. Right-to-left and bidirectional text with Arabic shaping, because I type Persian.

Text on a path: the text tool grows a wave cursor over any shape's edge; click, and the text binds to that outline. It never snapshots, so a morph or a keyframed corner radius re-lays the words on the live curve. Slide it along in laps, flip it, detach it.

Captions: a caption is a text layer with timed words. Type the words, press Tap sync and tap along as the clip plays, and the spoken word lights up at the playhead, styled however you like (Karaoke lights it as a white segment of the band; Punch switches it to the look's second colour; Whisper weights it). Retyping a word never shifts the others' timing.

Sound per letter: a typing sound lands on each glyph as it appears, with its hit point on the transient, so kinetic type clicks in time rather than roughly near it.

The Focus scope: what the spoken word looks like, separate from the rest of the caption.

What it does not do: it does not transcribe. You type the words and tap the timing. If you need a first pass from speech, get it elsewhere and bring the words.

4,555 sound effects, and a sound stack

An archive of public-domain sounds (Kenney, OpenGameArt's CC0 subset, a synthesized set of ours; 37 publishers, 91 packs), searchable from inside the editor. Every row draws its real waveform before you download a byte. ↓ walks the shelf and plays as it goes; ↵ drops the sound at the playhead with its transient on the playhead, not its first sample. An ear guard measures each sound's perceived loudness, not its peak, and holds anything above a ceiling down to it, so a brickwalled impact cannot ambush you between two soft ticks.

Audio clips carry an effect stack of their own: parametric EQ, reverb, echo, compressor and drive, plus keyframed gain, fades, pitch and keep-pitch. Cut transitions crossfade audio. A Waveform Visualizer plugin draws a procedural waveform or spectrum that reacts to any clip's sound, live; a LipSync Studio plugin maps mouth shapes to a voice clip and generates the switches as an ordinary nested clip.

Three sounds placed with Enter. Ordinary audio clips, tagged SFX, each with fades, an effect stack and keyframable gain.

What it does not do: dragging a sound onto a lane places the file as it is and ignores the landing settings; use ↵ or Add for those. The loudness story is its own post.

36 effects, 23 transitions, and everything keyframes

The effect stack is one list, on any layer, and every field on every card keyframes. Shadow, glow, blur, motion blur, RGB split. Light rays, lens flares, a travelling shine, live lightning. Bulge, wave, twirl, lens distortion, roughen edges, glitch. Halftone, pixelate, bevel, posterize, gradient map. A liquid glass that refracts the real backdrop behind it. Film grain, damage, scanlines, vignette, sharpen. Lift/gamma/gain colour wheels. Chroma key and one-click background removal. The same stack applies to the whole frame as a final pass, or through an adjustment layer with a scoped reach.

Transitions: Cross, Soft, Additive and Blur Dissolve, Dip to Colour, Push, Slide Over, Slide Apart, Roll, Iris, Clock Wipe, Barn Door, Bloom, Flash, Glitch, Shake, Smear, Pop, Displace, and a few more, each with its own knobs.

Motion tracking follows position, scale and rotation in a video and drives any layer, effect region or matte with it.

What it does not do: there is no GPU-heavy 3D. No cameras, no lights, no extruded 3D text with materials. The extrude on text is stepped 2D copies behind each letter, and its blurb says so.

Animation: keyframe anything, including on/off

Any property keyframes, including whether an effect is enabled. Record mode keys every edit you make while it is on. A curve editor and a dope sheet, easing presets and custom cubic-béziers, motion paths with spatial tangents. Speed is a keyframed property too: ramp into slow motion, hold a frame, drift back. Node graphs and expression drivers, modulators, typed variables that layers reference across the document, so one colour variable retints a whole brand's worth of icons.

A flipbook mode does frame-by-frame with onion skinning, and each nested composition keeps its own frame rate, which nests correctly because a frame rate is a grid, not a clock.

Export: MP4, WebM, GIF, PNG, SVG, Lottie

MP4, WebM and GIF. PNG sequences. Transparent and per-layer exports. Audio-only bounce. SVG, where a text on a path carries real glyph outlines already placed on the curve. Lottie, with a fidelity report that tells you what the translator could and could not carry, because Lottie cannot read a live relation and so every derived frame is baked to ordinary keys first, Draw On included.

The export dialog on a 1080p composition, sized to 720p. Free is everything up to 720p; Lifetime is the ceiling removed.

What it does not do: there is no MOV or ProRes, and no 4K in the free tier. Free exports are capped at 720p with no watermark; AtomCut Lifetime is $29 once (the launch price; $49 later) for Full HD, 4K and beyond, transparent and per-layer export, on web and desktop, every future version included. There is no subscription and there will not be one.

Mac, Windows, Linux, iPad, offline

It is a web app first: app.atomcut.net is the whole thing, and it installs as a PWA and keeps working offline, saving projects locally. There are desktop builds for macOS, Windows and Linux for people who want a dock icon and file associations. On an iPad it is the same workspace with touch: long-press menus, two-finger gestures, pressure on the brushes with a pencil. One workspace at every screen size, not a mobile subset.

Shortcuts match the physical key, so ⌘Z works under a Persian, Arabic, Cyrillic or Greek layout, and there are keymap presets for Premiere, DaVinci Resolve and Blender if your hands already know one of those.

What it is bad at

It is two months old, and one person maintains it, so there are rough edges, and there is no community yet to have found them for you. It is for motion graphics, short video, UI animation, launch clips and captions; it is not for cutting a two-hour feature, where a native NLE will handle a 4K multicam timeline better than a browser tab will. There is no live collaboration; a document is typed and versioned (schema v72, every migration still running), which is the groundwork for it, but today it is one person per file. No speech-to-text. No 3D.

Reported bugs are usually fixed in the next release, and the changelog is public, so you can read exactly what changed and when.

Why is it free?

Because I think the studio should be the free part. Every tool, effect and panel, every icon and sound, no watermark, no account: that is what makes it possible to open a link and check this post instead of taking my word. The thing you pay for once is the resolution ceiling coming off, at the moment you have something you want in HD. That is the whole business model, and it means the free app has to be genuinely good, or nobody ever reaches that moment.

FAQ

Is AtomCut really free? Yes. The whole studio, with no watermark, exporting up to 720p. Lifetime ($29 once at launch) removes the resolution limit and adds transparent and per-layer export.

Can I use the icons and sounds commercially? Yes. Icon sets are gated to licences that permit commercial use in rendered artwork (CC BY sets show who to credit). Every sound is CC0.

Does it work on Linux and iPad? The web app runs anywhere a modern browser does, including iPad with touch. Desktop builds exist for macOS, Windows and Linux.

Can I export to After Effects or Figma? No. Export is MP4, WebM, GIF, PNG sequence, SVG and Lottie. Lottie is the interchange format for developers; SVG for designers.

Is it open source? The source is public under a Fair Source licence (FSL-1.1-MIT): you can read it, run it and modify it, and it converts to MIT after two years.

Open app.atomcut.net, press T, type something, and press Space.

330,000 free icons for video, and every one of them can draw itself on

Shayan — Fri, 18 Sep 2026 02:20:42 +0000

AtomCut now ships an Icons panel: Lucide, Tabler, Phosphor, Material Symbols, Simple Icons, the emoji sets, the flag sets, 208 open-source icon sets and 337,000 icons, searchable from inside the editor and dropped onto the canvas as ordinary vector layers. Pick an ink, a size and an entrance in the panel's footer, drag an icon onto the stage or a timeline lane, and it lands drawing itself on: the strokes ink in over 900 ms, one piece after another, in the order the icon was drawn. That is an animated icon for a video, made from a free icon, in one drag. AtomCut is a free motion design and video editor that runs in the browser, no account, no install.

I want to write down the two decisions underneath it, because both look obvious afterwards and neither was the first thing I built.

Where do 337,000 icons come from?

Not from us. Every serious open icon set is published in the Iconify data format: a JSON file per set with the set's name, author, licence, sample icons, and one entry per icon holding its SVG body and viewBox. The same format feeds the Iconify plugin for Figma and the icon pickers in half the component libraries you have used. There is a public API in front of it that lists the sets, lists a set's icons, searches names across all of them, and returns bodies in batches.

My first instinct was a pipeline: pull the JSON, index it, publish it to object storage next to the sound library, ship a search. I got as far as sketching the manifest before noticing I was re-deriving, badly, exactly the three endpoints the API already had. So the editor asks the API. It asks it through a hostname I own, a Cloudflare Worker that caches every answer at the edge and forwards nothing but the four paths the panel uses, with the public API as the fallback if that Worker is ever down. If I later want richer tags than names, that is a different origin behind the same base URL, not a rewrite.

The one thing I did build is a licence gate. The catalogue includes sets under non-commercial and share-alike terms, and a 24px glyph must never put a condition on the video you export. AtomCut offers a set only if its SPDX licence is on a short list that allows commercial use in a rendered artwork, shows the licence on every set's cover, and for CC BY sets names who to credit. That cut 238 sets to 208.

Home. One row per family, the licence on every cover, View all at the end of each row.

Why an icon is not an icon layer

It would have been quick to add an icon clip kind that stores lucide:rocket and renders the body. It would also have been wrong in the way that costs the most later: a new kind of layer is a new row in every table in the app. Selection, keyframes, effects, the SVG exporter, the Lottie translator, morphing, the pen tool, the Layers panel: each would need to learn what an icon is, and until every one had, an icon would be the layer that does less.

So an icon goes in through the SVG importer, the same door a dropped .svg file uses. The importer already splits every disjoint piece of an SVG into its own path layer and groups them. A Lucide rocket therefore arrives as four path layers in a group called Rocket, each with a stroke list, each editable with the pen, each keyframeable, each able to morph into something else. The panel's only job is to decide what the SVG says before it goes in: the ink (which can be a colour variable, so a brand palette retints every icon at once), the landing size, and the stroke width if you want thinner lines than the set drew.

One real bug fell out of doing it this way, and it was in the importer, not the panel. Lucide, Feather and Tabler put the whole look on the root <svg> element: fill="none" stroke="currentColor" stroke-width="2". The importer walked the root's children starting from an empty style, so every icon came in black and filled. Nobody had noticed because nobody had dropped a bare Lucide file before; the panel dropped a thousand of them in an afternoon. The fix made the root part of the cascade, and every SVG import in the app got a little more correct.

What lands: a group of path layers, not an icon object. Everything a path can do, the icon can do.

Draw On, and why it is not a pose

Layer animations in AtomCut are poses: a preset takes a progress from 0 to 1 and returns an opacity, an offset, a scale, a rotation, a blur. Fades, slides, bounces and spins are all that one function. It is deliberately small, because the same pose is read by the canvas, by text glyphs, by the SVG exporter and by the Lottie translator, and none of them has to know which preset produced it.

A stroke drawing itself on is not a pose. It cannot be expressed as where the layer is; it is how much of a line exists. I did not want to teach a pose about outlines, because then a text glyph and a Lottie transform would be carrying a field that means nothing to them. So Draw On is a second channel of the same preset: same id, duration, easing, in and out edges, and the same timeline handle drags it, but only the stroke pipeline reads it. The compositor sees the identity pose and takes its fast path.

The pipeline was ready for it, which is the part I was most pleased about. Every stroke in AtomCut already runs a trim stage, and trim is cut as exact Béziers along arc length. A draw-on is a trim window per strand that opens over time, applied before the stroke's own trim, so a dash of light can still chase around a half-drawn logo. The knobs are the ones After Effects' Trim Paths and every SVG draw-on library converged on:

Knob	What it does
Order	Together, One by one (along the total length, the pen never lifts), Staggered (equal shares, each a beat after the last)
Stagger	For staggered: 0% is together, 100% is back to back, more leaves a pause between pieces
Pieces	Bottom piece first, the way the icon was drawn, or top first
Start at	Where along each strand the ink begins, 0 to 100%
Direction	Forward, backward, or both ways out of the start point
Fill	Keep, fade along, or fade late (the fill lands as the last line does)
Pen	The width borrowed when a filled icon has no stroke of its own

That last row is what makes it work on Material and Font Awesome, which are silhouettes with no line to draw. Draw On inks the silhouette's edge in the fill colour and then brings the fill in behind it.

A group read-through does the rest. Put Draw On on the Rocket group and its four paths draw as one drawing, bottom piece first, because that is document order in the SVG and the order a person drew it in. A child with its own Draw On keeps it; clear the group's and every child is untouched. It is the same rule a group's fill already followed, and it is the whole deep-customisation story: one setting for the icon, and any piece that deserves its own timing gets its own.

Frame 12 of a 900 ms entrance. The Animate tab is the same one every layer has; Draw On is one more tile in it.

Animated icons for video, without the marketplace

The reason this matters more than a picker: an animated icon pack is a product category. Sites sell them by the thousand, as Lottie files or MP4 loops, one motion baked per icon. Here the motion is a setting and the icon is a layer, so the pairing is yours. Any of 337,000 icons, any entrance in the gallery, any easing, any duration, in the brand colour from your variables, exported as MP4, WebM, GIF, PNG sequence, SVG or Lottie from the same render. Change your mind about the timing after the fact and it is a slider, not a re-download.

Lottie was the export I expected to lose, and did not. A Lottie trim is one window per shape group, keyed over time; a draw-on is exactly that, one per strand, so the exporter bakes the windows it would have drawn, one key per frame, and a filled icon gets the same borrowed outline the canvas gives it. The file is bigger than a hand-authored one would be. It plays the same.

The panel is in the Plugins rail of the editor now. The documentation, with every knob and every family, is at /docs/icons.

Add animated captions to a video in the browser, free

Shayan — Wed, 16 Sep 2026 16:46:46 +0000

AtomCut adds word-by-word, karaoke-style captions to a video in your browser: you type the words, cut them into cues, sync the timing, style the active word, and export an MP4. AtomCut is a free motion design and video editor that runs in the browser, no account, no install.

There's one thing it doesn't do yet: it doesn't listen to your audio and write the words for you. You type the script, and you time it. That's slower than a one-click auto-transcribe, and it's also why the timing is exactly what you want and not what a speech model guessed.

1. Import your clip

Drag your video onto the canvas, or use Import media in the Media panel and then Place on frame. It lands on its own track with its sound attached; the composition below is a 1920×1080 frame, but a vertical 1080×1920 reel is one click away in the new-project dialog.

The whole studio. The caption sits on the track above the video, so it draws on top.

2. Type the words as a text layer

+ Clip → Text in the timeline header adds a text layer at the playhead. Open Content in the inspector and type what's said, exactly as it's said. This is the one string every caption cue will be a span of, so get the words right here.

3. Turn it into a caption and cut it into cues

In the same Content section, switch on Captions. That seeds one cue per word across the clip and gives the spoken word a highlight you can see immediately. (There's also + Clip → Caption if you'd rather start with a caption and type into it.)

A Cues tab appears on the right rail. Its re-cut menu recuts the same text one word per cue, one line per cue, or one letter per cue; word-level is the karaoke look most people want. Each cue is a span of your original string, so retyping a word in the cue list later doesn't touch any other cue's timing.

A caption is a text layer, so it takes any text animation: here Scale In, per word.

4. Time the cues

Two ways to do it. Tap sync plays the clip and lets you tap a button in time with each word, which stamps that cue's start where you tapped. Or spread every cue evenly across the clip's duration with one click, then drag individual cue boundaries by hand where the even spacing is off. You can also give a cue a word from its neighbour, split one cue in two, or merge two into one, all from the same cue list.

The Cues panel. The lit row is the word under the playhead.

5. Style the word being spoken

The inspector for a caption has two scopes at the top: Text (the whole layer) and Focus (the word being spoken). Pick Focus and every field you touch overrides only that word: its colour, a highlight colour with its own radius and padding, and a Focus pop scale. The focus is a style range on the same text layer, not a separate object, so it stays attached to its word as you keep editing cues around it.

For the look in these screenshots we didn't style anything by hand: the Library's Text looks has a Captions group (Subtitle, Punch, Karaoke, Clean Sub, Boxed, Shout, Ticker, Whisper), and Karaoke applied to the selected layer gives the green band with the spoken word switching to white. A caption look carries its own idea of the spoken word, so applying one restyles the lit word too. Everything else in the caption can carry its own reveal preset and stagger, the same system that drives any AtomCut text animation.

Focus scope: the overrides that apply only to the word being spoken.

6. Export

Export as MP4, WebM or GIF. Every export is free with no watermark, capped at 720p; the one-time $29 adds HD, 4K and transparent export if you need more than social-post resolution.

Export, Video tab. 720p is the free ceiling; the one-time licence unlocks the sizes above it.

AtomCut does not transcribe your audio. There's no speech-to-text step: you type the caption's text yourself and time the cues by tapping along or dragging, rather than getting a rough auto-transcript to clean up.

Questions people ask

Does AtomCut transcribe my audio automatically?
No. You type the words as a text layer, then convert them to a caption and cut them into cues. If you already have an SRT or a transcript, you'd paste the text in and time the cues from there rather than importing timed subtitles directly.

Can I give one word a different look from the rest?
Yes. Select a run of letters or words in the caption and give that span its own animation or style, independent of the rest of the layer, without splitting it into a separate text layer.

Does this work on a tablet?
The drawing and timeline tools share one workspace at every size, so tap-syncing cues works the same on a tablet as it does with a mouse.

Once your cues are timed, the next thing worth trying is a sound on every word instead of just a style change — see kinetic typography with a sound per letter or the full reference at /docs/text-animation.

Try it: app.atomcut.net — free, no account, works offline.

I built a motion design studio in the browser. Here's what it took.

Shayan — Wed, 16 Sep 2026 15:46:53 +0000

AtomCut started as a tool that was supposed to animate text. Today it's an infinite canvas above a multi-track timeline, in the browser, where you can keyframe anything, paint with a wet watercolour brush, track motion, add captions that follow a voice, and export to MP4, GIF, SVG or Lottie. It's free, there's no account, and it works offline.

This is the honest version of how it got there, because the tidy version ("I had a vision and executed") isn't useful to anyone building something ambitious on their own time.

It started as a typing animation

The folder is still called typomation. The first thing it did was type words onto a frame, one letter at a time, with a sound on each keystroke, so a short clip could have a title that arrived the way a typewriter would put it there.

The problem with a tool that only does one thing well is that the second thing you need is always outside it. I needed a background clip under the text. Then a sound on each letter. Then the text had to move along a path. By the time I had those, I had a timeline that didn't care what kind of clip sat on it, and the question stopped being "what should a text tool do" and became "what is the smallest set of ideas that makes everything else a special case".

The one rule everything else hangs on

Anything that describes what an animation is lives in a pure package with no DOM and no React. Anything that describes how it's shown or edited lives in the app. That's the whole architecture, and every good week I had came from it.

Concretely: a project is one JSON document, validated with zod, versioned. The document is at schema version 71 today, and every one of those migrations still runs, so a project from the first month opens. Rendering a frame is a pure function: (document, time) → what you see. Playback, scrubbing, the MP4 exporter, the PNG sequence exporter and the Lottie exporter all call the same function. There is no "export renderer" that drifts from the "preview renderer", because there's only one.

Undo is patches, not snapshots. Every mutation runs through one store that records a forward patch and an inverse patch. Undo cost is proportional to the size of the change, not the size of the project, and a continuous gesture (dragging a keyframe for two seconds) coalesces into one history entry.

None of this is novel. It's the same shape Figma and Photoshop ended up at. What I'm saying is that if you start there, a lot of features become a union variant and a registry row instead of a rewrite. A group on the timeline is a clip that happens to contain rows. A caption is a text clip with a cue map. A flipbook is a nested composition whose cells are drawings. When the primitives are right, the feature list grows without the codebase growing the same way.

The studio: canvas above, timeline below. Two layers selected, the caption

What was actually hard

Not the effects. Thirty-six layer effects sounds like the hard part; it's the easy part, because an effect is a shader and a settings card, and the keyframe engine already animates any number.

The hard parts were the ones where two true things fight:

A cropped video has two things you can move. The window and the picture inside it. If you store that as one transform plus four insets, every keyframed reframe visibly swims between keys, because three animated quantities cancel to a constant that the interpolation doesn't know about. The fix was two transforms, one for the window and one for the content, and a rule that the content transform never reads the crop. It took a week to see that the bug was in the data model and not in the interpolation.

A mirrored layer is a negative scale, and nothing else. I had a flipX flag for a while. A flag plus a sign is two fields for one fact, and they disagreed the moment a keyframe interpolated across a flip. Deleting the flag deleted a family of bugs.

A frame rate is a grid, never a time. There is no project-wide fps. Each composition carries its own, and a rate only ever quantises: it's what the ruler ticks on, what the arrow keys step by, what export iterates on. A 12 fps flipbook inside a 60 fps comp holds each cell for 83.33 ms and nothing resamples anything, so nothing can drift. The earlier version had a global rate plus overrides, and half the app read one while half read the other.

The crop one cost the most. I fixed the interpolation three times before I admitted the data was wrong.

The changelog is the spec

Every change has to earn one line in a public changelog, written before the code: what can a user do now that they couldn't before. If I can't write that line, the change doesn't ship. It sounds like process; it's actually the fastest way I've found to kill work that only feels productive. Half of what I started never got its line.

What it's bad at

Cutting a two-hour 4K timeline. It renders in the browser; a native NLE will beat it on heavy footage. It's young, so you will find rough edges; when someone reports one, it's usually fixed in the next release, and you can watch that happen in the changelog.

What's next

It's free and it stays free. Exports are capped at 720p; $29 once, not a subscription, removes the cap. After that, the plan is live collaboration, an assistant inside the editor that can operate the timeline, and the plugin SDK opening up.

If you make anything with it, I'd like to see it. It opens at app.atomcut.net with no signup.

MotionKit Figma Motion: import, sync, and push native animation (yes, even baked physics)

Shayan — Sun, 28 Jun 2026 00:19:07 +0000

Figma shipped native Motion. A real animation timeline, right inside the file.

When that landed, a lot of people emailed me some version of the same question: "is MotionKit dead now?"

Fair question. My honest first reaction was a quiet "...maybe." But the more I used native Motion, the clearer it got — it's genuinely good, and it's not trying to be everything. No physics. No frame-by-frame. No Lottie export. No morphing. So the move was never to compete with it. The move was to bridge to it — let the two tools hand work back and forth, and let MotionKit be the power layer that does the stuff native Motion can't.

So that's what this update is. A two-way bridge between MotionKit and Figma's native Motion.

Here's everything it does, and exactly how to use it.

The short version

Four moves, one little control in the header:

Import native Motion into MotionKit as real, editable keyframes
Live sync (read-only by default) so changes in Figma Motion flow into MotionKit as you work
Link for export so your native Motion renders inside a Lottie without duplicating anything
Push MotionKit keyframes back into native Motion — including motion you baked from the physics engine

And the headline trick: bake a real physics drop in MotionKit, then push it into Figma Motion as native keyframes. Native Motion has no physics engine. Now it kind of does.

First, find the bridge

Look at the top-right of the toolbar, next to the Pro star. There's a small badge: the MotionKit diamond, an arrow, and the Figma logo.

That little arrow is the status. You don't have to open anything to read it:

faint dotted line → not connected
arrow pointing into MotionKit → reading from Figma, live, read-only
arrows on both ends → two-way, MotionKit also writes back

If there's native Motion sitting on the current frame but you haven't connected, you'll see a small purple dot on the Figma side — that's "hey, there's something here to import." Click the badge to open the bridge.

That's the whole mental model. Direction of the arrow = direction of the data. I rebuilt this specifically so you never have to remember what some toggle does.

Import: pull native Motion in as editable keyframes

This is the one most people want first. You (or a teammate) animated something in Figma Motion, and you want it as proper MotionKit keyframes — to refine the curves, add morphs, export to Lottie, whatever.

select the animated frame
open the bridge and hit Import from Figma Motion
pick how conflicts resolve — Figma wins (native overwrites) or Keep mine (native only fills gaps)
done. you get a little report of what came across, what got an approximated easing, and what was skipped

It pulls transforms, opacity, size, corner radius, stroke weight, auto-layout spacing, solid fills and strokes, drop and inner shadows, and blur — as real keyframes you can grab and move. Position and scale come in as proper X/Y so you can edit each axis on its own.

One honest note: once MotionKit owns a transform, MotionKit drives it during preview. That's the trade for editability. If you'd rather native Motion stay in charge of movement, keep reading — Link is for exactly that.

Live sync: read-only by default, on purpose

Turn the direction control to Read and MotionKit keeps pulling changes from Figma Motion as you work. Tweak a curve natively, it shows up here.

The important part: read-only is the default, and it will never touch your Figma file unless you explicitly switch to Two-way. Sync turning on used to scare people because an early version could write back when you didn't expect it. Not anymore — Off, Read, and Two-way are one clear three-way switch, and Read is a one-way street into MotionKit.

Link for export: native Motion in your Lottie, zero duplication

This is the cleanest option and honestly the one I'd reach for most.

When you Link Figma Motion for export, MotionKit references the native animation instead of copying it. Nothing gets added to your timeline. Nothing moves on the canvas. No duplicate rows, no two engines fighting over the same layer and sending it twice as far as it should go.

Then when you export to Lottie, MotionKit folds the native Motion in at render time and ships one animation — your MotionKit layers and the native Motion together. Your MotionKit keyframes always win on any property you actually animated; native just fills the rest.

open the bridge
hit Link Figma Motion for export
animate the rest in MotionKit like normal
export to Lottie — the native motion is baked into the file

If you go back and edit the Figma path afterward, just hit Link again to refresh the snapshot.

The fun one: bake physics in MotionKit, push it into Figma Motion

Native Motion can't simulate physics. MotionKit can — and it bakes the result into normal keyframes. So you can author a real physical bounce in MotionKit and then hand those keyframes to native Motion.

Here's the full loop:

drop in the layer you want to throw or bounce
add a Physics modifier — set gravity, bounce, mass, and mark whatever's the floor or a wall as a collider
hit Bake. MotionKit runs an actual rigid-body simulation and writes it back as real position/rotation keyframes (re-bake as much as you want — it always replays from the top)
happy with the drop? open the Figma Motion bridge
expand Advanced → Push to Figma Motion
confirm (back up your file first — every push is backed up and revertable, but still), and the baked bounce now lives as native Figma Motion keyframes

Now the motion is native. It plays with Figma's own Motion engine, lives in the file, and anyone can open it without the plugin. You used MotionKit purely as the physics authoring tool. That's the whole idea of the bridge — each tool doing the part it's best at.

Push writes the round-trip-safe subset (transforms, opacity, size, color, shadows, blur, and friends), so a tumbling, bouncing object's position and rotation transfer cleanly. Easings without an exact native match get approximated, and the report tells you which.

Bonus: nested frames animated in Figma Motion

If a child frame inside your frame is animated natively, MotionKit can pull it in as a previewable clip — so it actually plays inside your timeline, with its own loop mode you control per clip. When MotionKit spots one, you'll get a one-click "import as clips" prompt. Handy for building a scene out of pieces other people animated natively.

What survives the trip (the honest table)

Trust matters more than hype, so here's the real list.

Round-trips both ways: position, scale, rotation, opacity, size, corner radius, stroke weight, auto-layout spacing, solid fill & stroke color, drop & inner shadow, layer & background blur.

MotionKit-only (stays here, reported as skipped on push): text animation, shape morphing, frame-by-frame, gradient-stop animation, the beta noise/texture/glass effects, and expression-driven properties. These are the things native Motion has no slot for — so MotionKit keeps them, and uses Link-for-export when you need them in a final render.

No silent data loss. The bridge always hands you a report of what mapped, what got an approximated easing, and what it couldn't translate.

The one real limitation

Figma's plugin API lets me read and write Motion keyframes, but it can't move native Motion's playhead or evaluate it at an arbitrary time. So I can't show you Figma's native render and MotionKit's preview playing in perfect lockstep on the same canvas — that part isn't possible yet.

That's why Link-for-export is a snapshot you re-link after edits, instead of a live mirror. The day Figma adds a "give me the value at time t" call, that seam flips to live and most of this gets even better. I've already filed it as the number one thing I want from the Motion API.

Where this is going

The direction is simple: MotionKit as the Pro power layer that sits on top of native Motion. Native Motion handles the clean, file-native basics. MotionKit handles physics, frame-by-frame, morphing, expressions, and Lottie — and the bridge moves work between them without you redoing anything.

And as always — if something feels off or breaks, tell me. Half of every release is just people telling me what annoyed them.

happy animating.

Figma's New Motion vs MotionKit — timeline is here, but is it enough?

Shayan — Fri, 26 Jun 2026 20:52:11 +0000

Figma finally added a real timeline-based motion system.

That changed the game a bit.

But once you actually use it in real animation workflows… you notice something quickly:

It’s powerful — but still incomplete.

That’s where MotionKit still sits in a very different category.

This isn’t “which is better”.

It’s more like:

what Figma gives you vs what you actually need once animation gets serious.

What Figma Native Motion actually does now

Figma’s motion system now includes:

real timeline editing
keyframe-based animation
basic easing control
physics-like behavior (limited / experimental level depending on setup)
improved Smart Animate pipeline

So yes — it’s no longer just prototype transitions.

You can now:

animate objects across time
scrub animations
control timing visually

That alone is a big shift.

But here’s the catch:

It still focuses on flat motion inside a single layer context, not structured animation systems.

Where Figma Motion still falls short

Even with the timeline, a few big gaps remain:

1. No real text content animation system

You can animate text transforms, but not true content-level animation logic (like structured text transitions, sequencing, or per-character systems).

2. Frame-by-frame (FBF) is still not a real mode

You can fake it with frames, but:

no true FBF workflow
no synced editing across frames
no onion-skin style consistency system

You still end up manually managing duplication.

3. Nested animations are not first-class

Figma doesn’t properly support:

nested frame animation trees
reusable animation blocks inside components
hierarchical animation timelines

Everything still lives mostly at a flat level.

4. Physics is not truly baked

Even when physics-like behavior exists:

it’s not fully controllable
it’s not always exportable as keyframes
it doesn’t behave like a reusable system

So it’s more “effect” than “simulation pipeline”.

What MotionKit actually brings to the table

This is where the gap becomes obvious.

MotionKit is not trying to compete with Figma’s timeline.

It’s extending it in the directions where real motion work breaks down.

1. True Frame-by-Frame (FBF) system

MotionKit supports proper FBF workflows:

synced frame structure
mirror selection across frames
layer consistency enforcement
editing one layer across all frames at once

This turns FBF from “manual duplication” into an actual workflow.

2. Nested animation support

MotionKit introduces structured animation layers:

animations inside frames
reusable nested motion blocks
hierarchy-aware timelines

So instead of flat motion, you get:

animation systems inside animation systems

3. Physics baked into keyframes

This is a big one.

Instead of just simulating motion visually:

you define physics (gravity, bounce, mass)
MotionKit simulates it
then bakes it into real keyframes

So everything becomes editable afterward.

No black box.

4. Full timeline control + modifiers

Beyond keyframes, MotionKit adds:

Offset modifiers
Wiggle procedural motion
curve-level editing
editable baked simulations

So motion becomes programmable, not just draggable.

5. Two-way sync with Figma Motion

This is probably the most important difference.

MotionKit doesn’t replace Figma Motion — it connects to it.

You get bidirectional sync:

Figma Motion → MotionKit import
MotionKit edits → back into Figma system

So you can:

prototype quickly in Figma Motion
refine deeply in MotionKit
move back and forth without losing structure

That’s the real workflow upgrade.

Simple comparison

Feature	Figma Native Motion	MotionKit
Timeline	Yes	Yes (advanced)
Frame-by-frame	Limited / manual	Native system
Nested animations	No	Yes
Physics	Basic / experimental	Fully baked keyframes
Text content animation	Limited	Structured support
Sync with Figma	Native only	Two-way sync
Workflow depth	Prototype level	Production level

When Figma Motion is enough

Use Figma Motion if:

you’re building UI prototypes
you just need simple transitions
you don’t care about animation systems
speed matters more than control

When MotionKit becomes necessary

Use MotionKit if:

you’re doing real motion design work in Figma
you need frame-by-frame animation control
you care about reusable animation systems
you want physics + keyframes together
you need structured workflows, not hacks

The real takeaway

Figma Motion is finally becoming a real animation layer inside design tools.

But MotionKit exists in a different layer entirely:

turning Figma into a motion design system, not just a prototyping tool.

That gap is still very real.

And for anyone doing serious animation work inside Figma — it shows up immediately.