Book

Animated 3D React book component with CSS perspective transforms, hover rotation, and stripe or simple cover variants.

~9.0 kB

Last updated: August 2, 2026

Installation

npx smoothui-cli add book

Features

3D perspective with realistic depth and page edges
Hover rotation with scale effect (on pointer devices)
Two variants: stripe (color band + white body) and simple (full-color cover)
Customizable cover color and text color
Configurable width
Optional illustration and logo slots
Respects reduced motion preferences

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the hover rotation and scale transition are disabled, and the book renders in its static resting state.

ARIA

Decorative elements such as the spine binding overlays, page edges, and back cover are marked with aria-hidden to prevent screen readers from announcing visual-only content.