Initial problem
I wanted to show what a growing total looks like as a stack of real bills. Each confirmed payment needed to update the same tower for everyone watching, from close-up bill animations to comparisons with large landmarks.
Implementation
Stripe handles checkout, and verified payment events update the total in Convex. The Three.js scene adds bills to the stack as those updates arrive. I built the bills and landmarks in Blender and added camera views for comparing their heights. The renderer uses WebGPU where available, with a WebGL fallback.
Outcome
- Each confirmed dollar adds a bill to the tower for everyone watching
- Landmark comparisons show how high the total would stack in real bills
My contribution
- Designed the concept, visual experience, camera behavior, and contribution flow
- Built the 3D scene, asset pipeline, rendering effects, and responsive interface
- Connected Stripe payment events to Convex and the live tower state
Impact
- Each confirmed dollar adds a bill to the tower for everyone watching
- Landmark comparisons show how high the total would stack in real bills
What mattered
01
A growing tower whose height follows the thickness of real dollar bills
02
Live shared state driven by payment events and Convex subscriptions
03
Camera views comparing the stack with familiar objects and landmarks
04
Stripe checkout without leaving the tower view
05
Custom Blender assets, animated bill landings, and browser-based 3D rendering
Insights
The Statue of Liberty view compares the tower height with the 93-metre landmark
Technical frame
Technical frame
The technical frame sits at the end on purpose: it shows the engineering substance behind the solution.
Next.jsTypeScriptThree.jsWebGPUConvexStripeBlender
Next project
AgentPlan
Stable links for agent-generated HTML.
View project