◈ component · relief-surface
Relief Surface
An embossed or debossed surface with pointer and keyboard lighting. A controlled React component and standalone SVG renderer using an authored alpha height map.
The Relief Press.
No ink. Just a change in depth.
Move the light and let the surface tell you what is there.
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!
A surface with a memory of the light.
Keep the surface controlled in React, or omit the callback for a static impression. The SVG export carries the same material, inscription and lighting recipe.
"use client";
import { useState } from "react";
import { ReliefSurface } from "@/components/ReliefSurface";
import { RELIEF_DEFAULT, reliefSvg } from "@/lib/render/relief";
export default function SurfaceStudy() {
const [state, setState] = useState(RELIEF_DEFAULT);
// reliefSvg(state) returns the complete portable SVG.
return <ReliefSurface state={state}
onChange={light => setState(old => ({ ...old, ...light }))} />;
}Text uses installed serif fonts. The geometric seal avoids font dependencies. Use a browser or editor that preserves SVG lighting filters.
Source
components/ReliefSurface.tsxlib/render/relief.ts
Registry item: /r/relief-surface.json