A cinemagraph is a still photograph with one small, looped area of movement. It works by isolating a single element of a video clip, masking the rest into stillness, and looping the motion so the start and end frames match. The result sits between a photo and a video, drawing the eye to one quiet detail while everything else holds frozen.
The format was named by photographers Kevin Burg and Jamie Beck, who started publishing them around 2011 as a way to bring fashion editorial stills to life online. More than a decade later, the technique has settled into design and marketing as a genuinely useful tool. A specific way to add motion without the weight of video.
How a Cinemagraph Differs from a GIF or Short Video
Three things sit close together and get conflated. A GIF, a short looping video, and a cinemagraph. They are not the same.
A GIF is a file format. It can hold any animation, from a meme to a chart to a cinemagraph. The format itself says nothing about the content.
A short looping video, like the ones autoplayed on social feeds, is full-frame motion. Everything moves. The viewer reads it as video and processes it that way.
A cinemagraph is defined by what doesn’t move. Most of the frame is still. One element is in motion. The contrast between the two is the entire point. Steam rising from a coffee cup on a static table. A model’s hair moving while her face holds still. Water in a glass while the room around it sits frozen.
That contrast does something specific to the brain. The eye locks onto the moving element because everything else has told it that nothing is happening. It’s a controlled use of attention, which is why cinemagraphs work well in places where you have one or two seconds to land a message.
Why Cinemagraphs Still Matter
You’d think the rise of autoplay video and high-bandwidth feeds would have killed the cinemagraph. The opposite happened. Three reasons.
Email still can’t play video reliably. Despite years of effort, most email clients won’t render embedded video. Animated image formats still play. A cinemagraph in a campaign email gives you motion that actually shows up in the inbox, not a static fallback.
Web performance favours small, looped assets. A well-compressed cinemagraph in WebP or MP4 format weighs a fraction of a full video. For hero sections, banners, and product detail pages, that matters. A 200KB looped asset gets you the engagement of motion without the load penalty.
Attention is harder to hold than it used to be. Full-frame video asks for a lot. A cinemagraph asks for almost nothing. The viewer gets the hint of motion, the eye is drawn, the message lands. It’s a lower-effort interaction that often outperforms the heavier alternative.
In our experience, the brief moment of “wait, is that moving?” is what makes the format work. It’s a tiny pattern interrupt, and on a page full of static blocks, that’s valuable.
Where Cinemagraphs Work in Design and Marketing
Not every project needs one. Where they earn their place:
- Hero sections. A single looped element above the fold pulls the eye without dominating the page. Steam from a kettle, a flag moving in wind, light flickering through leaves. Subtle and ownable.
- Email campaigns. As above. The format is one of the few reliable ways to add motion to an email.
- Product pages. Especially for products where texture or material matters. Liquid swirling in a glass. Fabric moving in light. Smoke from a candle. These do more than a static product shot can.
- Social posts. Cinemagraphs stand out in a feed of either fully static images or fully motion-heavy video. They read as deliberate.
- Display ads and banners. Same logic as the hero section. Pulls attention without screaming for it.
- Editorial features. Long-form articles use them as visual rest points. Motion that doesn’t ask anything of the reader.
Where they don’t work: anything that needs to communicate a sequence of events. Cinemagraphs are mood, not story. If you need to show how a thing happens, you need video.
How a Cinemagraph Is Made
The process is short to describe, long to do well. Five steps.
Shoot or source the footage
You need a short video clip with a locked-off camera. Tripod, stable mount, no handheld. The background has to be still, because anything that wobbles will give the cinemagraph a strange shimmer when masked.
The clip itself should contain one isolated area of natural, repeatable motion. Steam, hair, water, fabric, smoke, leaves. Things that move in a way that loops cleanly without an obvious cut.
Five to ten seconds is plenty. Most cinemagraphs end up looping a one to three second segment.
Pick the loop point
Find the segment where the moving element starts and ends in roughly the same position. If you can’t find one in the footage, you may need to reshoot. This is the most common point of failure. A jittery loop, where the motion snaps back instead of flowing, will undo all the work that comes after it.
Mask the still areas
In Photoshop, After Effects, or a dedicated cinemagraph tool, you bring in the video and mask the areas you want frozen. Everything outside the mask plays. Everything inside holds on a single frame.
This is where craft matters. The edge of the mask has to be invisible. Any halo, any soft edge that doesn’t match the surrounding texture, and the eye picks it up immediately.
Refine the loop
Crossfade the loop point if needed. Adjust timing. Test the loop in isolation, not just at the end of the source clip. A loop that looks fine playing through once will often reveal a jolt on the second or third cycle.
Export
For web, MP4 with H.264 is usually the right choice. Smallest file size, broadest compatibility, autoplay support across modern browsers. WebP is a strong alternative. GIF only when nothing else will render, because the file size penalty is severe and the colour reproduction is poor.
Tools worth knowing about: Adobe After Effects for full control, Photoshop’s timeline panel for simpler jobs, Flixel Cinemagraph Pro for a dedicated workflow on macOS, and several iOS apps that produce decent results from phone footage for quick social work.
What Makes a Good Cinemagraph?
Five things separate the strong work from the average.
Subtlety. The best cinemagraphs almost trick you. You look at the image, see it as a still, and then notice the movement a beat later. That moment of recognition is the format’s signature.
Clean masking. No visible edge between still and moving areas. If the seam shows, the illusion breaks.
A genuinely seamless loop. No jolt, no snap, no obvious cut. The motion should feel like it could go on forever.
A reason for the motion. The moving element should be something that would naturally move in the scene. Steam from a cup, yes. A logo bouncing, no.
Composition that frames the motion. The still parts of the image have to be worth looking at. A cinemagraph is still a photograph first.
Why Does the Loop Have to Be Seamless?
Because the human eye notices the cut immediately. A cinemagraph relies on the viewer accepting that they’re looking at a continuous moment. The second the loop snaps, that suspension breaks and the image flips from “magic” to “broken GIF.”
This is the technical bar of the format. If the loop isn’t clean, the work isn’t finished.
Common Mistakes to Avoid
A short list, drawn from looking at a lot of cinemagraphs that didn’t quite work.
- Too much motion. If half the frame is moving, you’ve made a video, not a cinemagraph.
- Unstable source footage. Even slight camera shake makes clean masking almost impossible.
- Hard mask edges. Soft, feathered edges that respect the underlying texture, every time.
- Distracting motion. Movement that pulls attention away from the actual subject defeats the point.
- Long loops. The longer the loop, the harder it is to make seamless. Keep it short.
- GIF-only export. Heavy file, poor colour, no reason to use it unless email is the destination.
When to Use One
A cinemagraph isn’t always the right answer. If you need to show a sequence, shoot video. If the page needs absolute speed, use a still. If you’ve got one moment to land and a static image isn’t enough, this is the format that does the most with the least.
Reach for it when you want quiet motion. When you want the viewer to do a small double-take. When the brief asks for atmosphere rather than information.
For more on the thinking behind motion and visual decisions, our piece on Why Design Matters covers the ground. If you’re weighing up a broader rebuild, Does your Website Help or Hurt your business? is a useful read.
Talk to us about your website.
