◈ component · registration-plate
Registration Plate
A controlled React print study with three separable ink layers. Drag or use arrow keys to shift the plates; export the same state as standalone SVG. Uses authored RGB multiply blending, not spectral ink simulation.
The Registration
Table.
Three inks. One impression.
Move the plates apart and discover what happens between the colours.
Copies component source and tokens directly into your repository with requirements listed for this item: no additional npm dependencies beyond the host framework.
Open-source under MIT. We preserve the source header comment, and invite you to credit the archive on your project's /about, /colophon, or footer. Display our Archival Colophon Seal or copy a citation snippet below. Sites displaying the seal are welcome to submit to our Federation Showcase!
One state, on screen and on paper.
Supply the plate’s state and handle its offsets. The same recipe produces the portable SVG. No stylesheet, provider or WebGL context is required.
"use client";
import { useState } from "react";
import { RegistrationPlate } from "@/components/RegistrationPlate";
import { REGISTRATION_DEFAULT, registrationSvg } from "@/lib/render/registration";
export default function PrintStudy() {
const [state, setState] = useState(REGISTRATION_DEFAULT);
// registrationSvg(state) returns your portable SVG print.
return <RegistrationPlate
state={state}
onChange={offset => setState(old => ({ ...old, ...offset }))}
/>;
}Omit onChange for a still specimen. Arrow keys move by one unit, Shift increases the step to ten, and Home aligns the offsets. The rosette is pure geometry; the letterform depends on the viewer’s installed serif font.
Source
components/RegistrationPlate.tsxlib/render/registration.ts
Registry item: /r/registration-plate.json