Design Atlas
한국어
▶ Motion graphics

Cinemagraph

시네마그래프

An almost-still photograph where one small part keeps looping — the point is the moment you realize something in it is moving.

Also known as: Living photo
···
html
<div class="stage">
  <div class="photo"></div>
  <div class="cup"></div>
  <div class="steam s1"></div>
  <div class="steam s2"></div>
</div>
css
.stage{position:absolute;inset:0;overflow:hidden}
.photo{position:absolute;inset:0;background:linear-gradient(180deg,#241f2e 0%,#161320 70%)}
.cup{position:absolute;left:50%;bottom:20%;width:16%;height:12%;margin-left:-8%;border-radius:6px 6px 16px 16px;background:#3a3548}
.steam{position:absolute;bottom:32%;width:6px;border-radius:6px;background:rgba(230,225,255,.55);filter:blur(2px);
  height:26%;transform-origin:bottom center;animation:rise 2.4s ease-in-out infinite}
.s1{left:46%;animation-delay:0s}
.s2{left:52%;animation-delay:.5s}
@keyframes rise{
  0%{opacity:0;transform:translateY(0) scaleY(.4) rotate(0deg)}
  30%{opacity:.7}
  100%{opacity:0;transform:translateY(-70%) scaleY(1.3) rotate(8deg)}
}

Photographers Kevin Burg and Jamie Beck coined and popularized the term around 2011. Shot with a camera locked down on a tripod, a short clip gets masked so everything except one region freezes on a single still frame — steam off a coffee cup, one strand of hair, a flag — and only that region loops.

The seam between the frozen area and the moving one has to be invisible. Even a tiny bit of tripod shake creates a mismatch in jitter between the still background and the living region, and the composite gives itself away — which is why a rock-solid tripod is non-negotiable from the moment of the shoot.

It had a huge moment early on Instagram and is still used in ad banners and product pages today, precisely because it holds attention longer than a flat still image without being as distracting as full video.

When to use

Keep the moving region small — 5–10% of the frame at most. Make it too large and it just reads as a choppy, broken video.