Works
Process
Services
Articles
A web app that pieces your whole life together in one dashboard
Mosaic is a personal tracking app that brings money, nutrition, workouts, weight, sleep, habits, and journaling into one connected dashboard. Instead of juggling a budgeting app, a calorie counter, and a habit tracker, users see everything side by side, so the patterns between them finally show up.
The name drove the design: every expense, meal, workout, and journal entry is one more piece of a bigger picture. The landing page brings that idea to life with real-time 3D glass tiles that catch light and color as visitors scroll, set against a dark canvas. Inside the app, the same dark palette keeps dense data calm and readable.
A restrained palette of Obsidian Black and Pure White lets the glass artwork supply all the color. Bricolage Grotesque Medium gives headings a bold, modern character, while Caladea Regular adds a warm, editorial feel to body text, fitting for an app about your personal story.
The landing page tells the story before anyone signs up. It opens on a bold “Start Piecing your Life Together” headline framed by floating glass tiles, then names the problem of scattered apps and shows what connecting them reveals: how weight responds to training, how food and mood move together, and where habits really come from. A word-by-word scroll reveal builds toward a final call to action, so the page itself comes together piece by piece.
Mosaic is a full-stack application with real accounts, a live database, and an interactive 3D landing page.
– Next.js, React & TypeScript (Application)
– Supabase (Authentication & Database)
– Three.js & React Three Fiber (3D Graphics)
– GSAP (Animation & Motion)
– Tailwind CSS & shadcn/ui (Interface)
– Recharts (Data Visualization)
– OpenAI (Meal Photo Analysis)
– Vercel (Hosting)
