"use client"; /** * @author: @dorianbaffier * @description: Page Flip * @version: 1.0.0 * @date: 2026-10-21 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { animate, useReducedMotion } from "motion/react"; import { type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; interface Pt { x: number; y: number; } /** A page being turned: which way, by which corner, and where that corner is. */ interface Turn { dir: 1 | -1; /** The corner's resting point, in book pixels. */ corner: Pt; /** Where the corner is now. */ at: Pt; } export interface PageFlipProps { /** Pages in reading order. The first is the cover, alone on the right. */ pages?: ReactNode[]; /** Called with the spread index after a page settles. */ onSpreadChange?: (spread: number) => void; className?: string; } /** Below this frame width (px), the book shows one page at a time. */ const SINGLE_BELOW = 520; /** Marks a layer that isn't drawn. */ const HIDDEN = Symbol("hidden"); interface Layers { left?: ReactNode; right?: ReactNode; /** The page being turned, on its own side. */ turning?: ReactNode; /** What's printed on the back of the turning page. */ back?: ReactNode | typeof HIDDEN; } /** Two pages open: the cover alone on the right, then pairs. */ function twoPages(pages: ReactNode[], spread: number, dir?: 1 | -1): Layers { const leftOf = (s: number) => (s > 0 ? pages[2 * s - 1] : undefined); const rightOf = (s: number) => pages[2 * s]; if (!dir) { return { left: leftOf(spread), right: rightOf(spread) }; } // While turning, what shows under the page is the next spread's. const target = spread + dir; return dir === 1 ? { left: leftOf(spread), right: rightOf(target), turning: rightOf(spread), back: leftOf(target), } : { left: leftOf(target), right: rightOf(spread), turning: leftOf(spread), back: rightOf(target), }; } /** * One page at a time: a page turns off to the left with blank paper on its * back, and turning back brings the previous page in over the current one. */ function onePage(pages: ReactNode[], page: number, dir?: 1 | -1): Layers { if (dir === 1) { return { right: pages[page + 1], turning: pages[page], back: null }; } if (dir === -1) { return { right: pages[page], back: pages[page - 1] ?? HIDDEN }; } return { right: pages[page] }; } /** How far to slide a closed book so its one page sits in the middle. */ function centerShift({ left, right }: Layers) { if (left === undefined) { return -0.25; } return right === undefined ? 0.25 : 0; } /** Corner the pointer has to be within (px) for the page to lift on hover. */ const PEEK_ZONE = 64; /** How far a hovered corner lifts toward the pointer, at most (px). */ const PEEK_MAX = 34; /** Pointer travel that turns a press into a drag (px). */ const DRAG_SLOP = 4; const TURN = { duration: 0.6, ease: [0.32, 0.72, 0, 1] } as const; const SETTLE = { duration: 0.32, ease: [0.23, 1, 0.32, 1] } as const; const sub = (a: Pt, b: Pt): Pt => ({ x: a.x - b.x, y: a.y - b.y }); const dot = (a: Pt, b: Pt) => a.x * b.x + a.y * b.y; const len = (a: Pt) => Math.hypot(a.x, a.y); const lerp = (a: Pt, b: Pt, t: number): Pt => ({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t, }); /** Keeps a point within `radius` of `center`. */ function within(p: Pt, center: Pt, radius: number): Pt { const d = sub(p, center); const l = len(d); if (l <= radius) { return p; } return { x: center.x + (d.x / l) * radius, y: center.y + (d.y / l) * radius }; } /** The part of a polygon on one side of a line through `m` with normal `n`. */ function clipPolygon(poly: Pt[], m: Pt, n: Pt, keepNegative: boolean): Pt[] { const side = (p: Pt) => { const d = dot(sub(p, m), n); return keepNegative ? -d : d; }; const out: Pt[] = []; for (let i = 0; i < poly.length; i++) { const a = poly[i]; const b = poly[(i + 1) % poly.length]; const da = side(a); const db = side(b); if (da >= 0) { out.push(a); } if (da >= 0 !== db >= 0) { out.push(lerp(a, b, da / (da - db))); } } return out; } const polygon = (points: Pt[], dx: number) => points.length ? `polygon(${points.map((p) => `${(p.x - dx).toFixed(2)}px ${p.y.toFixed(2)}px`).join(", ")})` : "polygon(0 0)"; /** * Where everything goes for a corner at `at`: the fold is the line halfway * between the corner's rest and where it is now. The page keeps the spine * side, and the flap (its back) is mirrored across the fold. */ function foldStyles(turn: Turn, w: number, h: number) { const x0 = turn.dir === 1 ? w : 0; const page = [ { x: x0, y: 0 }, { x: x0 + w, y: 0 }, { x: x0 + w, y: h }, { x: x0, y: h }, ]; const d = sub(turn.at, turn.corner); const l = len(d); if (l < 0.5) { return null; } const n = { x: d.x / l, y: d.y / l }; const m = lerp(turn.corner, turn.at, 0.5); const front = clipPolygon(page, m, n, false); const flap = clipPolygon(page, m, n, true); // Reflection across the fold: X -> A X + b. const a = 1 - 2 * n.x * n.x; const bc = -2 * n.x * n.y; const dd = 1 - 2 * n.y * n.y; const k = 2 * dot(m, n); const bx = k * n.x; const by = k * n.y; // The flap element sits at the page's spot; CSS moves it from there. const e = a * x0 + bx - x0; const f = bc * x0 + by; return { front: { clipPath: polygon(front, x0) } satisfies CSSProperties, flap: { clipPath: polygon(flap, x0), transform: `matrix(${a}, ${bc}, ${bc}, ${dd}, ${e}, ${f})`, } satisfies CSSProperties, /** How far through the turn, for the shadow. */ progress: Math.min(1, l / (2 * w)), }; } export default function PageFlip({ pages = DEFAULT_PAGES, onSpreadChange, className, }: PageFlipProps) { const reduceMotion = useReducedMotion(); const bookRef = useRef(null); const [size, setSize] = useState({ w: 0, h: 0 }); const frameRef = useRef(null); /** Narrow frames show one page at a time; the spine sits off to the left. */ const [single, setSingle] = useState(false); // The spread on two pages, or the page on one. const [spread, setSpread] = useState(0); const [turn, setTurn] = useState(null); /** The spread a committed turn is heading for, so the book recenters with it. */ const [heading, setHeading] = useState(null); const turnRef = useRef(null); const pressRef = useRef<{ start: Pt; dragging: boolean; back?: boolean; } | null>(null); const animRef = useRef | null>(null); const playingRef = useRef(false); /** A turn that will finish on its own: presses wait for it. */ const committingRef = useRef(false); const onSpreadChangeRef = useRef(onSpreadChange); onSpreadChangeRef.current = onSpreadChange; const spreads = single ? pages.length : Math.floor(pages.length / 2) + 1; useLayoutEffect(() => { const book = bookRef.current; const frame = frameRef.current; if (!(book && frame)) { return; } const measure = () => { const narrow = frame.clientWidth < SINGLE_BELOW; setSingle((was) => { if (was !== narrow) { // Keep the same page in view when the layout changes. setSpread((s) => narrow ? Math.max(0, 2 * s - 1) : Math.ceil(s / 2) ); } return narrow; }); setSize({ w: book.clientWidth / 2, h: book.clientHeight }); }; measure(); const observer = new ResizeObserver(measure); observer.observe(frame); observer.observe(book); return () => observer.disconnect(); }, []); useEffect(() => () => animRef.current?.stop(), []); const stop = () => { animRef.current?.stop(); playingRef.current = false; }; const setAt = useCallback((next: Turn | null) => { turnRef.current = next; setTurn(next); }, []); /** Keeps the corner where paper can reach: the page stays on its spine. */ const reach = useCallback( (p: Pt, corner: Pt) => { const { w, h } = size; const spineSame = { x: w, y: corner.y }; const spineOther = { x: w, y: corner.y === 0 ? h : 0 }; return within(within(p, spineSame, w), spineOther, Math.hypot(w, h)); }, [size] ); const cornerFor = (dir: 1 | -1, y: number): Pt => ({ x: dir === 1 ? 2 * size.w : 0, y: y < size.h / 2 ? 0 : size.h, }); /** Runs the corner from where it is to `to`, lifting it on the way over. */ const run = (from: Turn, to: Pt, complete: boolean) => { stop(); const start = from.at; const lift = complete ? size.h * 0.14 * (from.corner.y === 0 ? 1 : -1) : 0; committingRef.current = complete; if (complete) { setHeading(spread + from.dir); } playingRef.current = true; animRef.current = animate(0, 1, { ...(complete ? TURN : SETTLE), onUpdate: (t) => { const p = lerp(start, to, t); setAt({ ...from, at: { x: p.x, y: p.y + Math.sin(Math.PI * t) * lift }, }); }, onComplete: () => { playingRef.current = false; committingRef.current = false; setAt(null); setHeading(null); if (complete) { setSpread((s) => { const next = s + from.dir; onSpreadChangeRef.current?.(next); return next; }); } }, }); }; const canTurn = (dir: 1 | -1) => dir === 1 ? spread < spreads - 1 : spread > 0; const go = (dir: 1 | -1) => { if (!(canTurn(dir) && size.w) || committingRef.current) { return; } if (reduceMotion) { setSpread((s) => s + dir); onSpreadChangeRef.current?.(spread + dir); return; } const corner = cornerFor(dir, size.h); run( { dir, corner, at: { x: corner.x - dir * 1, y: corner.y - 1 } }, { x: corner.x - dir * 2 * size.w, y: corner.y }, true ); }; const local = (event: PointerEvent): Pt => { const rect = bookRef.current?.getBoundingClientRect(); return rect ? { x: event.clientX - rect.left, y: event.clientY - rect.top } : { x: 0, y: 0 }; }; const onPointerDown = (event: PointerEvent) => { if ( event.button !== 0 || !size.w || reduceMotion || committingRef.current ) { return; } const p = local(event); // On one page, its left edge goes back and the rest turns forward. const backZone = single && p.x < size.w * 1.3; const dir: 1 | -1 = p.x >= size.w && !backZone ? 1 : -1; if (!canTurn(dir)) { return; } stop(); event.currentTarget.setPointerCapture(event.pointerId); pressRef.current = { start: p, dragging: false }; if (single && dir === -1) { pressRef.current = { start: p, dragging: false, back: true }; return; } const current = turnRef.current; const corner = current?.dir === dir ? current.corner : cornerFor(dir, p.y); setAt({ dir, corner, at: current?.dir === dir ? current.at : corner }); }; /** A corner near the pointer lifts a little, inviting the turn. */ const peek = (p: Pt) => { const dir: 1 | -1 = p.x >= size.w ? 1 : -1; const corner = cornerFor(dir, p.y); const near = canTurn(dir) && len(sub(p, corner)) < PEEK_ZONE; const current = turnRef.current; if (!near) { if (current) { run(current, current.corner, false); } return; } stop(); const toward = sub(p, corner); const l = Math.max(1, len(toward)); const lift = Math.min(PEEK_MAX, l * 0.6 + 14); setAt({ dir, corner, at: reach( { x: corner.x + (toward.x / l) * lift, y: corner.y + (toward.y / l) * lift, }, corner ), }); }; const onPointerMove = (event: PointerEvent) => { const p = local(event); const press = pressRef.current; const current = turnRef.current; if (press?.back) { press.dragging ||= len(sub(p, press.start)) >= DRAG_SLOP; return; } if (press && current) { if (!press.dragging && len(sub(p, press.start)) < DRAG_SLOP) { return; } press.dragging = true; setAt({ ...current, at: reach(p, current.corner) }); return; } if (event.pointerType === "mouse" && !playingRef.current) { peek(p); } }; const onPointerUp = () => { const press = pressRef.current; const current = turnRef.current; pressRef.current = null; if (press?.back) { if (!press.dragging) { go(-1); } return; } if (!current) { return; } // A tap turns the page; a drag turns it once the corner crosses the spine. const crossed = current.dir === 1 ? current.at.x < size.w : current.at.x > size.w; const complete = press?.dragging ? crossed : true; run( current, complete ? { x: current.corner.x - current.dir * 2 * size.w, y: current.corner.y, } : current.corner, complete ); }; const onPointerLeave = () => { const current = turnRef.current; if (!pressRef.current && current && !playingRef.current) { run(current, current.corner, false); } }; const onKeyDown = (event: KeyboardEvent) => { if (event.key === "ArrowRight" || event.key === "ArrowLeft") { event.preventDefault(); go(event.key === "ArrowRight" ? 1 : -1); } }; const fold = turn && size.w ? foldStyles(turn, size.w, size.h) : null; const { left, right, turning, back } = single ? onePage(pages, spread, turn?.dir) : twoPages(pages, spread, turn?.dir); // A closed book sits centered: the cover alone, or the back alone. const shift = single ? 0 : centerShift(twoPages(pages, heading ?? spread)); const first = single ? spread + 1 : Math.max(1, 2 * spread); const last = single ? spread + 1 : Math.min(pages.length, 2 * spread + 1); return (

{left !== undefined && {left}} {right !== undefined && {right}} {turn && fold && turning !== undefined && ( {turning} )} {turn && !fold && turning !== undefined && ( {turning} )} {turn && fold && back !== undefined && back !== HIDDEN && ( // The shadow sits on a wrapper: a clip on the same element would cut it off.

{back}

)}

go(-1)} onKeyDown={onKeyDown} > {first === last ? `${first}` : `${first}–${last}`} of {pages.length} go(1)} onKeyDown={onKeyDown} >

); } function Paper({ side, back = false, style, children, }: { side: "left" | "right"; back?: boolean; style?: CSSProperties; children: ReactNode; }) { return (

{/* The back of a page reads the right way round once it's folded over. */}

{children}

{/* The gutter: paper curving into the spine. */}

); } function NavButton({ children, label, disabled, onClick, onKeyDown, }: { children: ReactNode; label: string; disabled: boolean; onClick: () => void; onKeyDown: (event: KeyboardEvent) => void; }) { return ( ); } /* Demo: a restaurant's spring menu. Sizes are in cqw so a page scales whole. */ interface Dish { name: string; note: string; price: string; } function Course({ title, dishes, page, }: { title: string; dishes: Dish[]; page: number; }) { return (

{title}

{dish.name} {dish.price}

{dish.note}

{page}

); } const DEFAULT_PAGES: ReactNode[] = [

Maison Céleste

Spring menu

Turn the corner

Welcome

Everything on this menu comes from farms within a morning's drive. It changes when the market does, so ask what came in today.

Lunch: Tue–Sat, 12:00–14:30
Dinner: Tue–Sat, 19:00–22:30
Chef: Camille Arnaud

, , , , , ,

Merci

14 rue des Vignes, Lyon
Book at maisonceleste.fr

, ];

Page Flip

On this page