KQ-1879 · THUMB/FLIPBOOK

Thumb Flipbook

A pocket flipbook lying on the table, taped at its spine, a thumb on the bottom-right corner holding the waiting pages' corners curled into a fan. Riffling lets the pages go one after another: each top page curls up past the thumb and turns away over the spine, revealing the next drawing, so the ink drawing in view moves (a boat on a rolling swell under a gull, a seamless loop) and a fast riffle keeps several pages in the air. Every page's peel springs toward the hand: the page under a drag tracks the finger on springs.flick and released pages flick past on springs.snap at the riffle rate, a flick coasts to where the throw would rest, and scrolling the page riffles forward and back; it is a slider, so arrows turn a page, Page Up and Page Down a loop, Home and End riffle to either end and Space riffles one loop.

KQ-1879 · THUMB/FLIPBOOK

page 0 of 48 · drawing 1 of 12

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/thumb-flipbook

Props

images: string[]; default —; One picture per frame, drawn on the pages in order; replaces the drawn loop.
frames: number; default 12; Drawings in the loop, 6 to 24: a choppy loop to a fluid one. Ignored with `images`.
pages: number; default 48; Pages in the book, 12 to 120.
bend: number; default 0.6; How far the thumb curls the waiting pages, 0 to 1: a slight lift to a tall fan.
riffle: number; default 0.5; Riffle speed, 0 to 1: a slow heavy peel to a quick flutter — pages per px of drag or scroll, and how fast each page flicks past.
value / defaultValue: number; default — / 0; Pages turned, 0 to `pages`, controlled or initial; a new value riffles to it.
onValueChange: (page: number) => void; default —; Fires from the drag, scroll or key that turned a page, with the pages turned.
scroll: boolean; default true; Scrolling the page (or any scroll container) riffles the book forward and back.
thumb: boolean; default true; Draw the thumb holding the pages.
paper: string; default a warm white pigment; The pages, any CSS colour.
ink: string; default from the ink token at a fixed lightness; The drawing's ink, any CSS colour.
accent: string; default a red pigment from the danger token; The drawing's one colour, any CSS colour.
sound: boolean; default false; A paper crinkle as each page leaves the thumb. Off unless asked for.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Flipbook"; The book's accessible name.
disabled: boolean; default false; No riffling by hand, scroll or key.
className: string; default —; Sizes the book's box; 8:5 and the full width by default.

Prop	Type	Default	Description
images	string[]	—	One picture per frame, drawn on the pages in order; replaces the drawn loop.
frames	number	12	Drawings in the loop, 6 to 24: a choppy loop to a fluid one. Ignored with `images`.
pages	number	48	Pages in the book, 12 to 120.
bend	number	0.6	How far the thumb curls the waiting pages, 0 to 1: a slight lift to a tall fan.
riffle	number	0.5	Riffle speed, 0 to 1: a slow heavy peel to a quick flutter — pages per px of drag or scroll, and how fast each page flicks past.
value / defaultValue	number	— / 0	Pages turned, 0 to `pages`, controlled or initial; a new value riffles to it.
onValueChange	(page: number) => void	—	Fires from the drag, scroll or key that turned a page, with the pages turned.
scroll	boolean	true	Scrolling the page (or any scroll container) riffles the book forward and back.
thumb	boolean	true	Draw the thumb holding the pages.
paper	string	a warm white pigment	The pages, any CSS colour.
ink	string	from the ink token at a fixed lightness	The drawing's ink, any CSS colour.
accent	string	a red pigment from the danger token	The drawing's one colour, any CSS colour.
sound	boolean	false	A paper crinkle as each page leaves the thumb. Off unless asked for.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Flipbook"	The book's accessible name.
disabled	boolean	false	No riffling by hand, scroll or key.
className	string	—	Sizes the book's box; 8:5 and the full width by default.