A screenshot saved to Downloads. A wooden bookshelf with a lamp and a plant. What if your book collection felt like this? Not a spreadsheet, not a database. A room you could walk into.
Three weeks later. 114 books catalogued. Categories, ratings, a proper header. Still a long scroll, but now it felt like browsing a real shelf.
The table pile concept was there from night one. Books scattered on a warm cream surface. Draggable. Rating determined size. But no flip, no shake, no vortex. Those came later.
289 covers on a warm canvas. Rating determines size (5-star = 130px, 1-star = 78px). Seeded random layout: same session, same arrangement. New visit, fresh scatter.
CSS 3D card flip with perspective: 600px and a spring cubic-bezier. Back face shows title, author, rating dots, and one-line summary. Auto-unflips after 4 seconds.
Press ~ to shake. Books spring to new random positions with staggered delays and a bouncy cubic-bezier(0.34, 1.56, 0.64, 1).
Vortex: Books spiral inward through 3 full rotations, shrinking to 0.3 scale.
Explode: Books fly outward from centre with spin and spring-back.
20 colour-coded category pills. Matched books spring into alignment with a terracotta glow. Unmatched fade to 12% opacity with greyscale.
Default 5-degree Y-rotation gives depth. ::after pseudo-element renders a 6px spine. Cursor position updates shadow CSS variables on every frame. Full dark mode via localStorage + system preference auto-detect.
Tap 5 books, generate a 1200x630 shareable PNG via html2canvas. Positions encoded as base64 in the URL for shareable arrangements.
Every cover checked by hand. ISBNs audited. Colours verified. Thumbnails regenerated. No detail too small when you are building something you actually use.
From a screenshot of a wooden bookshelf to 289 books with flip, shake, vortex, dark mode, 3D spines, and drag-and-drop curation. One month. Zero frameworks.