Tyler's Books is a digital bookshelf that showcases books I've read, curated with a blend of nostalgia and interactive design. This project brings a playful yet modern touch to book collection displays, combining motion effects, animations, and fun interactions.
demo-2.mov
Press play to watch the demo.
- 📖 Interactive Bookshelf – Books appear dynamically, with animated stacking effects.
- 🔥 Matchbox Interaction – Strike a match to light a candle, revealing a special background.
- 🎨 Retro Aesthetic – Inspired by old-school UI elements with a nostalgic design.
- 🎵 Ambient Sound Effects – Clicks, flickers, and chimes enhance the experience.
- 🌈 Themed Backgrounds – Watch the background shift as you interact.
- 📜 Personal Book Notes – Some books come with personal reflections.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Style: Restyle hover book snippet info
- UX: Remove hover info on the selected book
- Animation: books should drop in from top of screen and land on bookshelf
- Feature: Implement scroll on shelf image to move the book case up and show the about page
- Bug: animation when book is selected is weird
- Feature: catalog card flip onClick
- Feature: mobile friendly- stack books vertically
- Bug: mobile responsiveness
- Bug: about section does not transition smoothly
- Improvement: scroll books on grab and pull
- Feature: add audio/ sound effects
- Soothing background music
- sound effects on:
- books moving (shuffling)
- buttons clicked
- ui buttons to display the two buttons (on and off switch for each)
- Update: fix modal