Airbooks

Turn any PDF into a 3D book you can flip with gestures, read in immersive environments, and write on a vintage typewriter.

Comment

AirBooks

Turn any PDF into a 3D book. Read in immersive environments. Write on a vintage typewriter.

Inspiration

I love reading. But reading on a screen never felt like reading. It felt like scrolling a document. No weight in your hands, no pages turning, no sense of place.

I kept thinking — what if digital reading felt physical? What if opening a book on your phone felt like sitting in a quiet forest with a real book in your lap? What if the act of writing felt like pressing keys on a typewriter, hearing each letter hit paper?

That's where AirBooks came from. Not from a business plan — from a feeling I wanted to recreate.

What it does

AirBooks transforms how people interact with books digitally.

  • Upload any PDF and it becomes a 3D book with real page-flip physics — swipe or use hand gestures to turn pages
  • Read in immersive environments — choose from 8 handcrafted 3D worlds (forest, ocean, sunset, arctic, cabin, library, night sky, sakura garden) that surround you while you read
  • Write on a 3D typewriter — a full vintage typewriter with animated keys, mechanical click sounds, and paper that scrolls as you type
  • Design custom book covers — upload images, drag to reposition, scale, rotate — and see changes live on the 3D book model
  • Share books with anyone via a single link
  • Gesture-controlled page flips — wave your hand to turn pages, no buttons needed
  • Ambient sounds per environment — forest birds, ocean waves, crackling fire

The entire experience feels like a place you go to read, not a screen you stare at.

How we built it

Built entirely in Figma Make with:

  • React + TypeScript — app architecture and state management
  • Three.js — all 3D rendering (book models, environments, typewriter, lighting)
  • GSAP — fan carousel animations with elastic easing
  • Framer Motion — UI transitions and micro-interactions
  • Supabase — authentication, book storage, PDF cloud uploads, sharing
  • Web Audio API — typewriter sounds, page turn effects, ambient audio
  • MediaPipe — hand gesture tracking for page flips
  • Tailwind CSS v4 — responsive styling with custom design system

The 3D book model uses ExtrudeGeometry with rounded shapes, PBR materials, and gold foil decorative frames. Each ambient environment is a complete Three.js scene with unique geometry (trees, coral, ice crystals, fireplace), custom lighting rigs, and particle systems.

Challenges we ran into

Three.js inside Figma Make's runtime. The Figma Make editor injects its own React instance, which crashes react-three-fiber's reconciler. We had to build the entire 3D layer with vanilla Three.js instead — no R3F, no Drei, everything from scratch.

Making 8 distinct 3D environments performant. Each environment has its own geometry, materials, and particle system. We solved this with environment groups that toggle visibility — only one renders at a time, with smooth transitions between them.

The typewriter key-to-sound timing. Getting the mechanical click to feel synchronized with the key press animation required careful Web Audio scheduling — the impact sound fires at press start, the resonance at press bottom, and the spring-back at release.

Cover image clipping in 3D space. Canvas textures on ExtrudeGeometry don't clip natively. We had to use ctx.clip() with proper aspect-ratio scaling to keep images within the book face boundaries.

Accomplishments that we're proud of

  • The reading experience genuinely feels different. Multiple testers said they forgot they were on a screen. The ambient environments and page physics create a sense of place that flat readers don't have.

  • The typewriter is satisfying to use. People type things they don't need to type just because the key animations and sounds feel good. That's the right kind of unnecessary.

  • Everything is one product. Reading, writing, designing, sharing — it all flows together. You write on the typewriter, design the cover, pick your reading world, and share the book. No context switching.

  • Built and shipped in under a month using Figma Make as the primary development environment.

What we learned

  1. 3D doesn't need to be gimmicky. When the 3D serves the experience (page weight, environment immersion, typewriter tactility), people connect with it. When it's decoration, they ignore it.

  2. Sound changes everything. Adding typewriter clicks and ambient forest sounds transformed the app from "cool 3D demo" to "place I want to spend time." Audio is the most underrated UX layer.

  3. Figma Make is surprisingly powerful. Building a full Three.js application with multiple 3D scenes, GSAP animations, and Supabase integration — all inside Figma Make — was not something we expected to work. It did.

  4. Ship the feeling first, polish the features later. The first version that made someone smile was just a book with page-flip physics in a forest. Everything else grew from that one moment.

What's next for AirBooks

  • AI Read-Aloud — text-to-speech that reads your book to you with natural pacing, matched to the ambient environment (calm voice in the forest, warm voice in the cabin)
  • Ambient music generation — AI-composed background music that adapts to the reading environment and book genre
  • Collaborative bookshelves — share a library with friends, see what they're reading, leave margin notes
  • EPUB and audiobook support — not just PDFs
  • Mobile-native gestures — pinch to zoom pages, tilt to peek at the next page
  • Community environments — let users design and share their own reading worlds
  • Offline mode — download books and environments for reading without internet

The vision is simple: make digital reading feel as good as the real thing. We're not there yet. But after a month of building, we're closer than we expected.

Try it: https://core-eject-35447046.figma.site

Video: https://youtube.com/playlist?list=PLMjgslpWZYAoBDNPkvqmQa_p3GMIrJwBe&si=X9SsseActPrqJcAi

Built With

  • figmamake
  • novus
Share this project:

Updates