필름 그레인

<div class="compare">
  <div class="panel clean">
    <div class="landscape"><i class="sun"></i><i class="hill back"></i><i class="hill front"></i></div>
    <span class="tag">CLEAN</span>
  </div>
  <div class="panel grainy">
    <div class="landscape"><i class="sun"></i><i class="hill back"></i><i class="hill front"></i></div>
    <span class="tag">FINE GRAIN</span>
    <svg class="grain" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
      <filter id="grain-noise" x="0" y="0" width="100%" height="100%">
        <feTurbulence type="fractalNoise" baseFrequency=".82" numOctaves="1" seed="3" stitchTiles="stitch">
          <animate attributeName="seed" values="3;7;2;9;4;8" dur=".36s" repeatCount="indefinite" />
        </feTurbulence>
        <feColorMatrix type="saturate" values="0" />
        <feComponentTransfer>
          <feFuncR type="linear" slope="3.2" intercept="-1.05" />
          <feFuncG type="linear" slope="3.2" intercept="-1.05" />
          <feFuncB type="linear" slope="3.2" intercept="-1.05" />
        </feComponentTransfer>
      </filter>
      <rect width="100" height="100" filter="url(#grain-noise)" />
    </svg>
  </div>
  <i class="divider"></i>
</div>

.compare{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.panel{position:absolute;top:0;bottom:0;width:50%;overflow:hidden}
.clean{left:0}.grainy{right:0}
.landscape{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#8ebdc0 0%,#d3d5b2 56%,#e8b778 100%)}
.sun{position:absolute;right:17%;top:18%;width:clamp(28px,15vmin,94px);aspect-ratio:1;border-radius:50%;background:#ffe5a8;box-shadow:0 0 28px rgba(255,224,159,.35)}
.hill{position:absolute;left:-14%;right:-14%;bottom:-28%;height:68%;border-radius:50% 50% 0 0}
.back{background:#63897b;transform:rotate(5deg) translateY(-12%)}
.front{background:#3d6759;transform:rotate(-4deg)}
.tag{position:absolute;z-index:3;top:7%;left:8%;color:#fff8e8;font:700 clamp(8px,2.8vmin,13px)/1.1 ui-monospace,monospace;letter-spacing:.08em;text-shadow:0 1px 5px rgba(0,0,0,.55);white-space:nowrap}
.grain{position:absolute;inset:0;width:100%;height:100%;opacity:.2;mix-blend-mode:soft-light;pointer-events:none}
.divider{position:absolute;z-index:4;left:50%;top:0;bottom:0;width:1px;background:var(--surface);box-shadow:0 0 0 1px rgba(36,31,25,.2)}