Trust, not hype
The Vault is Sourceful Energy's first financial product. Users deposit stablecoins and earn yield that is actually paid for by the economics of commercial battery assets on European grids. It is a serious proposition for a serious audience.
That framing decided the design problem. The fundamental challenge was trust. Every decision, visual, technical, and editorial, had to reduce friction and build confidence, not just look good.
Rather than a conventional landing page with a form, I built the Vault as a scroll-driven 3D narrative. The page itself performs the product: capital flows into assets, assets do work on the grid, yield comes back out. You can feel it before you read it.
Make the infrastructure legible without making it loud.
A retro-futuristic system
The visual language leans retro-futuristic. Monospace type, scan lines, film grain, and a HUD overlay styled like a system monitor. It borrows from mission control, trading terminals, and the editorial detail of the wider Sourceful design system, without pretending to be any of them.
I built a full theming engine so the same narrative reads in three distinct moods. Deep space is the default, all ink, paper and accent. Synthwave takes the same geometry and pushes it hot. Nature desaturates and grounds it. Shader uniforms, post-processing, type tokens, all thread through one theme surface.
3
Themes
1
Scroll-bound scene
Next
App router + RSC
R3F
Three.js + shaders
Engineering the narrative
The experience runs on Next.js with React Three Fiber, custom post-processing shaders, and a scroll-bound animation system on top of Lenis. Every section is a camera beat. Every beat is a shader state. The copy and the scene advance together so a user never has to choose between reading and watching.
- Next.js
- React Three Fiber
- Three.js
- Lenis
- GLSL
- Framer Motion
- Tailwind
- Vercel
Performance was non-negotiable. A 3D experience that stutters or drops frames actively undermines the trust you are trying to build. I budgeted frame cost per section, stripped the shader graph down to what earns its place, and used GPU instancing for the swarms of particles that represent capital, energy and yield. Route-level code splitting keeps the first paint lean.
A voice, literally
To narrate the product we cloned our CEO's voice and lip-synced it onto an avatar using Hedra. It sits inside the HUD as a calm, consistent guide. Not a mascot, not a gimmick, a signal that a real person stands behind the numbers. It was also a useful proof that AI-generated assets can hold a brand voice when they are directed with the same rigour as live-action.
Mobile as a first-class constraint
Mobile was the hardest surface. The narrative had to survive on a phone held in one hand with patchy network, without asking users to watch a five-minute film. I rebuilt each beat as a vertical composition with simplified geometry, lower-resolution render targets, and a conditional fallback track for reduced-motion preferences.
01 / Deep space / HUD
02 / Deep space / hub
03 / Deep space / pulsar
04 / Deep space / nebula
05 / Deep space / earth
06 / Deep space / galaxy
07 / Deep space / vaults
08 / Deep space / waitlist
09 / Deep space / register
10 / Synthwave / planet
11 / Synthwave / property
12 / Synthwave / storage
What shipped
Live
vault.sourceful.energy
1
Engineer / designer
0
Agencies
AI
As peer, not vendor
One person can design, build, write, and ship a production financial product surface, with AI as a peer rather than a vendor. The Vault is the proof. The next case studies in this series are the working methods behind it.