Riso Registration

Backgrounds 4

About

Two halftone ink plates drifting in and out of alignment on independent cycles — risograph misregistration as an animated background, with a safe area that stays crisp. Fixed ink palette by design, so it reads the same in light and dark.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Riso Registration to your project and fits it to your theme.

Code

How Riso Registration is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { RisoRegistrationBackground } from "@/components/ui/riso-registration";

export default function RisoRegistrationDemo() {
  return (
    <div className="relative w-full overflow-hidden rounded-2xl">
      <RisoRegistrationBackground
        className="absolute inset-0"
        density={1}
        intensity={1}
        speed={1}
        safeArea={{ x: 0.06, y: 0.24, w: 0.6, h: 0.52 }}
      />

      <div className="relative flex min-h-[420px] flex-col items-start justify-center gap-4 px-10">
        <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-white/70">
          Ambient background
        </span>
        <h2 className="max-w-md text-4xl font-semibold tracking-tight text-white">
          Two plates, never quite in register.
        </h2>
        <p className="max-w-sm text-sm text-white/75">
          Halftone ink plates drift toward and past alignment on independent
          cycles. Your headline sits in a safe area that stays crisp.
        </p>
      </div>
    </div>
  );
}