An open book whose pages turn one after another in 3D, then return to the right-hand stack.
Library
Opening The Long Meridian
Chapter 12 · 31 min left
npx shadcn@latest add https://hyperblur.dev/r/loader-book-flip.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-book-flip.tsx.
import { LoaderBookFlip } from "@/components/hyperblur/loader-book-flip"
<LoaderBookFlip size={64} label="Opening your library" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 56 | Width of the open book in pixels. Height is 70% of it. |
| color | string | "#2f7bff" | Cover color. |
| accent | string | "#ece8df" | Page color. |
| speed | number | 3.2 | Seconds for one full round of page turns. |
| pages | number | 5 | Number of flipping pages, from 3 to 8. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |