My Books Are Invisible and I Want Them Back

There used to be a thing that happened when someone came to your house. They'd drift over to your bookshelf. They'd tilt their head sideways to read the spines. And then the conversation would start. "Oh, you read Gödel, Escher, Bach?" or "Wait, you have the whole Dresden Files?" or just a long knowing look when they spotted the Ursula Le Guin.

Your bookshelf was a social artifact. It was a portrait of your mind sitting right there in the room.

I've read over 200 books in the last decade. You'd never know it walking into my house. They live on my Kindle. A few more on Audible. The physical shelves have some old favorites and a lot of decorative objects I don't know what to do with. The library I've actually built is invisible.

I wanted to fix that.

The Idea

The premise is simple. Project a digital bookshelf onto a wall. Real wooden shelves with book spines. Your actual books. Tap one and the cover pops up. Leave it running as an ambient display when people come over and let the conversation start the way it used to.

I built it with Claude. One conversation, no prior codebase, starting from scratch. If you want to play with it check out [https://briantarbox.com/bookshelf_display.html]

Step One: The Shelf Itself

The first decision was display style. I wanted realistic wooden shelves, not a flat grid of covers. I wanted it to look like something you'd actually hang on a wall. Claude built it as a single self-contained HTML file. No server. No database. No dependencies to install. Just open it in a browser, go fullscreen, and you have a bookshelf.

The wood grain is CSS. The ambient candlelight glow is CSS. The little flickering flame on the candle between the books is a CSS animation. There's a small plant. There are bookends. It looks like a real shelf.

Book spines have colors derived from the title using a hash function, so the same book always gets the same color. Not random on every reload. The title and author are rendered vertically, the way a real spine reads.

Step Two: Real Books

The default shelf ships with sample titles. I needed my actual library in there.

Goodreads makes this easy. Go to My Books, scroll to Import and Export, click Export Library, download the CSV. It has every book you've ever shelved, with title, author, and ISBN.

I uploaded the CSV to Claude. It parsed all 234 books, formatted them correctly, and baked them directly into the HTML file. The list lives as a JavaScript array in the file itself. My books, my shelf.

Anyone can do this with their own library. Upload your Goodreads export, tell Claude to substitute it for the sample books, done. The whole thing takes about two minutes.

Step Three: Cover Art

Clicking a spine should show the front cover. That meant fetching cover images from somewhere.

This turned out to be the most iterative part of the build. The first version used Open Library exclusively. It found nothing. Not because Open Library is bad, but because the sandbox Claude runs in can't reach external APIs. The browser can, but the testing environment can't. The silent failures looked like the code working fine.

We switched to Google Books as the primary source. Better coverage, no API key needed, handles CORS cleanly. But about half the books still came back with no cover.

The fix was a four-step waterfall:

1. Google Books by ISBN (most precise, uses the ISBN13 from the Goodreads CSV)
2. Google Books by cleaned title and author
3. Open Library by ISBN
4. Open Library by title search

Step two includes a small but important detail. A lot of my books have series information in the title field from Goodreads. Things like "Cold Days (The Dresden Files, #14)". That parenthetical confuses search APIs. The code strips it before querying. That alone recovered a lot of missing covers.

After that, we added a background prefetch thread. When the page loads, it quietly works through all 234 books three at a time, runs the full waterfall for each one, and caches the result. By the time you tap a book it was prefetched a few seconds ago. The cover is already in browser memory. It appears instantly.

Step Four: The Layout

Four rows of books fit on screen but 234 books across four rows means about 59 per row. The spines were getting cramped.

The solution was horizontal scrolling. One long continuous shelf you drag left and right. Click and drag on a laptop. Swipe on a touchscreen. The whole library is there, sorted alphabetically by author, just like a real bookshelf. A subtle hint at the bottom fades out once you start scrolling.

What It's Made Of

Everything is in one HTML file. The CSS. The JavaScript. The book list. The cover fetching logic. The drag-to-scroll behavior. All of it.

The file is not small. It has 234 book objects with titles, authors, and ISBNs. It has a four-step cover fetching waterfall with error handling at each step. It has a prefetch cache and a concurrency-limited background runner. It has a modal with a spinner and a styled fallback card for when no cover is found. It has drag-to-scroll with touch support.

And it runs fine as a local file in any browser. No build step. No npm install. No deployment. Open it, fullscreen it, project it.

Making It Yours

The book list in the HTML is my library. But the file is just a file.

If you want your own version, export your Goodreads library as a CSV, upload it to Claude (or your favorite AI) and ask it to build the bookshelf. The whole process takes a few minutes and is a learning journey on its own.

Don't use Goodreads? A plain list of titles works too. Use the Edit Book List panel built into the shelf itself. One book per line, Title | Author format. Hit Update Shelf.

The Bigger Point

This project is a good example of what iterative AI-assisted building actually feels like. We didn't spec it out up front. We started with the visual, got the shelf looking right, then added books, then added covers, then discovered the covers weren't working, diagnosed why, fixed the strategy, added prefetching, rethought the layout, added scrolling.

Each step was a conversation. Some steps took one exchange. The cover waterfall took four or five as we worked out what was actually failing and why.

The final artifact is a real piece of software. It has error handling. It has a caching layer. It has graceful fallbacks. It does something genuinely useful.

And when someone comes to my house now, there's a bookshelf on the wall again.

The conversation can start.