◈ component · frontispiece-plate
Chromatic Loupe & Chrono-Degradation
A hoverable brass loupe with per-channel refraction over any image, plus an aging scrubber driving iron-gall fade, cellulose foxing, edge yellowing and craquelure.
A plate you can inspect.
Inspect the archival plate
Static preview: restoration uses a tonal approximation; the optical loupe needs the live renderer.Drölling, M. (1790). Portrait of Claude-Nicolas Ledoux [Image]. Wikimedia Commons. https://commons.wikimedia.org/wiki/File:Claude_Nicolas_Ledoux_by_Martin_Drolling.JPG
<FrontispiecePlate imageUrl="/monographs/diegetic-interface-architecture.jpg" alt="Portrait of Claude-Nicolas Ledoux" year="1790" /> // Supply your own licensed image and its attribution record. // Controls expose restoration, loupe position and quiet reading.
Copies component source and tokens directly into your repository with requirements listed for this item: lucide-react, motion.
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!
Mount it in your application.
React examples use a client component. Optical surfaces need a sized host, the installed optical stylesheet, and a MovementProvider above the preview. Import your chosen movement tokens and load the fonts separately.
"use client";
import { MovementProvider } from '@/components/MovementProvider';
import '@/registry/optical-components.css';
// Install movement-themes separately for the ten authored palettes.
// import '@/registry/movement-themes.css';
export default function Example() {
return <MovementProvider>{/* place the selected preview here */}</MovementProvider>;
}Source
components/optics/renderers/frontispiece.tscomponents/FrontispiecePlate.tsx
Registry item: /r/frontispiece-plate.json