Motion graphics templates
iPhone message threads, push notifications, app mockups, animated charts, photo slideshows, counters, logo idents and text animation — 27 templates. Change the words, colours and images, then export a real video file. Square, portrait, story or landscape — the layout follows the frame, and it all runs in your browser.
This browser can't record video from a canvas. You can still preview and customise every template and save a frame as a PNG, but for the video export open this page in Chrome, Edge or Firefox.
Choose a template
Every preview below is live — that is the actual animation, running.
Nothing matches that.
Why one template fits five different frames
A motion template usually has a fixed canvas, and moving it from a square post to a vertical story means rebuilding the layout by hand. That is the tax that stops most people posting the same idea in more than one place. The templates here avoid it by never using pixel coordinates. Every position and size is expressed relative to the short edge of the frame, so a headline set at fifteen percent of the short side is the same visual weight whether it is drawn into a 1080 square, a 1080 by 1920 story or a 1920 by 1080 landscape video.
Text gets a second layer of protection. Before anything is drawn, the headline is measured in the font it will actually use and shrunk until it fits the box it has been given, then wrapped. That is why a three-word headline and a twelve-word one both stay inside the frame instead of running off the edge — the template adapts to the words rather than assuming a length.
The practical result is that switching the frame is a single click rather than a redesign, and the export is native resolution for the platform you picked: 1080 by 1350 for a portrait feed post, 1080 by 1920 for reels and stories, 1920 by 1080 for YouTube.
How the video is actually made
There is no video encoder shipped with this page. The file comes from the browser's own recorder, which can take a live stream from a canvas element and mux it into WebM. The obvious way to use it is to let the recorder sample whatever the preview is painting, but that ties the output to how busy the machine is: a background task or a slow frame becomes a visible stutter baked into the file.
Instead the exporter takes control of the clock. It requests a stream that produces a frame only when explicitly asked, renders the animation at an exact thirtieth of a second per step, and hands over each frame deliberately. Nothing is sampled and nothing is dropped, so the same file comes out of a fast laptop and a slow one.
The one thing that cannot be side-stepped is that the recorder stamps each frame with the real time it arrived, so the export has to be paced to real seconds — a five second animation takes five seconds to record. It also means a background tab is a problem, because browsers deliberately slow timers down in tabs you are not looking at, which would stretch the timestamps and produce a slow-motion file. The tool watches for that and tells you if it happened rather than handing you a broken video.
What makes motion look designed rather than default
The difference between an animation that feels considered and one that feels like a slide transition is mostly easing and stagger. Linear motion reads as mechanical because nothing in the physical world starts and stops instantly; curves that decelerate hard at the end, and ones that overshoot slightly before settling, read as objects with mass. Nearly every movement in these templates uses one of those two, which is why elements arrive with a small amount of momentum instead of sliding to a halt.
Stagger does the rest. When several things animate at once the eye has nowhere to go, so lines of a headline, stars in a rating and rows of statistics all start a fraction of a second apart. That fraction is small — around a tenth of a second — but it converts a block of movement into a sequence you can read, and it is the single most reliable way to make a busy frame feel calm.
The last piece is masking. Text that fades in floats on top of the background; text that slides up from behind a clipped edge appears to belong to the layout, because the frame it emerges from is part of the composition. Several templates here use that instead of a fade for exactly that reason.
Choosing a frame and a length
Vertical wins where the feed is vertical. Reels, Stories, TikTok and Shorts are all 9:16, and a landscape video posted there is shown small with bars, which costs attention in the first second when it matters most. For the Instagram feed, 4:5 is the tallest shape allowed and takes up appreciably more screen than a square, which is why it outperforms 1:1 for the same content. Square remains the safe choice when one file has to work in several places at once, and 16:9 belongs on YouTube, X and anywhere the content sits inside a page.
On length, shorter is close to always better. Most templates here sit between two and five seconds, which is enough to read a headline and a sub-line without asking for patience. If a piece needs to hold longer on screen, exporting the animation two or three times back to back is usually better than slowing it down — the motion keeps its snap and the loop does the work of holding attention.
Frequently Asked Questions
Is anything uploaded?
No. Templates are drawn by your browser onto a canvas, and the video is recorded from that canvas by the browser itself. Images you add are read locally. There is no account, and no server sees your content.
What file do I get, and is there a watermark?
A WebM video with no watermark. It uploads directly to Instagram, TikTok, YouTube, LinkedIn, X and Facebook and plays in every modern browser. Safari records MP4 instead, which is equally accepted.
Can I use these commercially?
Yes. The templates are our own original work. Anything you export is yours to use, including for clients and commercial campaigns, with no attribution required.
Why does exporting take as long as the clip?
The browser's recorder timestamps frames by real time, so a five second animation has to be handed over across five real seconds. The upside is that every frame is rendered deliberately rather than sampled from the preview, so nothing is dropped and the result never stutters.
The export came out in slow motion
The tab was in the background while it recorded. Browsers slow timers down in tabs you are not looking at, which stretches the timestamps. Re-export with the tab visible and leave it in front until it finishes.
Do the templates work in portrait and landscape?
Yes — every one of them. Layouts are expressed relative to the frame rather than in fixed pixels, so switching between square, 4:5, 9:16, 16:9 and 4:3 re-flows the design instead of cropping it.
Can I add my own logo or photo?
Templates that use an image show a drop area in the customise panel. Drag a PNG, JPG, SVG or WebP onto it, or click to browse. It is used at full quality and never leaves your device.
Can I make a fake iMessage or text-message video?
Yes — that's the Message Thread template. Type up to four messages, choose who sent each one, and they land one at a time with a typing indicator before each incoming reply. The thread anchors to the bottom of the screen and grows upward the way a real one does. Search for imessage, sms or chat to find it.
Which phone templates are there?
Seven: Message Thread, Push Notification (iOS lock screen), Notification Stack (several piling up in sequence), Android Notification (Material card with action buttons), Phone Mockup (your screenshot scrolling inside a device), App Store Install (Get → installing ring → Open) and AI Chat (a prompt types itself, then the reply streams back). Filter by Phone or search iphone.
Can I make an animated chart?
Four of them: Bar Chart (bars grow from the baseline with the numbers counting up), Ranking Bars (horizontal, for leaderboards — the leader is highlighted), Line Chart (the line draws itself with the area filling in behind and a dot on the leading edge) and Donut Chart (segments sweep in with a legend and the total in the middle). You enter data as one Label, value per line — commas, colons and tabs all work, and thousands separators are fine.
Can I make a photo slideshow or a before-and-after?
Yes. Photo Slideshow takes up to four images and lets you pick the transition — crossfade, push or zoom — with progress pips along the bottom and a slow drift on each slide so a still photo never sits dead on screen. Before & After sweeps a divider across two images, pauses on the reveal so there's time to actually compare them, and settles back to the middle.
How do I find a template quickly?
Type in the search box — it matches names, descriptions and a synonym list, so iphone, imessage, sms, notification, counter or logo all land where you'd expect. Press / anywhere to jump to the search box, and if only one template matches, Enter opens it. The category pills narrow things further and stack with the search.
Are my edits saved?
The text, colours and frame you pick are kept in your browser, so coming back to a template finds it as you left it. Images are not stored — they would fill the browser's storage quota — so those need adding again.