Kinetiq

KQ-1546 · BOOKEND/TYPE

Bookend Type

Capitals stand on a shelf between two bookends like books. A round: the near bookend nudges the first letter and the lean runs down the line under a gravity ease, each book pushing the next and coming to rest slanted against it with a small recoil on springs.recoil's ratio, the last resting its top on the far bookend, which stands exactly where the solved parallel slump puts it; then the near bookend slides in and pushes them upright one after another, each landing with a soft knock, and the next word takes the shelf with the bookends gliding to it on springs.glide and the next round leaning the other way. The shelf is a button: a press, Enter or Space starts a round now, tidies a slumped shelf at once, or puts up the next word.

KQ-1546 · BOOKEND/TYPE

Fernworks Books · shelf 4

FICTION

Press, Enter or Space to nudge the books over; again to tidy them.

standing · fiction · press to nudge

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/bookend-type

Props

words
string[]
default —
The words, one per round, cycled.
as
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"
default "p"
The element that carries the current word.
leanAngle
number
default 16
How far the books slump, degrees; it also sets the far bookend's gap.
pace
number
default 1
Speed of the whole round, 0.5 to 2 times.
shelf
"wood" | "steel" | "none"
default "wood"
The plank the books stand on.
caps
boolean
default true
Set the books in capitals.
color
string
default "currentColor"
The letters' colour, any CSS colour.
bookendColor
string
default "var(--ink-3)"
The bookends' colour, any CSS colour.
autoplay
boolean
default true
Rounds run on their own.
interval
number
default 1600
How long a word stands upright before its round, ms.
alternate
boolean
default true
Each round leans the other way, the bookends trading roles.
trigger
"mount" | "inView" | "manual"
default "inView"
What starts the rounds.
play
boolean
default false
With trigger "manual": true starts the rounds, false stops after the current one.
delay
number
default 0
Wait before the first round, ms.
interactive
boolean
default true
A press, Enter or Space nudges the shelf (or tidies a slumped one).
sound
boolean
default false
Knocks for the rounds the visitor starts.
onWordChange
(index: number) => void
default —
A new word is on the shelf: its index in words.
onPhaseChange
(phase: "standing" | "slumping" | "slumped" | "tidying") => void
default —
The round moved on.
className
string
default —
Size and layout; the type is fitted down if the slump would not fit.