01 Free macOS app
Animate your product UI on a real timeline.
Drop in your app’s screenshots and text. Give each layer a visibility span and an enter and exit effect, keyframe its position, scale, rotation and opacity, string the scenes together, and export the whole story as an MP4 or a GIF. In the spirit of MoveMatic, and native.
Requirements
macOS 14+ · Apple Silicon & Intel · Swift and SwiftUI, rendering through CoreGraphics
Build from source
First launch
Swell is ad-hoc signed rather than notarized, so macOS may flag it. In Applications, right-click Swell → Open → Open. You only do this once.
02 The model
Scenes hold layers. Layers hold keyframes.
Four ideas, and the rest of the app is those four ideas with a playhead running over them.
Scenes
An ordered strip with live thumbnails. Add, duplicate, delete and reorder; set each scene’s duration, name and background; cut, crossfade or Magic Move into the next one.
Layers
The PNGs and JPEGs you drop in, plus text layers set in the SF system font — string, size, weight, colour, as many lines as the copy needs.
Keyframes
Per-layer tracks for x, y, scale, rotation and opacity. Values interpolate between keyframes and hold outside them, so nothing drifts while you’re looking elsewhere.
Easing
Chosen per segment, not per layer: linear, ease-in, ease-out, ease-in-out, or spring with a little overshoot. One track can be brisk in one stretch and lazy in the next.
03 Features
Ten things that make the second hour faster than the first.
Every one of them exists because the same edit was tedious three times in a row.
-
01
Undo and redo
⌘Z and ⇧⌘Z across every edit. A drag is coalesced into one undo step rather than two hundred, and history resets at a document boundary so ⌘Z can’t reach into a file you already closed.
-
02
On-canvas transform handles
Four corner handles scale the selection about its centre, and a knob on a stem above it rotates. ⇧ snaps rotation to 15°. Before this, the only way to turn a layer was to type a number at it.
-
03
Smart guides and snapping
Drag a layer and it snaps to the canvas centre, edges and thirds, and to other layers’ centres and edges. Every match is drawn as a dashed guide while you drag. The tolerance is defined in screen pixels, so it feels identical at any zoom. G turns it off.
-
04
Duplicate, copy and paste
⇧⌘D, ⌘C, ⌘V. Paste drops the layer into whichever scene is open, clamps its span to that scene’s duration, and picks a name that won’t collide with one already there.
-
05
New enter and exit effects
Blur racks focus in over the first half, so the layer is legible for most of the effect. Spin rotates in from −180° while scaling up. Typewriter reveals text a character at a time, linear on purpose — eased character reveal reads as a stutter. They join fade, slide from any edge, and scale-pop.
-
06
Animated GIF export
The whole story as a looping GIF at 24, 15 or 12 fps, with a width slider from 320 to 1280 px — alongside the H.264 MP4 at 60 or 30 fps. Both report progress, and both can be cancelled.
-
07
Onion skin
Ghosts the frames either side of the playhead at 28% opacity, so a pose is judged against its neighbours instead of against your memory of them. O toggles it.
-
08
Layer style
A real drop shadow — colour, blur radius, x and y offset — and a corner radius on image layers. The shadow is expressed in the layer’s own space and divided through by its scale, so it reads the same size on screen no matter what the layer is scaled to.
-
09
Scene camera
A keyframed zoom, pan and roll over the entire scene. A push-in costs one track instead of a move on every layer. Once animated, the camera takes its own rows in the timeline, and hit-testing and dragging undo the camera transform so editing still lands where you click.
-
10
Magic Move
A transition that matches layers by name across two scenes and tweens each one from where it ended to where it begins, cross-dissolving everything else and blending the two backgrounds. Name a layer “Headline” in both scenes and it glides between them instead of cutting.
04 Timeline
A ruler, a span, and a row of diamonds.
Click or drag the ruler to scrub, snapped to a tenth of a second. Each layer gets a bar you drag or resize to set when it is on screen, and a keyframe row per animated property with diamonds you can drag.
- Space
- Play the current scene
- ⌥Space
- Play the whole story
- L
- Loop playback
- K / ⇧K
- Add or remove a keyframe
- G / O
- Smart guides · onion skin
- ⌘S / ⌘O
- Save and open a document
- ⇧⌘E
- Save the current frame as a PNG
The document
A .swell file is a folder bundle: a project.json next to an assets/ folder holding the images you dropped in. Readable, diffable, and your artwork stays where you can find it.
The inspector edits whatever is selected — the scene, the camera, or the layer — so there is one panel to look at rather than four to hunt through.
05 Export
Three ways out, all of them cancellable.
Every export renders the whole story, shows you how far along it is, and stops the moment you ask it to.
MP4
H.264 at 60 or 30 fps, for the landing page, the release note, or the app listing.
GIF
Looping, 24 / 15 / 12 fps, 320–1280 px wide, for the places that still refuse to play video.
PNG
⇧⌘E writes whatever the playhead is sitting on straight out as a still.
06 Install
Up and running in a minute.
-
01
Download & open
Grab the release and drag Swell into your Applications folder. First time only: right-click Swell → Open to clear macOS’s unidentified-developer check.
-
02
Watch the demo move
Swell opens with a built-in demo project already in motion. Scrub it, drag a keyframe, break something, ⌘Z. That is the whole app, learned in about a minute.
-
03
Drop your screenshots in
Give each layer a span and an enter effect, keyframe what should move, string the scenes together, and export the MP4 or the GIF.
Free & open source · swell.shafer.llc · Source on GitHub
07 Next step
Need something built with this much care?
Swell is what we do for ourselves. Tell us what you’re making and we’ll reply within 1–2 business days.