A technical-drawing frame: dashed construction grid, figure caption, and a cursor-following spotlight that re-reveals your content through a radial mask. Dependency-free.
Executive Policy & Delegation
The hero of this site is one of these. Content renders twice - a muted base layer, and a full-strength copy masked by a radial gradient that follows the cursor - so any children (SVG line art especially) get the spotlight with no extra markup.
Install#
npx shadcn@latest add https://benhof.ai/r/blueprint-frame.json
import { BlueprintFrame } from "@/components/blueprint-frame"
;<BlueprintFrame caption="FIG_001">
<YourLineArt />
</BlueprintFrame>
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
caption | string | - | Corner label, e.g. "FIG_001". |
grid | boolean | true | Show the dashed construction-grid backdrop. |
Notes#
Children render twice, so keep them pure presentation - anything with side effects or ids would duplicate. Pressing the frame sinks the content slightly (group-active:scale-[0.98]).
Agentic Architecture Blueprints#
The technical blueprint frame is also the design container powering the bespoke field note covers on this site (such as Plate 14, *The athletic director's newest deputy*). By combining BlueprintFrame with SVG <animateMotion> circuits and telemetry nodes, you can visualize autonomous agent fleets (Hermes, Paperclip, OpenClaw) executing across deterministic, fail-closed tool contracts.