LegacyVault

• 

  homescreen

• 

  form create vault

• 

  input mail heir

• 

  Processing

• 

  Found many vault at email

Inspiration

The inspiration for LegacyVault originated from a staggering statistic where millions of Bitcoins and billions of dollars in digital assets are estimated to be lost forever simply because owners passed away without sharing their private keys.

Existing solutions often feel cold, sterile, and purely functional. I wanted to build a solution that bridged the gap between strict security and human connection. My vision was to create a Vintage and Old but Gold aesthetic. I wanted a digital experience that feels as tangible and trustworthy as a physical bank vault from the 1920s yet is powered by modern cryptography.

This paradox of creating a classic atmosphere using bleeding edge technology while solving the critical problem of digital inheritance was the spark that ignited this project.

What it does

LegacyVault is a secure and vintage inspired web application that simulates the lifecycle of a digital vault. It addresses the crisis of digital asset loss by allowing users to encrypt their secrets and generate cryptographic shares that can be distributed to trusted beneficiaries.

Instead of relying on a single password, LegacyVault utilizes a split key system. A user creates a vault, and the system generates secure shares. The vault remains locked until the required number of shares are combined to reconstruct the key.

Crucially, LegacyVault is built on a Zero Knowledge Architecture. Encryption occurs entirely within the browser. The data stored in our database is fully encrypted. This ensures that I, as the developer, can never access or read user data. Privacy is not merely a policy but is mathematically enforced.

How we built it

The project was constructed using the latest web technologies to ensure performance, security, and a refined user experience.

Frontend Engineering We utilized Next.js 16 with the App Router and React 19 to build a cutting edge and responsive interface.

Visual Design and Styling We employed Tailwind CSS 4 to craft the Matte Gold and Antique Steel aesthetic. This included custom textures and refined typography using Merriweather and Inter to establish trust.

Motion and Interactivity Cinematic vault interactions were achieved using Framer Motion. This allowed us to implement slides, fades, and glows that mimic the heavy feel of a physical vault.

Data Persistence We integrated Firebase Firestore to store encrypted data blobs and vault metadata securely.

Cryptography and Logic The core security logic implements Shamir Secret Sharing via the secrets.js grempe library. This handles the splitting and reconstruction of keys entirely on the client side.

The Mathematical Model To ensure a Zero Knowledge system, we do not store the raw decryption key. Instead, we split it using a threshold scheme.

Let ( S ) be the secret key. We divide ( S ) into ( n ) pieces such that ( k ) pieces are required to reconstruct ( S ).

$$ S \rightarrow (x_1, y_1), (x_2, y_2), \dots, (x_n, y_n) $$

Where any combination of ( k ) points can reconstruct the polynomial and reveal the secret, but possessing fewer than ( k ) points reveals absolutely nothing.

Challenges we ran into

The Trustless Implementation The most significant challenge was proving to the user that we cannot see their data. Building a standard CRUD application is straightforward, but creating an application where the server is blind required moving all encryption logic to the client side. We had to ensure that the encryption logic ran strictly in the browser so that plain text never touched our API.

Balancing Aesthetics with Performance We aimed for a heavy and metallic high fidelity look without compromising load times. Using Tailwind CSS 4 helped us manage complex styles efficiently. However, fine tuning the animations to feel heavy like a real vault door while maintaining a high frame rate was a meticulous task.

Accomplishments that we're proud of

I am particularly proud of the Zero Knowledge implementation. Successfully engineering a system where the database holds the encrypted data but remains mathematically incapable of solving it without the user keys was a major technical victory.

Additionally, the design stands out. Merging the Old but Gold vintage art direction with a modern stack like Next.js 16 resulted in a unique user experience that distinguishes itself from typical and sterile security dashboards.

What we learned

Building LegacyVault taught me that Security is an architectural choice rather than a feature. One cannot simply add Zero Knowledge at the end. The entire data flow must be designed around it from the very first day.

I also learned the power of Visual Storytelling. Security applications do not have to be boring. By using textures, motion, and typography, we can build trust and make the user feel like their data is sitting inside a physical and unbreakable steel vault.

What's next for LegacyVault

The journey continues as I plan to expand LegacyVault with the following features.

Multi Beneficiary Consensus I intend to extend the user interface to easily manage complex key splits, such as requiring 3 out of 5 trusted individuals to combine their keys.

Decentralized Storage I plan to move the encrypted blobs from Firebase to IPFS or Arweave to ensure the data persists even if the main server becomes unavailable.

Smart Contract Integration The final goal is allowing the vault to hold actual cryptocurrency assets that are released via smart contract triggers rather than just containing text data.

Built With

• crypto
• eslint
• firebase
• framer-motion
• lottie-react
• next.js
• react
• react-icons
• secrets.js-grempe
• supabase
• tailwind
• typescript
• web