KQ-1866 · GLASSINE/ALBUM

Glassine Album

A photo album opened flat, its heavy card pages holding mounted prints with a sheet of cobweb-printed glassine between every leaf. Drag a page toward the spine and its edge stays under the finger; the tissue lying on it floats over first on springs.drift, its outer panels billowing on light under-damped springs while the print beneath mists or clears, then the page turns on a spring sprung from weight and lands with a slight bounce. The album is a carousel region: arrows and Page Up/Down turn, Home and End jump, and Enter or Space lifts or lays the tissue.

KQ-1866 · GLASSINE/ALBUM

Coldbrook family album · 1961

From the album ofSummers at Saltmarsh

The pier, 1961

inside the cover · drag the page toward the spine

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/glassine-album

Props

photos: GlassineAlbumPhoto[]; default defaultGlassineAlbumPhotos; The prints in order, one per page on both sides of every leaf: { src?, alt, caption? }. Eight sepia and silver prints drawn in code by default.
title: string; default "Summers at Saltmarsh"; The album's name, lettered on the bookplate inside the front cover.
value / defaultValue: number; default 0; The open spread: 0 is inside the front cover, the last shows the back endpaper.
onValueChange: (spread: number) => void; default —; Fires from the drag, tap or key that turned to a new spread.
weight: number; default 0.6; How heavy the card pages are, 0 to 1: heavy pages turn slower and carry more momentum into their landing.
tissue: number; default 0.55; How opaque the glassine is, 0 to 1, and so how misted a print beneath it looks.
paperTone: "cream" | "black" | "dove" | "sage"; default "black"; The card the pages are made of, with a caption ink to match.
flutter: number; default 0.6; How much the tissue billows as it floats over, 0 to 1; 0 turns it as one flat sheet.
corners: boolean; default true; Mount the prints with photo corners.
printed: boolean; default true; Print the faint cobweb on the tissue.
label: string; default the title; The album's accessible name.
sound: boolean; default false; Paper sounds: a light one as a tissue lifts, a heavier one as a page lifts, a low one as it lands.
disabled: boolean; default false; Shows the album as it is; nothing turns.
className: string; default —; Size the album by its width; its height follows (open left and right from 560px, top and bottom below).

Prop	Type	Default	Description
photos	GlassineAlbumPhoto[]	defaultGlassineAlbumPhotos	The prints in order, one per page on both sides of every leaf: { src?, alt, caption? }. Eight sepia and silver prints drawn in code by default.
title	string	"Summers at Saltmarsh"	The album's name, lettered on the bookplate inside the front cover.
value / defaultValue	number	0	The open spread: 0 is inside the front cover, the last shows the back endpaper.
onValueChange	(spread: number) => void	—	Fires from the drag, tap or key that turned to a new spread.
weight	number	0.6	How heavy the card pages are, 0 to 1: heavy pages turn slower and carry more momentum into their landing.
tissue	number	0.55	How opaque the glassine is, 0 to 1, and so how misted a print beneath it looks.
paperTone	"cream" \| "black" \| "dove" \| "sage"	"black"	The card the pages are made of, with a caption ink to match.
flutter	number	0.6	How much the tissue billows as it floats over, 0 to 1; 0 turns it as one flat sheet.
corners	boolean	true	Mount the prints with photo corners.
printed	boolean	true	Print the faint cobweb on the tissue.
label	string	the title	The album's accessible name.
sound	boolean	false	Paper sounds: a light one as a tissue lifts, a heavier one as a page lifts, a low one as it lands.
disabled	boolean	false	Shows the album as it is; nothing turns.
className	string	—	Size the album by its width; its height follows (open left and right from 560px, top and bottom below).