- const colors = ['#db0a5b', '#fef160', '#23cba7']
.block-reveal(style='--reveal-speed: 0.75')
  - const phrase = 'Block reveal effect!'
  each word, index in phrase.split(' ')
    span(style=`--delay: 1.${index}; --color: ${colors[index]}`)= word
button restart

*
  box-sizing border-box

body
  background-color #fff
  text-align center
  font-family 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
  min-height 100vh
  display flex
  align-items center
  justify-content center


:root
  --base-delay 0.5
  --reveal-speed 0.5
  --stagger 0.1

button
  position fixed
  top 1rem
  left 1rem
  background 0
  opacity 0.5
  border 0
  cursor pointer
  transition opacity .15s ease
  font-weight bold
  letter-spacing 2px

  &:hover
    opacity 1

.block-reveal
  align-items flex-start
  display inline-flex
  flex-direction column

  span
    animation show-text calc(var(--reveal-speed, 0.5) * 1s) calc(var(--delay) * 1s) steps(1) both
    font-size 4rem
    font-weight bold
    overflow hidden
    position relative

    &:after
      content ''
      top 0
      right 0
      bottom 0
      left 0
      background var(--color, dodgerblue)
      position absolute
      animation block-reveal calc(var(--reveal-speed, 0.5) * 1s) calc(var(--delay) * 1s) both

@keyframes block-reveal
  0%
    transform translate(-110%, 0)
  45%, 55%
    transform translate(0, 0)
  100%
    transform translate(110%, 0)

@keyframes show-text
  0%
    color transparent
  50%, 100%
    color #000

/**
  * Purely for restarting the animation 
*/
const button = document.querySelector('button')
const restart = () => {
  const blocks = document.querySelector('.block-reveal')
  const newBlocks = blocks.cloneNode(true)
  document.body.removeChild(blocks)
  document.body.appendChild(newBlocks)
}
button.addEventListener('click', restart)