KQ-1227 · EMBOSS/CARD

Emboss Card

A business card lying on the table with its name blind-debossed and a blind-embossed roundel, lit by one lamp that follows the pointer on the glide spring and drifts back to rest on drift: bevels are shaded analytically (a cosine around each ring, the letters masked against themselves shifted along the light), so the impression turns as the lamp moves. Tap, drag or press Details and the card turns over to its contact details, following the finger 1:1 and committing by projection on the snap spring as it lifts off the table; Copy writes the contact to the clipboard and draws a check on flick. The keyboard reaches the same turn through the Details toggle, and a keyboard arrival sweeps the lamp once across the card.

KQ-1227 · EMBOSS/CARD

Fernworks

Planting designer

front · drag or tap to turn

Open it on the Atelier stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/emboss-card

Props

name: string; default —; The name, blind-debossed on the front.
title: string; default —; The job title, printed under the name.
company: string; default —; The company, printed in spaced capitals at the top right.
details: { label: string; value: string; href?: string }[]; default []; Contact lines printed on the back; up to four fit the card. An href makes the value a link.
monogram: string; default —; One or two letters debossed into the roundel. Defaults to the name's initials.
flipped / defaultFlipped: boolean; default false; Whether the back (the contact details) faces up; controlled or uncontrolled.
onFlippedChange: (flipped: boolean) => void; default —; Fires from the tap, drag or button that turned the card, with the new side.
copyText: string; default —; What Copy puts on the clipboard. Defaults to the name, title, company and every detail, one per line.
onCopy: (text: string) => void; default —; Fires once the contact is on the clipboard, with the text that was copied.
depth: number; default 0.6; How deep the press is, 0 to 1: the bevel's angle, the walls' width and the rim's cast shadow.
stock: "cotton" | "kraft" | "black"; default "cotton"; The board the card is pressed into; black prints its details in white ink.
light: boolean; default true; A lamp that follows the pointer, with a sheen on the board. Off: a fixed light from the upper left.
sound: boolean; default false; The copy click and the soft click of the card landing after a turn the visitor asked for.
disabled: boolean; default false; The card can be read but not turned or copied, and the lamp stays at rest.
className: string; default —; Classes for the root.

Prop	Type	Default	Description
name	string	—	The name, blind-debossed on the front.
title	string	—	The job title, printed under the name.
company	string	—	The company, printed in spaced capitals at the top right.
details	{ label: string; value: string; href?: string }[]	[]	Contact lines printed on the back; up to four fit the card. An href makes the value a link.
monogram	string	—	One or two letters debossed into the roundel. Defaults to the name's initials.
flipped / defaultFlipped	boolean	false	Whether the back (the contact details) faces up; controlled or uncontrolled.
onFlippedChange	(flipped: boolean) => void	—	Fires from the tap, drag or button that turned the card, with the new side.
copyText	string	—	What Copy puts on the clipboard. Defaults to the name, title, company and every detail, one per line.
onCopy	(text: string) => void	—	Fires once the contact is on the clipboard, with the text that was copied.
depth	number	0.6	How deep the press is, 0 to 1: the bevel's angle, the walls' width and the rim's cast shadow.
stock	"cotton" \| "kraft" \| "black"	"cotton"	The board the card is pressed into; black prints its details in white ink.
light	boolean	true	A lamp that follows the pointer, with a sheen on the board. Off: a fixed light from the upper left.
sound	boolean	false	The copy click and the soft click of the card landing after a turn the visitor asked for.
disabled	boolean	false	The card can be read but not turned or copied, and the lamp stays at rest.
className	string	—	Classes for the root.