Line Boil

$ pnpm dlx shadcn@latest add @remocn/line-boil

Usage

LineBoil is a full-frame scene. It draws a closed outline with a pen that tapers in and out and varies its pressure along the stroke, then fills the shape with color. The line never sits still. Like a cel animation shot "on threes", the whole drawing is retraced every few frames with a slightly different wobble, cycling through a small set of drawings.

import { LineBoil } from "@/components/remocn/line-boil";
 
export const Star = () => <LineBoil />;

Pass path to draw your own shape. It takes SVG path data in any coordinate space. The outline is sampled at 160 points along its length, scaled so its longer side is size of the frame's short side, and centered. Use one closed outline: separate subpaths and holes are joined into one continuous stroke.

import { LineBoil } from "@/components/remocn/line-boil";
 
const heart =
  "M 50 88 C 20 66 4 48 4 30 C 4 14 16 4 30 4 C 40 4 47 10 50 18 C 53 10 60 4 70 4 C 84 4 96 14 96 30 C 96 48 80 66 50 88 Z";
 
export const Heart = () => (
  <LineBoil
    path={heart}
    line="#1C1A17"
    fill="#FF8FB1"
    background="#FFF6E9"
    boilEvery={2}
  />
);

The fill boils with its own seed and a stronger wobble than the line, so the color slips a little past the outline the way a cel fill does.

Timing

At 30 fps and speed={1}:

lineBoilLength is 40, the frame the fill lands. The boil runs from frame 0 and never stops: a new drawing every boilEvery frames, cycling through drawings variations. speed scales the draw, the fill and the boil rate together.