Ostra CeramicsCollection Studio Visit

Thrown, glazed and fired by hand.

See the autumn collection

), }, { name: "Slip", note: "Clay red and custard, round shapes, typewriter labels", cloth: "#3F7FD9", foil: "#F6F4EF", ribbon: "#F6F4EF", spread: (

(studio + shop)

os
tra

Join a class

{[["Wheel night", "Thu"], ["Glaze day", "Sat"], ["Open shelf", "Sun"]].map(([a, b]) => (

{a}{b}

))}

), }, ]; // The visible half of a spread: `side` picks the left or the right page of the same drawing. function Page({ side, children }: { side: "left" | "right"; children: ReactNode }) { const left = side === "left"; return (

{children}

{/* the page swells up from the fore-edge and dives into the gutter */}

); } // One cloth-covered board seen from the inside, with the block of page edges along its outer side. function Board({ side, cloth, children }: { side: "left" | "right"; cloth: string; children: ReactNode }) { const left = side === "left"; return (

{children}

); } // The front edge of a board and its pages, which the camera sees because it looks down the table at an angle. function Lip({ cloth, deep }: { cloth: string; deep: number }) { return (

); } function Book({ book, index, closed, lifted, reduce, flat, onPick }: { book: (typeof books)[number]; index: number; closed: boolean; lifted: boolean; reduce: boolean; flat: boolean; onPick: () => void }) { const target = useMotionValue(closed ? 1 : 0); const fold = useSpring(target, { stiffness: 62, damping: 13.5, mass: 1 }); const lift = useSpring(0, { stiffness: 140, damping: 16 }); useEffect(() => { target.set(closed ? 1 : 0); if (reduce) fold.jump(closed ? 1 : 0); }, [closed, reduce, fold, target]); useEffect(() => { if (reduce) lift.jump(lifted ? 1 : 0); else lift.set(lifted ? 1 : 0); }, [lifted, reduce, lift]); const rot = useTransform(fold, (v) => v * 180); const innerShade = useTransform(fold, (v) => Math.sin(Math.min(Math.max(v, 0), 0.5) * Math.PI) * 0.5); const outerShade = useTransform(fold, (v) => Math.max(0, Math.sin(Math.min(Math.max(v, 0.5), 1) * Math.PI)) * 0.55); const shiftX = useTransform(fold, (v) => -v * (HALF / 2)); // a closed book is half as wide, so it slides back to its own centre const z = useTransform(lift, (v) => v * 22); const scale = useTransform(lift, (v) => 1 + v * 0.035); const shadow = useTransform(lift, (v) => `${14 + v * 16}px ${20 + v * 26}px ${30 + v * 30}px -${10 + v * 4}px rgba(66,48,20,${0.4 - v * 0.08}), 3px 5px 8px rgba(66,48,20,0.22)`); const leafShadow = useTransform(fold, (v) => `${14 * (1 - v)}px ${20 * (1 - v)}px ${30 * (1 - v)}px -10px rgba(66,48,20,${0.4 * (1 - v)}), 3px 5px 8px rgba(66,48,20,${0.22 * (1 - v)})`); const stamp = { color: book.foil, textShadow: book.foil === "#1B1D22" ? "0 1px 0 rgba(255,255,255,0.35)" : "0 -1px 0 rgba(0,0,0,0.35), 0 0 6px rgba(255,255,255,0.12)" }; return ( {/* the back board with the right-hand pages: this half never moves */} {book.spread} {/* the ribbon marker, sewn in at the head and trailing out of the tail */}

{/* the front board with the left-hand pages: it swings over on the spine to close the book */} {book.spread} {/* its outside: bookcloth with a blind-stamped frame and a foil title */}

Design no. {index + 1}

{book.name}

); } export default function ThreeClothBoundSampleBooks() { const reduce = !!useReducedMotion(); const rootRef = useRef(null); const [chosen, setChosen] = useState(null); // null means all three lie open for comparison const [width, setWidth] = useState(1100); const pausedUntil = useRef(0); const step = useRef(0); useEffect(() => { const el = rootRef.current; if (!el) return; const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width)); ro.observe(el); return () => ro.disconnect(); }, []); // Self-running demo: all open, pick one, all open, pick the next. useEffect(() => { if (reduce) return; let seen = true; const io = new IntersectionObserver(([e]) => { seen = e.isIntersecting; }); if (rootRef.current) io.observe(rootRef.current); const order = [1, null, 0, null, 2, null]; const id = window.setInterval(() => { if (!seen || document.hidden || Date.now() < pausedUntil.current) return; setChosen(order[step.current % order.length]); step.current += 1; }, HOLD); return () => { window.clearInterval(id); io.disconnect(); }; }, [reduce]); const pick = (k: number | null) => { pausedUntil.current = Date.now() + 9000; setChosen(k); }; const onKey = (e: ReactKeyboardEvent, i: number) => { const n = books.length; let to = -1; if (e.key === "ArrowRight" || e.key === "ArrowDown") to = (i + 1) % n; else if (e.key === "ArrowLeft" || e.key === "ArrowUp") to = (i + n - 1) % n; else if (e.key === "Home") to = 0; else if (e.key === "End") to = n - 1; if (to < 0) return; e.preventDefault(); pick(to); const group = e.currentTarget.parentElement; window.requestAnimationFrame(() => (group?.children[to] as HTMLElement | undefined)?.focus()); }; const column = width < 760; // phones: the books lie one above the other, seen from straight overhead const gap = column ? 26 : 34; const s = column ? Math.min(1.05, (width - 40) / (HALF * 2)) : Math.min(1.02, (width - 96 - gap * 2) / (HALF * 6)); const tableW = column ? HALF * 2 : HALF * 6 + gap * 2; const SLIP = 78; // room at the head of the table for the typed brief const tableH = SLIP + (column ? (BH + THICK) * 3 + gap * 2 + 40 : BH + THICK + 40); const tilt = column ? 0 : 27; const stageH = Math.round(tableH * s * (column ? 1 : 0.93) + (column ? 50 : 150)); return (

Three sample books, each holding a different design of the same website

{/* the brief: one typed sentence on a slip of paper, held by a blue pin */}

{books.map((b, i) => ( pick(i)} /> ))}

{books.map((b, i) => ( ))}

{chosen === null ? "Three designs of the same site, open for comparison" : books[chosen].note}

); } ```