RelicVault

RelicVault is a spatial digital archive designed to preserve the physical memories and personal stories of items left behind during relocation.

Comment

Inspiration

Relocation is always more than just moving boxes—it’s about leaving behind parts of your life. When preparing to move, many physical objects—heavy grandfather photo albums, old clocks, handwritten journals—are simply too big, fragile, or impractical to pack. Handing those items over or leaving them behind feels like letting go of the memories attached to them. I created RelicVault to give our most cherished left-behind physical objects a permanent digital sanctuary.

What it does

RelicVault is an interactive spatial memory archive designed to digitize physical heirlooms:

  • Spatial Memory Canvas: A freeform 2D workspace where users can drag, organize, and position memories visually.
  • Room-based Filtering: Categorize items by their original room location (Living Room, Bedroom, Attic, Storage).
  • Multi-page Book Reader: Flip through scanned photo albums page-by-page with custom captions.
  • Vault PIN Encryption: Lock private journals and personal notes behind a 4-digit PIN code to keep memories safe.

How we built it

  • Frontend Framework: Built with Next.js (React) and TypeScript for speed and strong type safety.
  • Styling & UI: Styled using Tailwind CSS for a dark, warm, museum-like UI aesthetic with Lucide React icons.
  • Animations & Spatial UI: Powered by Framer Motion for smooth drag-and-drop physics and modal transitions.

Challenges we ran into

  • Browser Autofill Interference: Yandex Browser and Chrome repeatedly tried to force password-saving popups over our custom 4-digit PIN unlock modal. We had to optimize field types, input modes, and layout layers (z-index) to ensure smooth pin entry without browser overlays blocking buttons.
  • Z-Index Management: Ensuring dragged items dynamically stack on top of each other without overlapping UI controls or modals.

Accomplishments that we're proud of

  • Creating a warm, tactile digital environment that feels like a personal vault rather than a cold cloud storage drive.
  • Implementing a fully interactive multi-page book reader seamlessly integrated into the spatial canvas.
  • Successfully solving UX edge cases with browser autofill conflicts.

What we learned

  • Deepened expertise in managing complex dynamic states and drag-and-drop mechanics in Framer Motion.
  • Learned how browsers handle password manager detection and how to properly build non-intrusive PIN security inputs.

What's next for RelicVault

  • 3D Room View: Upgrade from a 2D spatial canvas to interactive 3D WebGL rooms.
  • Audio Stories: Allow users to record and attach short voice clips to preserved items.
  • Cloud Sync & Export: Multi-device synchronization and exporting memories into a high-res printable PDF book.

Built With

Share this project:

Updates