KQ-1229 · AWARD/SEAL

Award Seal

A certificate that is signed and sealed in front of you: a signature generated from the signer's name writes itself along its own path, then an embosser presses a crimped foil rosette onto the paper on an accelerating tween, settling on the flick spring as the paper dimples around it, the foil flashes as the light sweeps round its crimps, and two ribbon tails unfurl on glide and swing as damped pendulums whose looseness is the swing tweak. The foil is lit analytically from one light — pleats square to it flash in stripes, the medallion's rim follows a cosine, the laurel is raised by shifted highlight and shadow copies — and hovering the seal moves that light with the pointer. The seal is a real button: Space or Enter signs and seals it, then burnishes it, Left and Right swing the ribbons, and Replay plays the whole ceremony again.

KQ-1229 · AWARD/SEAL

Fieldline Running Club

Certificate of Completion

Presented to

Mara Okafor

For finishing the Spring 10K on the river course in 47:12.

To be signed by J. Ellery · Race director

12 Oct 2026

Date

awaiting signature · press the seal

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/award-seal

Props

issuer: string; default —; Who awards it, printed in spaced capitals at the top.
award: string; default —; The award itself, e.g. "Certificate of Completion".
recipient: string; default —; Who receives it.
citation: string; default —; One or two lines on what it is for.
date: string; default —; The date as it should be printed.
signer: string; default —; Whose signature writes itself on the line; the signature is generated from this name.
signerTitle: string; default —; Printed after the signer's name.
sealed / defaultSealed: boolean; default false; Whether the certificate is signed and sealed; controlled or uncontrolled. Sealing plays the ceremony.
onSealedChange: (sealed: boolean) => void; default —; Fires from the press that signs and seals it, with true.
foil: "gold" | "silver" | "bronze"; default "gold"; The rosette's foil, its printed accents and its ribbons' satin.
ribbons: boolean; default true; Two ribbon tails hang from the seal and swing; they can be brushed, grabbed and thrown.
swing: number; default 0.5; How loosely the ribbons swing, 0 to 1: their damping, the size of every kick and the whip of their lower half.
sound: boolean; default false; A thud as the seal meets the paper, a shimmer with the foil's flash, a softer thud when it is burnished.
disabled: boolean; default false; The certificate can be read but not sealed, burnished or replayed.
className: string; default —; Classes for the root.

Prop	Type	Default	Description
issuer	string	—	Who awards it, printed in spaced capitals at the top.
award	string	—	The award itself, e.g. "Certificate of Completion".
recipient	string	—	Who receives it.
citation	string	—	One or two lines on what it is for.
date	string	—	The date as it should be printed.
signer	string	—	Whose signature writes itself on the line; the signature is generated from this name.
signerTitle	string	—	Printed after the signer's name.
sealed / defaultSealed	boolean	false	Whether the certificate is signed and sealed; controlled or uncontrolled. Sealing plays the ceremony.
onSealedChange	(sealed: boolean) => void	—	Fires from the press that signs and seals it, with true.
foil	"gold" \| "silver" \| "bronze"	"gold"	The rosette's foil, its printed accents and its ribbons' satin.
ribbons	boolean	true	Two ribbon tails hang from the seal and swing; they can be brushed, grabbed and thrown.
swing	number	0.5	How loosely the ribbons swing, 0 to 1: their damping, the size of every kick and the whip of their lower half.
sound	boolean	false	A thud as the seal meets the paper, a shimmer with the foil's flash, a softer thud when it is burnished.
disabled	boolean	false	The certificate can be read but not sealed, burnished or replayed.
className	string	—	Classes for the root.