KQ-1602 · NOTEPAD/FLIP

Notepad Flip

A top-bound reporter's pad seen at an angle in real CSS 3D, one line of text per sheet: scroll over it and the top sheet peels up, turns over the binding with its lower half lagging on the air so the paper curls, throws a shadow down the next line and comes to rest on the turned pile above the spiral, its writing showing through from behind. Each sheet's angle is a spring toward the scroll — rising on springs.snap with one flap at the top of its arc, falling back on springs.glide with a soft landing — and a jump in the scroll is followed one sheet after another, so sheets go over and come back down in order. The pad is a native scroller and a vertical slider: Down and Up turn one sheet at a time, Page Down and Page Up two, Home and End jump, and Enter or Space turns the next.

KQ-1602 · NOTEPAD/FLIP

Waylight 2.4 · what changed

Offline maps for every trailA full day more batteryShare a route with one tapNight mode follows sunsetFixed: the compass drift

Offline maps for every trailOffline maps for every trailOffline maps for every trailOffline maps for every trailA full day more batteryA full day more batteryA full day more batteryA full day more batteryShare a route with one tapShare a route with one tapShare a route with one tapShare a route with one tapNight mode follows sunsetNight mode follows sunsetNight mode follows sunsetNight mode follows sunsetFixed: the compass driftFixed: the compass driftFixed: the compass driftFixed: the compass drift

sheet 2 of 5 · scroll, drag or use the arrow keys

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/notepad-flip

Props

lines: string[]; default —; One line per sheet, the top sheet first.
label: string; default "Notepad"; The pad's accessible name.
value / defaultValue: number; default 0; The index of the sheet showing, which is how many are turned.
onValueChange: (index: number) => void; default —; Fires from the scroll, drag, tap or key that turned to a new sheet.
binding: "spiral" | "wire" | "glue"; default "spiral"; How the sheets are bound along the top.
flipAngle: number; default 190; Where a turned sheet rests over the binding, degrees: under 180 the pile stands up, over 180 it leans away behind the pad.
paperTone: "white" | "legal" | "steno" | "kraft"; default "legal"; The paper stock, with its ruling.
tilt: number; default 24; How far the pad lies back on the desk, degrees.
curl: number; default 0.5; How far a turning sheet's free half bends behind it, 0 to 1.
shadow: number; default 0.6; How dark a lifted sheet's shadow falls on the next line, 0 to 1.
step: number; default 90; Scroll distance that turns one sheet, px.
ruled: boolean; default true; Draw the blue rule under the words and the red margin line.
ink: string; default a navy ballpoint; The colour of the writing, any CSS colour.
interactive: boolean; default true; Scrolling, dragging, tapping and the keys turn the sheets.
sound: boolean; default false; Paper sounds for the turns the visitor makes.
disabled: boolean; default false; Shows the pad as it is; nothing turns it.
className: string; default —; Size the pad with font-size: it is drawn in em.

Prop	Type	Default	Description
lines	string[]	—	One line per sheet, the top sheet first.
label	string	"Notepad"	The pad's accessible name.
value / defaultValue	number	0	The index of the sheet showing, which is how many are turned.
onValueChange	(index: number) => void	—	Fires from the scroll, drag, tap or key that turned to a new sheet.
binding	"spiral" \| "wire" \| "glue"	"spiral"	How the sheets are bound along the top.
flipAngle	number	190	Where a turned sheet rests over the binding, degrees: under 180 the pile stands up, over 180 it leans away behind the pad.
paperTone	"white" \| "legal" \| "steno" \| "kraft"	"legal"	The paper stock, with its ruling.
tilt	number	24	How far the pad lies back on the desk, degrees.
curl	number	0.5	How far a turning sheet's free half bends behind it, 0 to 1.
shadow	number	0.6	How dark a lifted sheet's shadow falls on the next line, 0 to 1.
step	number	90	Scroll distance that turns one sheet, px.
ruled	boolean	true	Draw the blue rule under the words and the red margin line.
ink	string	a navy ballpoint	The colour of the writing, any CSS colour.
interactive	boolean	true	Scrolling, dragging, tapping and the keys turn the sheets.
sound	boolean	false	Paper sounds for the turns the visitor makes.
disabled	boolean	false	Shows the pad as it is; nothing turns it.
className	string	—	Size the pad with font-size: it is drawn in em.