Thought this was a blur. It's two hundred copies of the word stacked almost invisibly, and the fade is just where a lot of them piled up.

Coverage after k overlapping copies at alpha a is 1 - (1-a)^k — fast at first, then a long tail. That law is the effect.

I did it the dumb way first: two hundred draws a frame on a 2D canvas. It choked exactly when you moved the cursor, because moving the cursor was what turned the chromatic pass on and doubled the blit count. Now every pixel just walks back up the trail and counts. One draw call, and the cost no longer depends on how many copies there are — which matters more than it sounds, since the eased followers need short even frames to track rather than lurch.

On a dark preset the copies add — the trail is the word's own light smeared. On a light preset the same accumulation has to run subtractively, as ink density on paper, because adding light to white blows out and leaves nothing to see. The compositing mode is a continuous 0–1, not a boolean, so a dark→light crossfade passes through the middle instead of snapping at the worst possible moment.

The pointer follows. The plane turns to face the cursor with a real perspective divide, so the far edge gets narrower than the near one — a shear can't produce that at any strength. The trail bends toward the cursor as it falls, weighted by t² so the near copies stay put and the far end swings.

import { SmearCard } from "./smear-card";

// Default export = what <ComponentPreview name="smear" /> renders.
export default function SmearPage() {
  return (
    <div className="w-full max-w-xl px-4">
      <SmearCard />
    </div>
  );
}

import { SmearCard } from "./smear-card";

// Default export = what <ComponentPreview name="smear" /> renders.
export default function SmearPage() {
  return (
    <div className="w-full max-w-xl px-4">
      <SmearCard />
    </div>
  );
}

Original concept by Arlan.