{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "page-flip", "type": "registry:ui", "title": "Page Flip", "description": "A CSS 3D book: drag a page's edge and it turns around the spine with curl shading, or falls back.", "author": "WANSTUDIO ", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/page-flip.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { animate, motion, useMotionValue, useTransform, type MotionValue } from \"motion/react\";\n\nfunction subscribeReducedMotion(callback: () => void) {\n const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n mq.addEventListener(\"change\", callback);\n return () => mq.removeEventListener(\"change\", callback);\n}\n\n/** SSR-safe: hydrates as \"no preference\", then follows the media query. */\nfunction usePrefersReducedMotion() {\n return React.useSyncExternalStore(\n subscribeReducedMotion,\n () => window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches,\n () => false,\n );\n}\n\nexport type PageFlipView = \"auto\" | \"spread\" | \"single\";\n\nexport interface PageFlipProps extends Omit, \"children\"> {\n /** Page contents, in reading order. Page 1 is the cover (shown alone on the right in spreads). */\n pages: React.ReactNode[];\n /** Accessible name of the book. */\n label?: string;\n /** Page width in px (shrinks to fit narrow containers). */\n width?: number;\n /** Page height as a multiple of its width. */\n ratio?: number;\n /** Two-page spreads, single pages, or spreads only when the container is wide enough. */\n view?: PageFlipView;\n /** Duration of one page turn, in ms. */\n duration?: number;\n /** Strength of the curl shading on turning pages, 0–1. */\n shading?: number;\n /** Small page numbers in the outer bottom corners. */\n folios?: boolean;\n /** Previous / next buttons and the counter. */\n showControls?: boolean;\n /** Focus ring and control colour (any CSS colour). */\n accent?: string;\n /** Initially shown page (0-based). */\n defaultPage?: number;\n /** Called with the first visible page (0-based) when it changes. */\n onPageChange?: (page: number) => void;\n}\n\ntype Mode = \"spread\" | \"single\";\n\ninterface GripDrag {\n id: number;\n forward: boolean;\n leaf: number;\n spineX: number;\n pageW: number;\n x0: number;\n angle: number;\n t: number;\n v: number;\n}\nconst EASE = [0.645, 0.045, 0.355, 1] as const; // ease-in-out cubic: lift, glide, settle\nconst STAGGER = 0.07; // seconds between leaves when several turn at once\n\nconst iconButton =\n \"grid size-9 place-items-center rounded-full border border-zinc-900/12 bg-white text-zinc-700 outline-hidden transition-colors hover:border-zinc-900/25 hover:text-zinc-950 aria-disabled:opacity-35 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-[var(--pf-accent)] dark:border-white/12 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:border-white/25 dark:hover:text-white\";\n\nconst paper = \"bg-[#FBFAF6] dark:bg-[#1B1E22]\";\n\nfunction Chevron({ dir }: { dir: \"left\" | \"right\" }) {\n return (\n \n \n \n );\n}\n\ninterface LeafProps {\n index: number;\n leaves: number;\n turned: number;\n front: React.ReactNode;\n back: React.ReactNode;\n frontVisible: boolean;\n backVisible: boolean;\n frontFolio: number | null;\n backFolio: number | null;\n duration: number;\n shading: number;\n instant: boolean;\n register: (index: number, value: MotionValue | null) => void;\n}\n\n/**\n * One sheet of paper hinged at the spine: front face on the right, back face (pre-rotated 180°)\n * on the left. Its angle is a motion value that animates whenever the number of turned leaves\n * crosses it; the parent can also drive it directly while a corner is dragged.\n */\nfunction Leaf({ index, leaves, turned, front, back, frontVisible, backVisible, frontFolio, backFolio, duration, shading, instant, register }: LeafProps) {\n const target = index < turned ? -180 : 0;\n const rot = useMotionValue(target);\n const prevTurned = React.useRef(turned);\n\n React.useEffect(() => {\n register(index, rot);\n return () => register(index, null);\n }, [index, rot, register]);\n\n React.useEffect(() => {\n const from = prevTurned.current;\n prevTurned.current = turned;\n if (instant) {\n rot.set(target);\n return;\n }\n // When several leaves turn at once (Home/End, view changes), riffle them in reading order.\n const order = turned > from ? index - from : from - 1 - index;\n const remaining = Math.abs(target - rot.get()) / 180;\n const controls = animate(rot, target, {\n duration: Math.max(0.12, (duration / 1000) * remaining),\n ease: EASE,\n delay: Math.max(0, order) * STAGGER,\n });\n return () => controls.stop();\n }, [target, turned, index, duration, instant, rot]);\n\n // On the right half the earliest leaf is on top; once past 90° the latest one is.\n const zIndex = useTransform(rot, (r) => (r > -90 ? leaves - index : index + 1));\n const lift = useTransform(rot, (r) => Math.round(Math.sin((-r * Math.PI) / 180) * shading * 1000) / 1000);\n\n return (\n \n {/* Front: a right-hand page. */}\n \n
{front}
\n {frontFolio !== null && (\n \n {String(frontFolio).padStart(2, \"0\")}\n \n )}\n
\n \n
\n {/* Back: a left-hand page, mirrored so it reads correctly once the leaf has turned. */}\n \n
{back}
\n {backFolio !== null && (\n \n {String(backFolio).padStart(2, \"0\")}\n \n )}\n
\n \n
\n \n );\n}\n\n/**\n * A book whose pages turn around the spine in CSS 3D. Wide containers show two-page spreads,\n * narrow ones a single page. Turn with the buttons, the arrow keys while the book is focused, or\n * by dragging a page's outer edge — the page follows the pointer and completes or falls back\n * depending on how far (and how fast) it went. Only the visible pages are interactive; the rest\n * are inert and hidden from assistive tech, and the visible pages are announced.\n */\nexport function PageFlip({\n pages,\n label = \"Book\",\n width = 240,\n ratio = 1.38,\n view = \"auto\",\n duration = 700,\n shading = 0.6,\n folios = true,\n showControls = true,\n accent = \"#FF7448\",\n defaultPage = 0,\n onPageChange,\n className = \"\",\n style,\n ...props\n}: PageFlipProps) {\n const reduceMotion = usePrefersReducedMotion();\n const n = pages.length;\n const rootRef = React.useRef(null);\n const bookRef = React.useRef(null);\n const leafValues = React.useRef(new Map>());\n const onPageChangeRef = React.useRef(onPageChange);\n const drag = React.useRef(null);\n\n const [page, setPage] = React.useState(() => Math.max(0, Math.min(n - 1, Math.round(defaultPage))));\n const [layout, setLayout] = React.useState<{ mode: Mode; pageW: number }>({ mode: view === \"single\" ? \"single\" : \"spread\", pageW: width });\n const [dragging, setDragging] = React.useState(false);\n\n const mode: Mode = view === \"auto\" ? layout.mode : view;\n const pageW = Math.round(Math.min(width, layout.pageW));\n const pageH = Math.round(pageW * ratio);\n const spread = mode === \"spread\";\n\n // Leaves: in spreads each sheet carries two pages (front = right, back = left); single view\n // gives every page its own sheet with a blank back.\n const leafCount = spread ? Math.ceil(n / 2) : n;\n const maxTurned = spread ? Math.floor(n / 2) : n - 1;\n const turned = Math.min(maxTurned, spread ? Math.floor((page + 1) / 2) : page);\n const visible = spread ? [turned * 2 - 1, turned * 2].filter((p) => p >= 0 && p < n) : [page];\n const first = visible[0] ?? 0;\n\n React.useEffect(() => {\n onPageChangeRef.current = onPageChange;\n });\n\n // Measure the container: choose spread or single (in auto) and shrink pages to fit.\n React.useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n const ro = new ResizeObserver(([entry]) => {\n const available = entry.contentRect.width - 24;\n const wide = available >= width * 2;\n const nextMode: Mode = view === \"single\" || (view === \"auto\" && !wide) ? \"single\" : \"spread\";\n const nextW = Math.max(120, Math.min(width, nextMode === \"spread\" ? available / 2 : available));\n setLayout((prev) => (prev.mode === nextMode && Math.abs(prev.pageW - nextW) < 1 ? prev : { mode: nextMode, pageW: nextW }));\n });\n ro.observe(root);\n return () => ro.disconnect();\n }, [width, view]);\n\n const register = React.useCallback((index: number, value: MotionValue | null) => {\n if (value) leafValues.current.set(index, value);\n else leafValues.current.delete(index);\n }, []);\n\n const goToTurned = (t: number) => {\n const next = Math.max(0, Math.min(maxTurned, t));\n const nextPage = spread ? (next === 0 ? 0 : next * 2 - 1) : next;\n if (nextPage === page) return;\n setPage(nextPage);\n onPageChangeRef.current?.(nextPage);\n };\n\n /* --------------------------------- Drag --------------------------------- */\n\n const angleAt = (d: GripDrag, clientX: number) => {\n if (spread) {\n // The page's outer edge follows the pointer: x = spine + w·cos θ.\n const c = Math.max(-1, Math.min(1, (clientX - d.spineX) / d.pageW));\n return (Math.acos(c) * 180) / Math.PI;\n }\n const p = Math.max(0, Math.min(1, (d.forward ? d.x0 - clientX : clientX - d.x0) / d.pageW));\n return d.forward ? p * 180 : 180 - p * 180;\n };\n\n const onGripDown = (e: React.PointerEvent) => {\n if (e.button !== 0 || !bookRef.current) return;\n const forward = e.currentTarget.dataset.direction === \"next\";\n const leaf = forward ? turned : turned - 1;\n const value = leafValues.current.get(leaf);\n if (!value) return;\n e.preventDefault();\n e.currentTarget.setPointerCapture(e.pointerId);\n value.stop();\n const rect = bookRef.current.getBoundingClientRect();\n const scale = rect.width / (spread ? pageW * 2 : pageW) || 1;\n drag.current = {\n id: e.pointerId,\n forward,\n leaf,\n spineX: rect.left + (spread ? rect.width / 2 : 0),\n pageW: pageW * scale,\n x0: e.clientX,\n angle: -value.get(),\n t: e.timeStamp,\n v: 0,\n };\n setDragging(true);\n };\n\n const onGripMove = (e: React.PointerEvent) => {\n const d = drag.current;\n if (!d || d.id !== e.pointerId) return;\n const angle = angleAt(d, e.clientX);\n const dt = Math.max(1, e.timeStamp - d.t) / 1000;\n d.v = d.v * 0.5 + ((angle - d.angle) / dt) * 0.5;\n d.angle = angle;\n d.t = e.timeStamp;\n leafValues.current.get(d.leaf)?.set(-angle);\n };\n\n const onGripUp = (e: React.PointerEvent) => {\n const d = drag.current;\n if (!d || d.id !== e.pointerId) return;\n drag.current = null;\n setDragging(false);\n const flick = e.timeStamp - d.t > 90 ? 0 : d.v; // degrees per second\n const complete = d.forward ? d.angle > 90 || flick > 320 : d.angle < 90 || flick < -320;\n if (complete && Math.abs(d.angle - (d.forward ? 0 : 180)) > 2) {\n goToTurned(d.forward ? turned + 1 : turned - 1);\n return;\n }\n // Fall back to where it was.\n const value = leafValues.current.get(d.leaf);\n if (!value) return;\n const home = d.forward ? 0 : -180;\n if (reduceMotion) value.set(home);\n else animate(value, home, { duration: Math.max(0.15, ((duration / 1000) * Math.abs(home - value.get())) / 180), ease: EASE });\n };\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n if (e.target !== e.currentTarget) return;\n const keys: Record void> = {\n ArrowLeft: () => goToTurned(turned - 1),\n ArrowRight: () => goToTurned(turned + 1),\n Home: () => goToTurned(0),\n End: () => goToTurned(maxTurned),\n };\n const action = keys[e.key];\n if (!action) return;\n e.preventDefault();\n action();\n };\n\n if (!n) return null;\n\n // Spreads keep the visible paper centred: shift right on the cover, left on the back cover.\n const shift = spread ? (turned === 0 ? -pageW / 2 : turned === leafCount && n % 2 === 0 ? pageW / 2 : 0) : 0;\n const canPrev = turned > 0;\n const canNext = turned < maxTurned;\n const announcement =\n visible.length === 2 ? `Pages ${visible[0] + 1}–${visible[1] + 1} of ${n}` : `Page ${first + 1} of ${n}`;\n const grip = Math.max(36, Math.round(pageW * 0.16));\n\n return (\n \n \n {/* Single view hides the turned stack to the left of the spine; nothing else is clipped. */}\n
\n \n {/* Page block: stacked edges under whichever side still holds paper. */}\n {spread && canPrev && (\n \n )}\n {turned < leafCount && (\n \n )}\n\n {Array.from({ length: leafCount }, (_, j) => {\n const frontPage = spread ? j * 2 : j;\n const backPage = spread ? j * 2 + 1 : -1;\n const hasBack = backPage >= 0 && backPage < n;\n return (\n \n );\n })}\n\n {/* Corner grips: drag a page's outer edge to turn it (pointer only; keys and buttons do the same). */}\n {canNext && (\n \n \n
\n )}\n {canPrev && (\n \n {spread && (\n \n )}\n \n )}\n \n \n \n\n {showControls && (\n
\n \n \n {visible.map((p) => String(p + 1).padStart(2, \"0\")).join(\"–\")} / {String(n).padStart(2, \"0\")}\n \n \n
\n )}\n\n
\n {announcement}\n
\n \n );\n}\n", "type": "registry:ui" } ], "categories": [ "3d" ], "docs": "Documentation: https://wancraft.my/components/page-flip" }