<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk" rel="stylesheet">
body {
  background-color: #000000;
  color: #ffffff;
}

canvas {
  position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
let font
let graphic

const easeInOutCubic = function(t) {
  return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
}

function setup() {
  createCanvas(1200, 600);
  
  graphic = createGraphics(1200, 600)
  
  graphic.textSize(200)
  graphic.textFont('Space Grotesk')
  graphic.fill("#ffffff")
  graphic.textAlign(CENTER, CENTER)
  graphic.text("hellerm", width/2, height/2 - 40)
}

function draw() {
  background("#000000")
  
  const tileSize = 50


  for (let y = 0; y < 12; y++) {

      let position = winMouseX / windowWidth
      
      position = easeInOutCubic(position)
      
      // source
      const sx = 0
      const sy = y * tileSize * position
      const sw = 1200
      const sh = tileSize * position + (600 - tileSize) * (1 - position)

      // destination
      const dx = 0
      const dy = y * tileSize
      const dw = 1200
      const dh = tileSize

      image(graphic, dx, dy, dw, dh, sx, sy, sw, sh)

  }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js