One real photo, three AI-restyled versions of the exact same pose and crop — LEGO, Minecraft, Roblox — cycling every 2.8 seconds with a quick crossfade between them. Wherever the cursor lingers, the current style melts away to reveal the crisp real photo underneath, in a grid of merged rounded-corner blocks rather than a plain wipe. Leave it alone and a virtual cursor wanders the face on its own, so the reveal keeps happening even without a visitor's hand.

Two WebGL passes run every frame. A small half-float ping-pong buffer holds a persistent cursor trail: each frame the pointer paints a soft, noise-warped spot into the red channel, and the buffer decays while eroding against its neighbours so the trail lingers and fades rather than snapping on and off. The display pass crossfades the current and next style textures, reads that trail buffer, and wherever it's hot, unions rounded-box SDFs over a 24×24 grid to carve out the revealed blocks — each one bouncing in as it crosses the reveal threshold — and mixes them against the real photo.

The tile's 3D tilt, the cursor-following glow, and the background colour are computed once per frame in the engine and handed back to the host as plain numbers; nothing here reads canvas pixels back out, it's all applied with CSS custom properties. Reduced motion renders one static frame instead of running the loop.

import { LegoCard } from "./lego-card";

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

import { LegoCard } from "./lego-card";

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