AI Vault

Overview

AI Vault is a premium discovery platform for AI tools, websites, and prompt systems — think Netflix or Jellyfin, but for AI products. Every item carries rich metadata, can be organized into personal collections, and is displayed in a dark futuristic interface built for immersion and speed. Users can browse by category, search the full catalog, manage collections, and submit new tools through an admin panel.

The Problem

AI tools multiply daily but there is no great way to discover, organize, or compare them visually. Generic directories feel like spreadsheets. The goal was an interface that makes AI tools feel like high-value digital artifacts — something you actually enjoy exploring rather than just querying.

My Role

Designed and built the entire platform solo — UI architecture, Supabase schema, Zustand state management, all animation layers (Framer Motion + GSAP + ScrollTrigger), 3D scene integration with Spline and Three.js, and the admin/edit panel.

Key Features

• —Browse page with filterable grid of AI tools — filter by category, type, and tags
• —Prompt database — searchable library of reusable prompt systems with metadata
• —Collections — personal curation lists with full CRUD and drag-to-organize
• —Item detail modal with rich metadata, tags, external links, and cover imagery
• —Admin panel for adding and editing vault entries
• —Supabase PostgreSQL backend with localStorage fallback for offline use
• —3D scenes with Spline and Three.js — animated hero backgrounds and card effects
• —Grain gradient and mesh gradient shaders for cinematic ambient backgrounds
• —Framer Motion + GSAP ScrollTrigger for scroll-driven section reveals and card animations
• —Fully responsive — desktop-first but functional across all screen sizes

Challenges

Balancing visual ambition with performance. Heavy animation layers, 3D scenes, and WebGL shaders can easily degrade to janky scrolling. I implemented a performance detection utility that degrades gracefully on lower-end devices — disabling expensive effects while keeping the layout intact.

What I Learned

Visual ambition without a performance budget is just lag. The most important architectural decision was separating the animation layer from the data layer early — it made it easy to swap between high-fidelity and low-fidelity modes without touching component logic.