"use client"; import { useEffect, useId, useRef, useState, useSyncExternalStore, } from "react"; import { flushSync } from "react-dom"; import { animate, motion, useMotionValue, useTransform, type AnimationPlaybackControls, type MotionValue, } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; type Flight = { key: number; day: number; y: number; rotate: number; opacity: number; velocity: number; spin: number; }; // Dragged up this far, the page tears; a flick does it sooner (px/s). const TEAR_DISTANCE = 80; const FLICK = 500; // How far up a previous page waits to be pulled back down: the binding's // height, so it starts tucked entirely under the binding and slides out. const REATTACH = 32; // The top page lifts this much under a hovering mouse: a hint it moves. const HOVER_LIFT = -4; // Pulling down this far brings the previous page most of the way back. const PULL_RANGE = 90; // A page leans as it is torn, like one ripped from its right-hand corner. const LEAN = 0.05; const MAX_LEAN = 8; const SNAP_BACK = { type: "spring", stiffness: 520, damping: 34 } as const; const REATTACH_SPRING = { type: "spring", stiffness: 420, damping: 34, } as const; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const MS_PER_DAY = 86_400_000; // Dates travel as "YYYY-MM-DD", like , and are counted // in whole UTC days so daylight saving never skips or doubles a page. const toDay = (iso: string) => { const [y, m, d] = iso.split("-").map(Number); return Date.UTC(y, m - 1, d) / MS_PER_DAY; }; const toIso = (day: number) => new Date(day * MS_PER_DAY).toISOString().slice(0, 10); const utc = { timeZone: "UTC" } as const; const fullDate = new Intl.DateTimeFormat("en-GB", { ...utc, weekday: "long", day: "numeric", month: "long", year: "numeric", }); const weekday = new Intl.DateTimeFormat("en-GB", { ...utc, weekday: "long" }); const monthYear = new Intl.DateTimeFormat("en-GB", { ...utc, month: "long", year: "numeric", }); const relative = new Intl.RelativeTimeFormat("en-GB", { numeric: "auto" }); function describeDay(day: number) { const date = new Date(day * MS_PER_DAY); return { full: fullDate.format(date), weekday: weekday.format(date), month: monthYear.format(date), number: date.getUTCDate(), sunday: date.getUTCDay() === 0, }; } // 5 to 12deg of extra lean as it flies: enough to read as torn by hand. function rollSpin() { return 5 + Math.random() * 7; } function relativeTo(day: number, today: number) { const text = relative.format(day - today, "day"); return text[0].toUpperCase() + text.slice(1); } export function TearOffCalendar({ value, onChange, today, className, }: { value: string; onChange: (value: string) => void; // Also "YYYY-MM-DD"; drives the relative label and the Today button. today: string; className?: string; }) { const reduceMotion = useReducedMotion(); const hintId = useId(); const day = toDay(value); const todayDay = toDay(today); const [flights, setFlights] = useState([]); const flightKey = useRef(0); const running = useRef([]); const drag = useRef<{ id: number; y: number } | null>(null); // The top page: its lift when torn, and its fade when reattaching. const y = useMotionValue(0); const attach = useMotionValue(1); const rotate = useTransform(y, (v) => Math.max(v * LEAN, -MAX_LEAN)); // The previous page, pulled down from above: 0 is away, 1 is in place. const pull = useMotionValue(0); const ghostY = useTransform(pull, (p) => -(1 - p) * REATTACH); const ghostRotate = useTransform(pull, (p) => -(1 - p) * 3); // Lifted, the top page rides over the binding; at rest it sits under // the page being pulled back down. const topZ = useTransform(y, (v): number => (v < 0 ? 3 : 0)); // Paper is opaque: the page turns solid almost as soon as it moves, so // the two days never show through each other. const ghostOpacity = useTransform(pull, (p) => Math.min(1, p * 6)); // The raw finger travel, for release velocity. const travel = useMotionValue(0); useEffect(() => { const list = running; return () => list.current.forEach((c) => c.stop()); }, []); const stopAll = () => { running.current.forEach((c) => c.stop()); running.current = []; }; const tearTo = (target: number, velocity = 0) => { stopAll(); const flight: Flight = { key: flightKey.current++, day, y: y.get(), rotate: rotate.get(), opacity: attach.get(), velocity, // Rolled per tear, so no two pages leave the same way. spin: rollSpin(), }; // The next page is shown at once and the torn one flies off as a copy, // so the next tear never waits on the last. flushSync(() => { onChange(toIso(target)); if (!reduceMotion) setFlights((list) => [...list, flight]); }); y.jump(0); attach.jump(1); pull.jump(0); }; const reattachTo = (target: number, from = 0) => { stopAll(); flushSync(() => onChange(toIso(target))); pull.jump(0); if (reduceMotion) { y.jump(0); attach.jump(0); running.current = [animate(attach, 1, { duration: 0.15 })]; return; } // Picks up exactly where the pulled-down page was. y.jump(-(1 - from) * REATTACH); attach.jump(from); running.current = [ animate(y, 0, REATTACH_SPRING), animate(attach, 1, { duration: 0.18, ease: EASE_OUT }), ]; }; const goTo = (target: number) => { if (target > day) tearTo(target, -400); else if (target < day) reattachTo(target); }; const release = (e: React.PointerEvent) => { if (drag.current?.id !== e.pointerId) return; drag.current = null; const distance = travel.get(); const velocity = travel.getVelocity(); if (distance < 0) { if (-distance > TEAR_DISTANCE || velocity < -FLICK) { tearTo(day + 1, Math.min(velocity, 0)); } else { running.current = [animate(y, 0, { ...SNAP_BACK, velocity })]; } } else if (distance > 0) { if (pull.get() > 0.5 || velocity > FLICK) { reattachTo(day - 1, pull.get()); } else { running.current = [animate(pull, 0, SNAP_BACK)]; } } }; const shown = describeDay(day); return ( // Clips sideways only: a torn page swinging out must never widen the // page, but it may fly up freely.

{/* Page thickness under the pad: a year of days still to go. */}

{/* The binding. Above the pages, so a page pulled back down slides out from under it; torn pages fly over it. */}

{/* Two brass rivets: the binding's hardware, a physical metal, the same in both themes. */}

{ const step: Record = { ArrowUp: 1, ArrowRight: 1, ArrowDown: -1, ArrowLeft: -1, }; if (e.key in step) goTo(day + step[e.key]); else if (e.key === "Home") goTo(todayDay); else return; e.preventDefault(); }} onPointerDown={(e) => { if (drag.current || e.button !== 0) return; e.currentTarget.setPointerCapture(e.pointerId); stopAll(); drag.current = { id: e.pointerId, y: e.clientY - travelFrom() }; travel.jump(travelFrom()); }} onPointerMove={(e) => { const d = drag.current; if (!d || d.id !== e.pointerId) return; const distance = e.clientY - d.y; travel.set(distance); if (distance <= 0) { y.set(distance); pull.set(0); } else { y.set(0); // Eases in, so the page never quite snaps into place early. pull.set(1 - Math.exp(-distance / PULL_RANGE)); } }} onPointerUp={release} onPointerCancel={release} onPointerEnter={(e) => { if (e.pointerType !== "mouse" || drag.current || reduceMotion) return; stopAll(); running.current = [animate(y, HOVER_LIFT, SNAP_BACK)]; }} onPointerLeave={(e) => { if (e.pointerType !== "mouse" || drag.current || y.get() >= 0) return; stopAll(); running.current = [animate(y, 0, SNAP_BACK)]; }} > {/* Tomorrow, waiting underneath. */} {/* Yesterday, only there while you pull it back down. */} {flights.map((flight) => ( setFlights((list) => list.filter((f) => f.key !== flight.key)) } /> ))}

Arrow keys change the day, Home returns to today. Drag the page up for the next day, down for the previous one.

{shown.full}

{relativeTo(day, todayDay)}

goTo(day - 1)}> goTo(day + 1)}>

); // A grab while the page is still springing back continues from where it // visibly is, instead of jumping under the finger. function travelFrom() { if (y.get() < 0) return y.get(); const p = pull.get(); return p > 0 ? -PULL_RANGE * Math.log(1 - Math.min(p, 0.99)) : 0; } } function Page({ day, y, rotate, opacity, raised, torn, className, z, }: { z?: MotionValue; day: number; y?: MotionValue; rotate?: MotionValue; opacity?: MotionValue; raised?: boolean; torn?: boolean; className?: string; }) { const d = describeDay(day); return (

{/* The perforation it tears along, just under the binding. */} {!torn && ( )} {d.month} {d.number} {d.weekday}

); } function FlyingPage({ flight, onGone, className, }: { flight: Flight; onGone: () => void; className?: string; }) { const y = useMotionValue(flight.y); const rotate = useMotionValue(flight.rotate); const opacity = useMotionValue(flight.opacity); const gone = useRef(onGone); useEffect(() => { gone.current = onGone; }); useEffect(() => { // Keeps the speed the hand tore it at, leans on as it goes, and is // faded well before it clears the pad. An exit nothing waits on. const all = [ animate(y, flight.y - 200, { type: "spring", stiffness: 220, damping: 30, velocity: flight.velocity, }), animate(rotate, flight.rotate - flight.spin, { duration: 0.4, ease: EASE_OUT, }), animate(opacity, 0, { duration: 0.22, delay: 0.08, ease: EASE_OUT }), ]; all[2].then(() => gone.current()); return () => all.forEach((c) => c.stop()); }, [flight, y, rotate, opacity]); return ( ); } function IconButton({ label, onClick, children, }: { label: string; onClick: () => void; children: React.ReactNode; }) { return ( ); } // Server and first client render agree on a fixed date; the real local day // takes over right after hydration, so the markup never mismatches. const FALLBACK = "2026-09-23"; const noSubscribe = () => () => {}; function localToday() { const now = new Date(); const pad = (n: number) => String(n).padStart(2, "0"); return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`; } export default function TearOffCalendarDemo() { const today = useSyncExternalStore(noSubscribe, localToday, () => FALLBACK); // Stored as days from today, so the page follows once the real date loads. const [offset, setOffset] = useState(0); const value = toIso(toDay(today) + offset); return ( setOffset(toDay(next) - toDay(today))} /> ); }