Visor – Your Personal AI Finance Application
Visor — AI that grows your wealth quietly
Visor is a personal-finance product with an AI copilot at its center. Designed and built the landing page that has to sell it: the video hero, the live-feeling product cards, the animation, the footer. The goal was never a feature list. It was a feeling, money software you actually want to open, that treats your finances as something calm instead of something on fire.
quiet by design
Roles
Product Design · Design Engineer · Motion Design
Tools
React · TypeScript · Vite · Tailwind CSS · Framer Motion
Category
SaaS / Fintech
The Tension
Every finance app looks like a cockpit, and that's exactly the problem. Dense dashboards, alarm-red numbers, tickers that never sit still. You open it to check one thing and leave more anxious than when you arrived. The default approach confuses "serious about money" with "loud about money." On a normal Tuesday, a person just wants to know they're okay – and the whole category answers that quiet question by shouting.
a cockpit you didn't ask for
The Decision
I didn't start with the dashboard. I started with how it should feel to open it. That meant subtracting the thing the category leans on hardest: urgency. No blaring red, no wall of charts fighting for the hero, no ticker theatre. One black canvas, one soft green accent, one type pairing – Inter Tight doing the work, Instrument Serif italic carrying the promise. Everything that didn't make money feel calmer got cut.
The System
The parts that carry it:
Hero – an ambient video, a single tilting story card, a marquee of the names people trust.
Cash flow – a glass overview panel with figures that resolve as you arrive.
Your AI copilot – a rotating question-and-answer card, a predictive chart, an auto-sorting tree.
Feature cards – horizontal, alternating, one idea each.
Footer – a warm, quiet sign-off with the wordmark as a whole horizon.
The rules that hold it together: one accent color, one serif for emphasis and never for body, glass over photography, and motion that only reveals – in-view fades, a count-up, one 3D card – never motion that demands.
Kill list: no alarm red, no dashboard clutter in the hero, no stock-ticker urgency, no purple gradients, no mascot, no second accent.
The Sections

Your AI copilot – Ask about your money in plain English and get a real answer back, plus a forecast that flags rising spend before it happens. The intelligence is the point; it just never acts anxious about it.

Cash Flow
Cash flow – Income, investing, and spending in one monthly view, with the balance counting up as you land on it. You read your month in a glance, not a spreadsheet.
The Impact
Shipped as a complete, production-quality front end: five composed sections plus footer, a self-hosted video hero, HLS-free playback, real component architecture, and choreographed reveal animations that hold together at speed. It reads as one system — every screen sounds like the same brand talking. A full hero-to-footer site built to a portfolio standard, with a second hero composition versioned alongside the first (confirm which ships live).
The Takeaway
Calm is the feature. Trust is the brand.

Footer
1 like · 17 views · Jul 29, 2026
Designed and built Visor, an AI personal-finance app turning messy spending into clear insight, dashboards, budgets, and data viz in Figma & Next.js.

