SVG Pixel Animation

A Lottie or MP4 can play an intro. It cannot give you a pixel to point at.

Rects

Canvas can, but scaling gets blurry. SVG keeps each cell as a rect I can tween. The letters began as SVG paths. Each pixel is a square in the path: move, draw three sides, close. I take the top-left of every square and draw a real rect there, 13.8581 units on a side, so each cell is something GSAP can fade on its own.

Fill

Stagger opacity at 4ms each. Tween duration is 0.001, so the stagger is the motion. The mark at the top is shuffled, so it fills as noise. In DOM order, the same stagger reads as a wipe.

const shuffled = [...rects].sort(() => Math.random() - 0.5);

gsap.to(shuffled, {
  opacity: 1,
  duration: 0.001,
  stagger: { each: 0.004, from: 0 },
  ease: "none",
});

Pointer

mouseenter tweens opacity to 0 in 150ms with power1.in. After 15 rects are gone, restore in 300ms with power2.out and stagger from: "random" so holes do not pop back and the mark does not empty. Touch and pen fire the same path through pointer events.