Motion
Animated gradients, seamless loops and motion that feels natural.
200 guides · 11 topics
MotionAnimated gradient backgrounds for video and social
5 min read
An animated gradient can look like light moving through silk, or like a screensaver. The difference is a handful of design decisions you can make on purpose.
MotionSeamless loop video: how to make one that never jumps
6 min read
A loop that jumps once every ten seconds is worse than no motion at all. The fix is not a better editor; it is motion designed to come home.
MotionMotion design principles for people who don't animate
5 min read
You don't need to be an animator to make motion that feels right. You need a few principles, a handful of durations and the discipline to use less.
MotionVideo background website design: weight, autoplay and access
5 min read
A moving hero can make a site feel alive, or make it slow, distracting and hard to read. The difference is a short list of technical and design choices.
MotionGIF vs MP4 vs WebM: which format for loops
5 min read
GIF is the format everyone knows and almost nobody should use for the web. It is also the only one that works in an inbox. Here is which to pick, where, and why.
MotionReels background design for Reels and TikTok videos
5 min read
Vertical video has a frame you don't fully control: captions, buttons and names sit on top of it. Design the background for the space that is left.
MotionEasing, explained: why good motion feels natural
5 min read
The same movement can feel clumsy or effortless depending on one setting. That setting is easing, and a few simple rules cover nearly every case.
MotionPrefers reduced motion: animation everyone can use
5 min read
For some people, a parallax scroll or a zooming hero isn't delightful; it's dizzying. One setting tells you who they are. Here is how to respect it without losing your design.
MotionAnimated logos: simple ways to bring a logo to life
5 min read
A logo animation should feel like the logo taking a breath, not performing a routine. Here are the few techniques that work, and the rules that keep them tasteful.
MotionLive wallpapers from gradients: make your own
5 min read
A gradient that drifts slowly behind your clock can make a screen feel alive without ever asking for attention. The craft is in keeping it slow, dark and quiet.
MotionMotion graphics for brands that don't make video
6 min read
Most small brands post still images because video feels like a second job. A slow loop of your own look moving under still words gets you most of the way, with no editing.