KQ-1818 · MITRE/JOINT

Mitre Joint

A border for any content built like a picture frame: four lengths of moulding with mitred ends, each shaded across its own width by a flat, cove or gilt profile so a real seam shows where two meet. When first seen the lengths slide in from beyond their edges on springs.glide a stagger apart; as the last one seats the corners click, the frame settling on springs.flick with the seams flashing, and a crisp glow runs once round the bevel from the top-left corner both ways before it settles to a quiet sheen. Hover, or keyboard focus inside the content, lifts the frame on glide and turns the light toward the pointer, the lengths facing it brightening and a highlight sliding along the moulding.

KQ-1818 · MITRE/JOINT

Fieldline Print Club · October

Harbour, first light

Giclée on cotton rag · edition of 40

12 of 40 left

framing · four lengths

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/mitre-joint

Props

children: ReactNode; default —; The content inside the frame; it keeps its own semantics and focus.
profile: "flat" | "cove" | "gilt"; default "gilt"; The moulding's profile: a flat lacquered rail, a walnut cove, or gilt with beads.
bevel: number; default 14; The moulding's width in px, 6 to 28.
glow: "gold" | "accent" | "frost" | "ember" | string; default "gold"; The light that runs along the bevel once the corners meet: a preset or any CSS colour.
color: string; default by profile; The moulding's colour: the page's ink (flat), walnut (cove) or gold leaf (gilt) unless set.
trigger: "inView" | "mount" | "manual"; default "inView"; When the frame assembles: first seen, at mount, or only when assembled says so.
assembled: boolean; default —; Controls the frame: true slides the lengths in, false takes them apart. Undefined lets trigger decide.
once: boolean; default true; Assemble only the first time it is seen; false assembles again on every return.
delay: number; default 0; Wait before the first length moves, ms.
stagger: number; default 60; Time between the four lengths setting off, ms, 0 to 150.
onAssembled: () => void; default —; Fires when the last corner clicks home.
lift: number; default 2; How far hover or focus inside lifts the frame, px, 0 to 6 (the shadow stays inside the root).
highlight: number; default 0.6; Strength of the highlight that follows the pointer along the moulding, 0 to 1.
sheen: number; default 0.5; The quiet sheen the glow settles to, 0 to 1.
interactive: boolean; default true; Hover and focus lift the frame and move its light.
sound: boolean; default false; Play the click when the corners meet, only when the visitor's own action assembled it.
className: string; default —; Classes for the root (width, margins).
contentClassName: string; default —; Classes for the opening that holds the content (padding, background).

Prop	Type	Default	Description
children	ReactNode	—	The content inside the frame; it keeps its own semantics and focus.
profile	"flat" \| "cove" \| "gilt"	"gilt"	The moulding's profile: a flat lacquered rail, a walnut cove, or gilt with beads.
bevel	number	14	The moulding's width in px, 6 to 28.
glow	"gold" \| "accent" \| "frost" \| "ember" \| string	"gold"	The light that runs along the bevel once the corners meet: a preset or any CSS colour.
color	string	by profile	The moulding's colour: the page's ink (flat), walnut (cove) or gold leaf (gilt) unless set.
trigger	"inView" \| "mount" \| "manual"	"inView"	When the frame assembles: first seen, at mount, or only when assembled says so.
assembled	boolean	—	Controls the frame: true slides the lengths in, false takes them apart. Undefined lets trigger decide.
once	boolean	true	Assemble only the first time it is seen; false assembles again on every return.
delay	number	0	Wait before the first length moves, ms.
stagger	number	60	Time between the four lengths setting off, ms, 0 to 150.
onAssembled	() => void	—	Fires when the last corner clicks home.
lift	number	2	How far hover or focus inside lifts the frame, px, 0 to 6 (the shadow stays inside the root).
highlight	number	0.6	Strength of the highlight that follows the pointer along the moulding, 0 to 1.
sheen	number	0.5	The quiet sheen the glow settles to, 0 to 1.
interactive	boolean	true	Hover and focus lift the frame and move its light.
sound	boolean	false	Play the click when the corners meet, only when the visitor's own action assembled it.
className	string	—	Classes for the root (width, margins).
contentClassName	string	—	Classes for the opening that holds the content (padding, background).