@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');

$color-light-gray: #eaece5;

body, html {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Raleway', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $color-light-gray;
}

.text {
  font-size: 8em;
  position: relative;
  text-transform: full-width;
  display: flex;
  
  .space {
    width: 0.3em
  }
  
  .letter {
    position: relative;
    display: flex;
    
    .source {
      color: gray;
      -webkit-text-stroke: 0.01em rgba(black, 0.3);
      display: flex;
    }
    
    .overlay, .shadow {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
      user-select: none;
    }
    
    .overlay {
      background-image: linear-gradient(90deg, white 50%, lighten($color-light-gray, 2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transform: rotateY(-30deg) skew(0, -10deg);
      transform-origin: left;
      animation: overlay 3s infinite ease-out var(--delay);
    }
    
    .shadow {
      filter: blur(5px);
      background-image: linear-gradient(90deg, rgba(black, 0.4) 30%, transparent);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transform: skew(0, 20deg) translateY(0.1em) translateX(0.05em);
      animation: shadow 3s infinite var(--delay);
    }
  }
}

@keyframes shadow {
  0%, 20%, 100% {
    transform: skew(0, 20deg) translateY(0.1em) translateX(0.05em);
    opacity: 1;
  }
  10% {
    transform: skew(0, 0) translateY(0) translateX(0);
    opacity: 0;
  }
}

@keyframes overlay {
  0%, 20%, 100% {
    transform: rotateY(-30deg) skew(0, -10deg);
  }
  10% {
    transform: rotateY(0deg) skew(0, 0);
  }
}

import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';

const Text = ({value}) => (
  <div className='text'>
    {value.split('').map((char, i) => (
      <>
        {char === ' ' && <div className='space'/>}
        {char !== ' ' && (
          <div className='letter' style={{'--delay': `${i*0.2}s`}}>
            <span className='source'>{char}</span>
            <span className='shadow'>{char}</span>
            <span className='overlay'>{char}</span>
          </div>
        )}
      </>
    ))}
  </div>
);

const App = () => (
  <div className='app'>
    <Text value='PAPER'/>
    <Text value='CUT!'/>
  </div>
);

ReactDOM.render(
  <App/>,
  document.body
);