Capsule

Memories, locked in 3D, revealed in time

Capsule is a collaborative web app where users create digital time capsules, containers for photos, messages, and media, locked until a chosen date. When the date arrives, the capsule opens and its contents are revealed through an immersive 3D gallery.

The concept was inspired by Japanese gachapon machines: turning a dial, receiving a capsule, opening it to discover what's inside. That anticipation-and-reveal shaped both the interaction design and the 3D visual language.

Designing around the moment of reveal

The UI and flows were designed in Figma first, built around a specific emotional arc (creation, anticipation, reveal), each phase with its own visual and interaction language.

• Creation: a clean, form-driven flow for uploading media and writing messages; lightweight, so the weight goes into the content.
• Waiting: a 3D gallery where locked capsules float and rotate, tactile but inaccessible, their look hinting at the contents inside.
• Reveal: on unlock, an animation plays: the capsule opens and its contents spill into the gallery, like a gift being unwrapped.

Full-stack, with 3D at the center

The front end is React + React Three Fiber (a React renderer for Three.js), so the 3D gallery is composable with app state: capsules fetched from the database appear in the scene, and clicks on 3D objects trigger app logic. The back end is a Node.js API over MongoDB, with media in AWS S3 via pre-signed URLs to keep large binaries out of the database.

• Date-gated content: capsule contents are encrypted at rest and only served after the unlock date, verified server-side on every request.
• Collaborative access: multiple contributors per capsule before it locks, which meant careful permission and notification design.
• 3D performance: GLTF compression + level-of-detail logic keep the gallery smooth as it fills with models.

When design and code reinforce each other

Because I owned both the Figma and the React Three Fiber build, design decisions and technical constraints could push on each other in real time: the reveal animation was designed knowing exactly what the runtime could afford, and vice versa. That tight loop is where the project felt most like my own.