JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div id="bg"></div>

<div id='torn'>
  <div class='outer'></div>
  <div class='inner'></div>
  <div class='torn_img'></div>
</div>

<svg>
  <filter id='noise'>
    <feTurbulence type='turbulence' baseFrequency='0.08' numOctaves='10' seed='24'>
      <!--
      <animate attributeName="seed" dur="0.8s" values="1;5" repeatCount="indefinite" />
-->
    </feTurbulence>
    <feDisplacementMap xChannelSelector="B" yChannelSelector="G" scale="8" in="SourceGraphic">
    </feDisplacementMap>
  </filter>
</svg>

CSS

:root {
  --margin: 5px;
  --w: 45vw;
  --sepia: 1;
}

@property --sepia {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}

@property --w {
  syntax: "<length-percentage>";
  initial-value: 20vw;
  inherits: true;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}

body {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background: #000;
}

#bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100vw;
  height: 100vh;
  background-position: center;
  /*
  animation: 3s sepia ease-out infinite alternate;
*/
  filter: grayscale(var(--sepia));
}

#bg,
.torn_img {
  background-image: url(https://raw.githubusercontent.com/Hongda-Lin/ImageStore/master/imgsr20a7940c694aws3.png);
  background-size: cover;
}

.inner,
.outer,
.torn_img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transform-origin: center;
}

.inner {
  width: calc(var(--w) - 0.5 * var(--margin));
  height: calc(100vh - 0.5 * var(--margin));
  background: black;
  filter: url(#noise);
}

.outer {
  width: calc(var(--w) + var(--margin) * 2);
  height: calc(100vh + var(--margin) * 2);
  margin-top: calc(-1 * var(--margin));
  margin-left: calc(-1 * var(--margin));
  background: white;
  filter: url(#noise) drop-shadow(0px 0px 1rem rgba(0, 0, 0, 1)) drop-shadow(0px 0px 0.5rem rgba(0, 0, 0, 0.5));
}

.torn_img {
  width: 100vw;
  height: 100vh;
  background-position: center;
  mask-image: linear-gradient(to right,
      white calc(var(--w) + var(--margin) / 1.5),
      transparent calc(var(--w) + var(--margin) / 1.5));
  mix-blend-mode: lighten;
}

@keyframes anim {
  to {
    --w: 70vw;
  }
}

@keyframes sepia {
  to {
    --sepia: 0;
  }
}

#torn {
  position: fixed;
  top: 0;
 ...