CSS paper effect

by Julien Roche

HTML

<article>
  <div class="paper">
    <div class="paper__text">Some text</div>
  </div>
</article>

CSS

:root {
  --radius: 1rem;
  --size: 10rem;
}

html, body {
  border: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  height: 100%;
}

body {
  background-color: lightblue;
  align-items: center;
  display: flex;
  justify-content: center;
}

article {
  background-color: black;
  clip-path: inset(0 0 round var(--radius) var(--radius) var(--radius) var(--radius));
  filter: drop-shadow(0 0 0 black);
  height: var(--size);
  width: var(--size);
  overflow: hidden;

  .paper {
    animation: translate 0.8s cubic-bezier(0.78, 0, 0.2, 1) 0s both,
      border-radius 1.5s ease-in-out 0s forwards;

    align-items: center;
    background-color: white;
    display: flex;
    filter: drop-shadow(0 0 0 white);
    height: var(--size);
    justify-content: center;
    width: var(--size);

    & .paper__text {
      animation: scale 0.8s cubic-bezier(0.78, 0, 0.2, 1) 0.05s both;
      user-select: none;
    }
  }
}

@keyframes translate {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }

  to {
    transform: translate(0%, 0%);
    opacity: 1;
  }
}

@keyframes border-radius {
  from {
    clip-path: inset(0 0 round var(--radius) 100% var(--radius) var(--radius));
  }

  to {
    clip-path: inset(0 0 round var(--radius) var(--radius) var(--radius) var(--radius));
  }
}

@keyframes scale {
  from {
    transform: scale(1.4, 0);
  }

  to {
    transform: scale(1, 1);
  }
}