Capsule

Memories, locked in 3D, revealed in time

Capsule is a collaborative web application where users create digital time capsules — containers for photos, messages, and media — that are locked until a chosen date in the future. When the date arrives, the capsule becomes available, and its contents are revealed through an immersive 3D gallery experience.

The concept was inspired by Japanese gachapon machines: the physical act of turning a dial, receiving a capsule, and opening it to discover what's inside. That sense of anticipation and reveal — the delight of something arriving exactly when expected — shaped both the interaction design and the 3D visual language of the app.

Designing around the moment of reveal

UI and user flows were designed in Figma before any code was written. The core design challenge was building around a specific emotional arc: creation (adding memories to a capsule), anticipation (waiting for the unlock date), and reveal (opening the capsule when the time comes).

Each phase needed a distinct visual and interaction design:

• Creation flow — clean, form-driven interface for uploading media and writing messages. Designed to feel lightweight and quick, so the emotional weight goes into the content itself, not the interface.
• Gallery / waiting state — a 3D scene where locked capsules float and rotate. Capsules have distinct visual appearances based on their contents and creator. Locked capsules feel tactile but inaccessible.
• Reveal — the moment a capsule unlocks, an animation plays: the capsule opens, its contents spill out into the gallery. Designed to feel like a gift being unwrapped.

3D capsule models were modeled in Blender with multiple capsule variants (round, hexagonal, cylindrical) and material treatments that hint at the content type inside.

Full-stack with 3D at the center

The frontend is built with React and React Three Fiber — a React renderer for Three.js that makes 3D scenes composable with React's component model. This made it straightforward to connect the 3D gallery to real application state: capsules fetched from the database appear in the 3D scene, click events on 3D objects trigger application logic.

The backend is a Node.js API connected to MongoDB for data persistence. User accounts, capsule metadata, unlock dates, and contributor lists are all stored in MongoDB. Media files (photos, videos) are stored in AWS S3 with pre-signed URLs for secure upload and retrieval — keeping large binary assets out of the database.

Key technical challenges:

• Date-gated content — capsule content is encrypted at rest and only served after the unlock date passes, verified server-side on every request.
• Collaborative access — multiple users can contribute to a single capsule before it locks. Managing permissions and notifications required careful API design.
• 3D performance — loading multiple 3D models in a browser gallery requires careful asset optimization. GLTF models were compressed and LOD (level of detail) logic was implemented to maintain smooth performance as the gallery fills.

When design and code reinforce each other

Capsule was one of the most satisfying projects because the design and technical work were genuinely inseparable. The 3D reveal animation only works because of how the data model is structured. The anticipation of waiting for an unlock date only lands emotionally because the UI doesn't reveal the capsule contents early. Every technical decision had a design implication, and every design decision had a technical cost.

Working across Figma, Blender, React, and AWS S3 in a single project reinforced that building end-to-end products requires being fluent across the full stack — not just at the layer you're most comfortable in.