Riso Print

$ pnpm dlx shadcn@latest add @remocn/riso-print

Usage

RisoPrint is a full-frame scene. It renders its subject twice, once per ink plate, and multiplies both plates onto a paper ground. The key plate presses onto the paper first. The accent plate slides in from the lower left on a loose spring, overshoots, and settles a few pixels off register. Both plates are speckled with seeded noise where the ink failed to take, and a paper tooth texture sits over everything.

import { RisoPrint } from "@/components/remocn/riso-print";
 
export const Poster = () => <RisoPrint />;

Without children it prints a built-in geometric poster. Pass children to print your own subject. Children are centered in the frame and rendered once per plate.

Separating your subject into plates

Each plate picks up ink by color channel, like a separation:

The key plate takes everything without red, and the accent plate takes everything without green. So paint the subject in these flat separation colors, not in the final inks. The final inks come from keyInk and accentInk (or the inks tuple).

import { RisoPrint } from "@/components/remocn/riso-print";
 
export const ZineCover = () => (
  <RisoPrint keyInk="#1F3A93" accentInk="#FF4F64" paper="#F4EFE4">
    <div style={{ display: "flex", alignItems: "center", gap: 56 }}>
      <div
        style={{
          width: 300,
          height: 300,
          borderRadius: "50%",
          background: "#FF0000",
        }}
      />
      <span style={{ fontSize: 180, fontWeight: 900, color: "#00FFFF" }}>
        ZINE
      </span>
    </div>
  </RisoPrint>
);

Here the circle prints only in pink and the word only in blue. Black text would print in both plates and show the accent plate's offset as a pink fringe.

Timing

At 30 fps and speed={1}:

The wobble never stops, so the hold stays alive. Set jitter={0} for a still hold. speed scales the whole timeline. Pixel props are pixels at 720p and scale with the composition height.

Notes

Both plates and the paper run SVG filters with fractal noise over the full frame, so this look renders slower than a plain scene. The noise is seeded, so every frame is deterministic.