KQ-1224 · LIBRARY/CARD

Library Card

A library book's date-due card in its pocket, with a wooden date stamp and an ink pad beside it. The card follows a drag up out of its pocket 1:1, rubber-bands at the ends and commits where the throw was heading on the glide spring; a press on the stamp lifts it on snap, glides it over the next empty row while it turns to that row's seeded crooked angle, strikes on an accelerating tween with a thud and inks the date, then sets it back down on recoil. Every strike thins the ink, so each impression is fainter and patchier until the pad re-inks it, and the card, the stamp and the pad are real buttons, so Enter or Space slides the card, stamps the next row and re-inks.

KQ-1224 · LIBRARY/CARD

Set to14 OCT 2026

2 of 6 stamped · next due 14 oct 2026

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/library-card

Props

title: string; default —; The book's title, printed at the head of the card.
author: string; default —; Who wrote it, printed under the title.
callNumber: string; default —; The shelf mark, printed beside the author in mono.
library: string; default "Public Library"; The library's name, printed on the pocket; its initials are pressed into the cover as a seal.
due: string; default —; What the stamp is set to print next, e.g. "14 OCT 2026". Shown under the stamp.
value / defaultValue: string[]; default []; The dates stamped so far, oldest first. Only as many as there are rows are shown.
onValueChange: (value: string[]) => void; default —; Fires from the strike that inked a row, with every date now on the card.
open / defaultOpen: boolean; default false; Whether the card is out of its pocket. Stamping a tucked card slides it out first.
onOpenChange: (open: boolean) => void; default —; Fires from the drag, tap or key that slid the card out or in.
rows: number; default 6; How many rows the card is ruled into, 4 to 10. They share the card's height, so fewer rows print larger dates.
ink: "violet" | "red" | "black"; default "violet"; The colour of the pad, the stamp's rubber and every impression.
crooked: number; default 3; How far a stamp may land off square, in degrees, 0 to 6. Each row's angle and offset are seeded by the row and its date.
sound: boolean; default false; A thud for every strike (lighter as the ink runs dry), soft dabs on the pad, and a paper rustle as the card slides.
disabled: boolean; default false; Shows the card but takes no drags, taps or keys.
className: string; default —; Classes for the desk's root.

Prop	Type	Default	Description
title	string	—	The book's title, printed at the head of the card.
author	string	—	Who wrote it, printed under the title.
callNumber	string	—	The shelf mark, printed beside the author in mono.
library	string	"Public Library"	The library's name, printed on the pocket; its initials are pressed into the cover as a seal.
due	string	—	What the stamp is set to print next, e.g. "14 OCT 2026". Shown under the stamp.
value / defaultValue	string[]	[]	The dates stamped so far, oldest first. Only as many as there are rows are shown.
onValueChange	(value: string[]) => void	—	Fires from the strike that inked a row, with every date now on the card.
open / defaultOpen	boolean	false	Whether the card is out of its pocket. Stamping a tucked card slides it out first.
onOpenChange	(open: boolean) => void	—	Fires from the drag, tap or key that slid the card out or in.
rows	number	6	How many rows the card is ruled into, 4 to 10. They share the card's height, so fewer rows print larger dates.
ink	"violet" \| "red" \| "black"	"violet"	The colour of the pad, the stamp's rubber and every impression.
crooked	number	3	How far a stamp may land off square, in degrees, 0 to 6. Each row's angle and offset are seeded by the row and its date.
sound	boolean	false	A thud for every strike (lighter as the ink runs dry), soft dabs on the pad, and a paper rustle as the card slides.
disabled	boolean	false	Shows the card but takes no drags, taps or keys.
className	string	—	Classes for the desk's root.