Design Atlas
한국어
◧ Film & photo

Symmetry framing

대칭 프레이밍

Composing the frame as a left-right (or top-bottom) mirror image for a sense of order and formal balance — a subject placed right on the axis naturally holds the eye.

Also known as: Symmetrical compositionMirror composition
···
html
<div class="stage">
  <div class="axis"></div>
  <svg class="facade" viewBox="0 0 200 130" preserveAspectRatio="xMidYMid meet">
    <rect x="16" y="20" width="30" height="95" rx="2"/>
    <rect x="154" y="20" width="30" height="95" rx="2"/>
    <rect x="54" y="10" width="24" height="105" rx="2"/>
    <rect x="122" y="10" width="24" height="105" rx="2"/>
    <path d="M88,115 L88,46 A12,12 0 0 1 112,46 L112,115 Z"/>
  </svg>
  <div class="sweep"></div>
  <div class="core"></div>
</div>
css
.stage{position:absolute;inset:0;background:var(--surface);overflow:hidden}
.axis{position:absolute;left:50%;top:6%;bottom:6%;width:0;border-left:1px dashed var(--muted);opacity:.6}
.facade{position:absolute;left:6%;top:8%;width:88%;height:84%}
.facade rect,.facade path{fill:color-mix(in oklab,var(--fg) 78%,var(--surface))}
.core{position:absolute;left:50%;top:64%;width:5%;aspect-ratio:1;border-radius:50%;
  background:var(--accent-2);transform:translate(-50%,-50%);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent-2) 50%,transparent)}
  50%{box-shadow:0 0 0 10px transparent}
}
.sweep{position:absolute;top:0;bottom:0;width:14%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:swp 4s ease-in-out infinite;mix-blend-mode:overlay}
@keyframes swp{0%{left:-16%}100%{left:100%}}

If the rule of thirds says avoid dead center, symmetry framing does the opposite — put the subject right in the middle and make both sides mirror each other as closely as possible. It's especially powerful when the subject is already symmetrical: a building's facade, a hallway, a reflection.

Perfect symmetry reads as deliberate and formal, sometimes imposing, sometimes serene. Wes Anderson's films are famous for this composition partly because that formality fits his storybook tone so well.

A common variation breaks just one thing — everything mirrors except one figure looking the wrong way, say — and that single deviation stands out precisely because the rest of the frame is so stable. Symmetry itself becomes the frame that makes the exception visible.

When to use

Use it for architecture and interior shots, or a brand visual that wants a formal, polished mood. If the subject itself is asymmetrical, don't force it — reach for the rule of thirds instead.