Some time ago, we told you that short videos and cinemagraphs are widely used in web design. They aim to replace heavy full-length videos while delivering nearly the same impact to users. Why “nearly”? Because cinemagraphs animate only a part of the composition, and unlike real videos, can contain effects or scenes that you wouldn't normally see in realistic footage.
The trend of using video as a page background, in the header, or within a small block is still going strong, so this topic is worth exploring. In particular, let’s look at something called Plotagraphy . It’s used in web design along with video, cinemagraphs, regular photos and images, but the visual impact of Plotagraphy is quite different. Or is it?
Distinguishing between things that appear identical has long been a human challenge. Think of scientists’ ongoing attempts to explain that “mass” and “weight” are not the same. Similarly, we often see subtle animations online and assume we’re looking at a cinemagraph. Some say, “It’s just Apple’s live photos.” But in reality, it might be a plotagraph. At first glance, these two visual techniques seem very similar. Typically, both cinemagraphs and plotagraphs are created from HD or 4K content, include a static portion and a moving element, and are usually produced by professional photographers.
On one hand, it may not seem too important which animation method is used in web design, but because of the confusion in terminology and subtle visual differences, we decided to take a closer look at the Plotagraph effect.
Similarities between Cinemagraph and Plotagraph
Let’s begin by briefly reviewing what makes these effects similar and where the confusion comes from. A sample of the Plotagraph effect is shown here .
And here’s an example of a cinemagraph, or "living image".
As you can see, they look very similar. And if you're not a huge fan of video art, you might not even notice the difference. The distinction becomes clearer when you consider depth and realism. “ Liquid pouring into a cup ” — that’s easy to simulate. But the animation of the liquid is just an illusion, a manipulation of a static image, not actual physical motion. This is where the key difference lies — source material and realism.
Cinemagraphs are based on real video footage. Remember our Photoshop tutorial — we extracted frames and looped a moving section.
Plotagraphs, on the other hand, are created entirely from static JPG or PNG images. You cannot create one from video.
Surprised by the idea of animating a still image? That’s a natural first reaction. Cinemagraphs feel organic and smooth (like hair or water in the example above). They capture raw rhythm — secondary movements, lighting shifts — that happen naturally on camera and blend into the scene.
Plotagraphs, by contrast, use artificial blended motion. It’s more of a psychedelic effect, transforming parts of the image into something new and manipulating the entire composition. Cinemagraphs also have their own kind of magic, but it’s grounded in real, recorded movement.
Creating a Plotagraph Animation
There are many ways to create a plotagraph. The most professional and convenient method is via Plotaverse , available for Mac and PC, with versions for iOS and Android. Due to its unique functionality, the app is paid, and cracked versions are unreliable. But on the official site, you can browse artworks by professionals, join the community, and share your own work.
Interestingly, plotagraphs can be created not only from photographs but also from illustrations — unlike cinemagraphs. Since drawn videos are rare, it’s easier to animate static drawings.
The term “Plotagraph” itself comes from the name of the app. It’s a relatively new technique compared to traditional video effects.
While the mobile app is free (with limited features), it's generally more comfortable to work on a desktop — with a large screen, keyboard, and mouse. Another option for animating images is using Photoshop. There, you’ll need to work with the timeline, stretch durations, choose keyframes, and create loops. That may sound hard, but it's easier than you think.
For example, we chose a basic photo of a waterfall. At the bottom, there’s a rainbow, mist from the splash, and a small pond — very simple.
Open the image in Photoshop. Select a soft brush, hardness 0, opacity 100%, pressure 100. Enable Quick Mask mode and paint over the waterfall. If you go over an edge, switch colors and erase the mask.
Then disable Quick Mask, and you'll see an automatic selection — not of the waterfall, but the surrounding area. Go to Select → Inverse to fix it.
Copy the selection and paste it — a new layer with the waterfall appears.
Open the Timeline panel. Convert Layer 1 into a Smart Object. Set the clip duration to 1 second.
Expand Layer 1 and choose Perspective. Set a keyframe at the start. Move the slider to near the end and add another. Use “Free Transform” (Ctrl+T) and stretch the waterfall slightly (not too much sideways).
When you preview the animation, it feels jumpy. So, apply the Fade In/Fade Out effect by clicking the icon near the scissors and dragging it to the timeline — do it twice to create a triangle shape. What does that do?
At the triangle’s peak, the waterfall reaches its average transformation size, then gradually fades back to the original. Since both layers are visible, one fades while the original shows through.
Played in a loop, this simulates falling water. But let’s also animate the small pond.
Repeat the same process: select the background layer, activate Quick Mask, paint the pond, deactivate, invert selection, copy to a new layer.
Convert it into a smart object. Set duration to 1 second, add Perspective keyframes. Offset the second keyframe compared to the waterfall’s — align later if needed.
Increase the size (don’t shrink — it won’t be noticeable). Then apply two Fade Out effects on this layer as well.
Move both second keyframes to the very end of the clip — now it's clearer how each part animates. Otherwise, overlapping movements might become messy if you’re unfamiliar with animation.
Still feels rough? Group both layers, duplicate the group a few times. These copies will show on the timeline with existing settings. Arrange them in a “staircase” pattern — overlapping, not back-to-back, aligning the fade peaks.
Start playback from the middle. The animation will feel smoother and faster.
Add a copy of the background on top and apply a black mask — this allows you to “reveal” animation areas precisely, hiding artifacts or restoring static detail.
Time to export the video. In the timeline panel, choose Export, set codec to H.264, pick a preset like YouTube 720p or 1080p, and set frame rate (default or fancy 60fps). Click Render. It takes a while.
After rendering, the video is about 2 MB for 1 second of animation. You could export to GIF, but it’s very resource-intensive. Video export is easier and higher quality.
Of course, you can enhance the waterfall — add foam textures, animate them, make the rainbow shimmer. The possibilities are endless. Plotagraphs can be improved endlessly.
Conclusions
So, if you're planning to use video in a website or landing page, ask yourself: what would you like to see? Something realistic or mystical? If realistic, how much so — and where's the line?
Cinemagraphs, cinematography, plotagraphs — they're so similar, it's hard to say which you're looking at on a given site.
Creating plotagraphs is not hard, though it can be time-consuming. It's fun and creative — especially when you're experimenting. The key is having a clear idea of what part of the image you want to animate. Because the source is static, you have more freedom to imagine. Adding objects and layers is easier here than in cinemagraphs.
When designing a website, think not only about where icons and content blocks go, or your color palette, but also whether video or a bit of animation might help. Plotagraphs and cinemagraphs are everywhere — but often, they’re not exactly what you need.
Maybe you’re designing a site for a café or pizzeria. Why not place a looping video in the corner or in the header — steam rising off pizza, coffee foam swirling, sunlight glinting off a teacup. Small, subtle animations like these really draw the eye — and the appetite — and encourage visitors to explore more pages, thinking, “Maybe there’s more cool stuff here...”
So, even though this visual effect is just a couple of years old, it has carved out a niche among designers — and it has every chance to become a staple of modern web design.