Modus UI

Intaglio Deed

Web (React)

A guilloche intaglio deed in theme ink whose rosette cycles through four lathe cams.

A paper certificate drawn on Canvas 2D: an engraved wave field and guilloche border, a medal of two rosettes and a slowly drifting harmonic pass. Every few seconds it switches to the next cam, redrawing the rosettes. It pauses off screen and stays still when the user prefers reduced motion.

Modus Atelier

Folio 07 · Plate A

Current plate · A
Modus / Intaglio Deed

Installation

CLI

npx @modus-ui/cli add intaglio-deed

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/intaglio-deed.tsx.
  3. Paste the code.

Usage

tsx
import { IntaglioDeed } from "@/components/ui/intaglio-deed";

export default function Example() {
  return (
    <div className="relative h-[560px] w-full">
      <IntaglioDeed label="Modus UI" title="Folio 07 · Plate" />
    </div>
  );
}

Props

PropTypeDefaultDescription
labelstring"Modus Atelier"Small mono label above the medal.
titlestring"Folio 07 · Plate"Headline before the cam letter.
captionstring"Current plate ·"Caption before the cam letter.
inkColorstring"#1f3a30"Engraving ink colour (hex).
paperColorstring"#f5efdf"Certificate paper colour.
backgroundColorstring"hsl(var(--muted))"Scene background behind the certificate.
cycleIntervalnumber4200Milliseconds between cam changes.

Comments

  • No comments yet.