KQ-1222 · MAIL/POSTCARD

Mail Postcard

A postcard that turns over on the glide spring with perspective — pressed, swiped 1:1 with the finger and projected on release, or from its Turn over button — and the first time its back comes round the message writes itself, a pen nib running the measured text quick inside words, lifting at spaces and pausing at punctuation. Send lands the postmark on the recoil spring with a thud while the card gives under the blow, then slides the card off into the post on the exit ease and leaves a Posted slip. Turn over and Send are real buttons and focus follows the card to the slip and back.

KQ-1222 · MAIL/POSTCARD

Greetings from Coldbrook

picture side · turn it over

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/mail-postcard

Props

message: string; default —; What is written on the back — a postcard's worth, about 160 characters.
to: { name: string; lines: string[] }; default —; The address: the name names the card, and up to two more ruled lines.
from: string; default —; Signed under the message.
place: string; default —; The town on the postmark.
date: string; default —; The date on the postmark and the Posted slip, e.g. "07 Oct 26".
picture: ReactNode; default —; The picture side: an image or an illustration that fills it.
caption: string; default —; Printed on the picture side, e.g. "Greetings from Coldbrook".
side / defaultSide: "front" | "back"; default "front"; Which side faces up.
onSideChange: (side: "front" | "back") => void; default —; Fires from the swipe, press or button that turned the card.
sent / defaultSent: boolean; default false; Whether the card has been posted. Setting it back to false brings a fresh card in from the left.
onSentChange: (sent: boolean) => void; default —; Fires from the Send press, with true.
hand: boolean; default true; The message is handwritten and writes itself behind a pen nib; off, it is printed in the house sans at once.
stamp: "round" | "wave"; default "round"; A circular date stamp with cancel bars, or a machine postmark's wavy lines.
paper: "cream" | "white" | "kraft"; default "cream"; The card stock and its inks, fixed pigments that read the same in either theme.
sendLabel: string; default "Send"; The Send button's text.
sound: boolean; default false; A paper turn, the postmark's thud and the posting's paper — only for the visitor's own presses and swipes.
disabled: boolean; default false; Shows the card but takes no swipe or presses.
className: string; default —; Classes for the root.

Prop	Type	Default	Description
message	string	—	What is written on the back — a postcard's worth, about 160 characters.
to	{ name: string; lines: string[] }	—	The address: the name names the card, and up to two more ruled lines.
from	string	—	Signed under the message.
place	string	—	The town on the postmark.
date	string	—	The date on the postmark and the Posted slip, e.g. "07 Oct 26".
picture	ReactNode	—	The picture side: an image or an illustration that fills it.
caption	string	—	Printed on the picture side, e.g. "Greetings from Coldbrook".
side / defaultSide	"front" \| "back"	"front"	Which side faces up.
onSideChange	(side: "front" \| "back") => void	—	Fires from the swipe, press or button that turned the card.
sent / defaultSent	boolean	false	Whether the card has been posted. Setting it back to false brings a fresh card in from the left.
onSentChange	(sent: boolean) => void	—	Fires from the Send press, with true.
hand	boolean	true	The message is handwritten and writes itself behind a pen nib; off, it is printed in the house sans at once.
stamp	"round" \| "wave"	"round"	A circular date stamp with cancel bars, or a machine postmark's wavy lines.
paper	"cream" \| "white" \| "kraft"	"cream"	The card stock and its inks, fixed pigments that read the same in either theme.
sendLabel	string	"Send"	The Send button's text.
sound	boolean	false	A paper turn, the postmark's thud and the posting's paper — only for the visitor's own presses and swipes.
disabled	boolean	false	Shows the card but takes no swipe or presses.
className	string	—	Classes for the root.