import React, { useState, useRef, useEffect, useMemo } from 'react'; import { motion, useScroll, useTransform } from 'framer-motion'; import { Search, ShoppingBag, ArrowRight, BookOpen, Feather, Moon, PenLine, Heart, Waves, Layers, Compass, Radio } from 'lucide-react'; const PAGE_EDGE = { backgroundImage: 'repeating-linear-gradient(to bottom, #c9bd9c 0px, #c9bd9c 1px, #f2ecdd 1px, #f2ecdd 3px)' }; const BOOKS = [ { id: 1, title: 'The Weight of Small Rooms', author: 'Mira Okonkwo-Lindqvist', genre: 'Literary Fiction', price: 24, blurb: 'A daughter returns to the apartment she grew up in, and finds every room smaller than memory promised.', big: true, icon: Feather }, { id: 2, title: 'Low Tide Almanac', author: 'Sena Holt', genre: 'Poetry', price: 18, blurb: 'Forty short poems, one per tide, written over four years on the Maine coast.', icon: Moon }, { id: 3, title: 'The Quiet After Midnight', author: 'Priya Anand', genre: 'Thriller', price: 27, blurb: 'A night-shift radio host starts taking calls from a number disconnected two years ago.', big: true, icon: Search }, { id: 4, title: 'Field Notes on Leaving', author: 'Tomas Reyes', genre: 'Essays', price: 22, blurb: 'Twelve essays on the small, specific griefs of moving away from a place that raised you.', icon: PenLine }, { id: 5, title: 'Everything We Almost Said', author: 'Junko Whitfield', genre: 'Romance', price: 19, blurb: 'Two letters, twenty years apart, and the ordinary life that got written in between.', icon: Heart }, { id: 6, title: 'A Shorter History of Rivers', author: 'D. Okafor', genre: 'Nonfiction', price: 29, blurb: 'How seven rivers shaped the cities built beside them, told without a single equation.', icon: Waves }, { id: 7, title: 'Glass Houses, Paper Walls', author: 'Lena Marchetti', genre: 'Fiction', price: 23, blurb: 'A family renovation uncovers letters that rewrite everything the youngest daughter thought she knew.', big: true, icon: Layers }, { id: 8, title: "The Cartographer's Daughter", author: 'Wren Abioye', genre: 'Fantasy', price: 26, blurb: "She inherits her mother's unfinished map of a country that isn't supposed to exist.", icon: Compass }, { id: 9, title: 'Static and Other Silences', author: 'Kofi Baptiste', genre: 'Poetry', price: 17, blurb: 'A collection built around the pauses in old family recordings.', icon: Radio }, ]; function useReducedMotionPref() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); setReduced(mq.matches); const handler = (e) => setReduced(e.matches); if (mq.addEventListener) mq.addEventListener('change', handler); else mq.addListener(handler); return () => { if (mq.removeEventListener) mq.removeEventListener('change', handler); else mq.removeListener(handler); }; }, []); return reduced; } function Nav() { return (

Folio

); } // A dense, non-specific wall of book spines — the "many books" payoff at the // bottom of the zoom. Heights/tones are seeded so they're stable across re-renders. function BookWall() { const spines = useMemo(() => { return Array.from({ length: 140 }).map((_, i) => { const seed = ((i + 1) * 9301 + 49297) % 233280; const rand = seed / 233280; const seed2 = ((i + 1) * 4573 + 12345) % 233280; const rand2 = seed2 / 233280; const tone = 26 + Math.floor(rand2 * 30); const emerald = rand > 0.88; return { h: 55 + rand * 42, color: emerald ? 'rgba(16,185,129,0.4)' : `rgb(${tone},${tone + 1},${tone})`, }; }); }, []); return (

{spines.map((s, i) => (

))}

); } function Hero({ opened, onOpen, reduceMotion }) { const zoomRef = useRef(null); const zoomOn = opened && !reduceMotion; const { scrollYProgress } = useScroll({ target: zoomRef, offset: ['start start', 'end end'] }); const bookScale = useTransform(scrollYProgress, [0, 1], [1, 48]); const bookOpacity = useTransform(scrollYProgress, [0, 0.55, 0.8], [1, 1, 0]); const wallOpacity = useTransform(scrollYProgress, [0.3, 0.65], [0, 1]); const wallScale = useTransform(scrollYProgress, [0.3, 1], [0.7, 1.3]); const introFade = useTransform(scrollYProgress, [0, 0.1], [1, 0]); return (

{zoomOn && ( )}

An independent bookstore

A library,
reimagined.

Nine new arrivals, hand-picked this week. Open the book to walk in.

{!opened ? ( ) : zoomOn ? ( Keep scrolling ↓ ) : null}

); } function BookCard({ book }) { const Icon = book.icon; return (

{Icon && } {book.genre}

{book.title}

{book.author}

{/* spine, left edge */}

{/* page edge, right edge — reads as a stack of paper */}

{book.blurb}

${book.price}

); } function LibraryGrid() { return (

The inner library

New this week

{BOOKS.length} titles

{BOOKS.map((b) => )}

); } function StaffPick() { return (

Staff pick of the week

"I sold eleven copies of this by hand-selling it to people who swore they didn't read poetry anymore."

Low Tide Almanac

— recommended by Dae-Hyun, floor manager

); } function Stats() { const stats = [ { value: '38,412', label: 'titles on the shelf right now' }, { value: '14 yrs', label: 'hand-selling since 2011' }, { value: '100%', label: 'recommendations from actual humans' }, ]; return (

{stats.map((s) => (

{s.value}

{s.label}

))}

); } function Newsletter() { const [email, setEmail] = useState(''); const [submitted, setSubmitted] = useState(false); function handleSubmit(e) { e.preventDefault(); if (!email) return; setSubmitted(true); } return (

One good book, every month.

Join the shelf list — no spam, just what we're actually reading.

{submitted ? (

You're on the list. See you next month.

) : ( )}

); } function Footer() { return ( ); } export default function App() { const [opened, setOpened] = useState(false); const reduceMotion = useReducedMotionPref(); return (

); }

A library, reimagined.

{book.title}

New this week

One good book, every month.

A library,
reimagined.