A letter is cut into a grid of tiles, and each tile slips on its own wave, so the whole letter ripples like water.

The letter is drawn once into an offscreen buffer. Every frame, each tile copies from a source rectangle offset by a sine wave whose phase depends on the frame count and the tile's own position — neighbouring tiles fall out of step, and that phase difference is the ripple.

Three things sit on top of that base. The offset is the sum of two waves at different rates, so the ripple crosses itself instead of sliding as one flat sheet. The warped letter is composited three times — the split colour and its complement offset a few pixels, then the ink on top at true position — so the body stays clean and only the moving edges bloom. And each tile's alpha is set by how far it travelled, which gives the letter relief.

The whole warp is plain drawImage tile copies. The duotone and the split are three full-frame composites, so their cost is fixed no matter how many tiles you ask for — you can drag Tiles to 64 without the frame time following.

import { KineticCard } from "./kinetic-card";

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

import { KineticCard } from "./kinetic-card";

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

Original concept by Arlan.