Inspiration Engine

A reading list you can swipe, grid, or physically walk through in a 3D gallery.

React 18 TypeScript Vite React Three Fiber IndexedDB Microlink API

The problem

Saved articles pile up. Read-later apps solve the storage problem but none of them solve the re-encounter problem — surfacing the right article at the right time, or making the act of browsing your own backlog feel rewarding rather than guilty.

The approach

Three views over the same library. The swipe carousel is triage: one article at a time, swipe right to keep, left to hide, tap to open. The grid is the classic dense browse for when you already know what you’re looking for. The 3D gallery is the experimental mode — a room you walk through with the article cards arranged in space, built with React Three Fiber.

Inspiration Engine swipe carousel with a single article card front and center

Importing pulls a CSV of URLs and runs each one through Microlink to fetch title, description, and hero image. Everything lands in IndexedDB, so the whole library is instant to load and fully offline.

Inspiration Engine 3D spatial gallery with article cards floating in a room

How it works

React 18 + Vite for the core app. IndexedDB via a thin wrapper holds the articles, tags, and interaction history. The 3D gallery uses React Three Fiber with Drei helpers — cards are planes with the hero image as texture, arranged in a grid-in-space, with pointer-lock controls for walkthrough mode. Microlink handles metadata enrichment server-side so the client doesn’t need to scrape.

Results

  • Three viewing modes over one library — triage, grid, and spatial 3D
  • IndexedDB-first — works fully offline after the initial import
  • Pointer-lock 3D walkthrough turns a reading list into an ambient space