AI Vault

Overview

AI Vault is a directory for AI tools, sites, and prompt systems. You file entries into collections, browse by category, or search the whole catalog. New tools go in through an admin panel. It runs on Supabase with a localStorage fallback, and the interface is dark and animation-heavy.

The Problem

New AI tools land every week, and the directories listing them read like spreadsheets. I wanted something closer to a media library: cover art, real metadata, collections you keep.

My Role

Designed and built the platform solo. UI architecture, Supabase schema, Zustand state, the animation layers in Framer Motion and GSAP, the Spline and Three.js scenes, and the admin panel.

Key Features

• —Browse page with a filterable grid of AI tools: category, type, and tags
• —Prompt database, a searchable library of reusable prompt systems with metadata
• —Collections 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 in Spline and Three.js driving hero backgrounds and card effects
• —Grain gradient and mesh gradient shaders for ambient backgrounds
• —Framer Motion and GSAP ScrollTrigger for scroll-driven section reveals
• —Desktop-first layout that holds up down to phone widths

Challenges

Balancing visual ambition against performance. Heavy animation layers, 3D scenes, and WebGL shaders turn scrolling to mush on weaker hardware. I wrote a performance detection utility that drops the expensive effects on lower-end devices and leaves the layout intact.

What I Learned

Next time I'd set the performance budget before writing the animation layer, not after the scroll started stuttering. Bolting on the low-fidelity mode only worked because animation and data were already separate.