Dive Club 🤿 – Xavier Jack: How To Vibe Code in 3D
Host: Ridd
Guest: Xavier Jack
Date: January 26, 2026
Overview
This episode explores the creative and technical process behind building immersive 3D web experiences, focusing on "vibe coding" with Three.js, Blender, and prototyping with code. Host Ridd chats with Xavier Jack—a prolific designer and coder known for the viral Amy website—about translating strong creative concepts into interactive, game-feel-infused web designs. The episode blends philosophical discussions on design philosophy, hands-on workflow advice, and a live technical demo that makes 3D more approachable for today’s designers.
Key Discussion Points & Insights
1. The Genesis of Iconic Web Experiences (00:08–04:14)
- Behind the Viral Amy Website:
- Xavier recounts how experiments with hand tracking shared on Twitter led to a collaboration with Dennis on the Amy website.
- Creative Concept: Visualize a full day using Amy through gradients representing the sky (sunrise, midday, sunset, evening).
- Quote:
"When there's a really strong concept, I think that really ties things together."
— Xavier (01:51) - Strong initial creative directions help anchor the design and interactivity.
2. Design Process & Prototyping Philosophy (03:39–09:53)
- Gray Boxing and Iteration:
- Xavier’s workflow involves rapidly prototyping low-fidelity versions in code (“gray boxing,” a game dev term—03:39), then refining visuals and interactions.
- Uses a mix of tools: Blender for 3D, Sketch for quick visuals, Three.js for web animation and interactivity.
- Code vs. Design Tools:
- Xavier prototypes with code from the start, not worrying about frameworks; prioritizes energy and imagination over polish early.
- Quote:
"For a long time I've been prototyping with code for some really specific things."
— Xavier (03:24)
- Importance of Motion:
- Motion and transitions are prioritized early—even when other aspects are still rough.
- Host’s Observation:
"Movement... that part felt pretty real in my mind. And you were pushing on that and making sure you were nailing down just the liveliness of the site."
— Ridd (09:17)
3. Interactivity & Creative Decisions (09:53–15:48)
- Personal Touch vs. Trend:
- Xavier explains “game feel” as his unique signature but notes that not every project requires it.
- Simpler, minimal sites may be more appropriate as products mature.
- Quote:
"For me, it's almost my language, you know, so it's part of my personal touch."
— Xavier (12:33)
- Balancing Viral Impact vs. Conversion:
- Discusses Amy’s viral launch site vs. the follow-up minimal site:
"That launch website, everybody saw that website... it captured design Twitter and all of tech for a good month."
— Ridd (14:43) - Viral design brings attention; later-stage websites may shift to clarity/conversion as company matures.
- Discusses Amy’s viral launch site vs. the follow-up minimal site:
4. Prototyping, Collaboration, and Signature Interactions (17:26–22:54)
- Showcasing Experiments & Rejected Concepts:
- Many UI and animation ideas are prototyped (“messy process”), some never shipped but might inspire future work or social media buzz.
- Wiggle Bones & Game Feel:
- Open sourced "Wiggle Bones" library to bring natural-motion to 3D objects.
- Amy’s signature balloon interaction was developed using this, drawing on both 3D modeling and code animation techniques.
- Memorable Moment:
"Sometimes I would get stuck playing with it."
— Xavier, on the addictive Amy site balloons (20:44)
5. Live Demo: Vibe Coding a 3D Balloon (24:09–44:36)
- Blender Modeling:
- Steps through importing an SVG logo, scaling, converting to a mesh, remeshing for better sculpting, and adding materials and lighting for a “balloon” effect.
- Uses Scene, Camera, Renderer concepts (Three.js basics).
- Exporting & Using in Three.js:
- Exports models as GLTF/GLB, explains why lights/materials from Blender often need to be recreated in code.
- Host Ridd’s reaction:
"It's definitely making it more approachable... I am totally capable of doing this."
— Ridd (35:28)
- Adding Interactivity—Wiggle Bones:
- Demonstrates how to add an armature in Blender, rig it, and hook up “wiggle bones” code so the 3D balloon jiggles and rotates in response to input.
- Live “one-shot” coding with AI (Cursor): shows designer’s role is transitioning to guiding code agents, given a basic understanding of 3D principles.
- Philosophy:
- Knowing what’s possible and learning the basic "language" of 3D is key—AI and code agents can handle implementation if you can communicate intent.
Notable Quotes & Moments
-
On Prototyping:
"It's just like almost like a sketching process just to get a feeling."
— Xavier (00:22, 05:07) -
On Unique Interactivity:
"I realized the full potential of doing something in 3js is to add a lot of interactivity. Otherwise you might as well just use a video."
— Xavier (09:53) -
On Going Viral:
"A lot of people were like, 'Oh, there was a website before? I just heard of Amy because I saw that website.' So it really puts the product also on the map."
— Xavier (15:23) -
On Company Maturity & Design:
"You grow up and you start hiring an enterprise sales team and you go really predictable and copy forward and enterprise-y. And that's like the natural progression."
— Ridd (15:48) -
On 3D Workflow:
"You have a camera, you have lights, you have materials. So it's different primitives than websites or apps. But once you understand how it works... you need to know what's possible."
— Xavier (23:48) -
On Making 3D Approachable:
"For the first time, it's just feeling so much more attainable for me to learn these different tools... you gave me just a little taste of what's possible."
— Ridd (43:59)
Timestamps for Important Segments
- 00:08–02:21: Origin of the Amy website concept (strong creative direction, gradients, storytelling)
- 03:24–04:14: Code prototyping vs. design tools; starting scrappy for energy
- 05:30–09:53: Sketching interactions, choosing tools, and the personal nature of creative process
- 12:33–15:48: Balancing personal touch with practicality and viral branding impact
- 17:26–20:39: Collaborative jamming, prototype sharing; “wiggle bones” interaction development
- 24:09–29:48: Blender demo: importing/creating/lighting a 3D object
- 32:05–34:53: WebGL vs. Three.js explained
- 38:03–43:29: Adding interactivity, armatures, and AI-assisted coding of 3D effects
Conclusion
Xavier Jack demystifies the creation of playful, high-feel 3D web interactions, sharing both a philosophy rooted in strong conceptual thinking and practical technical workflows. The episode illustrates that with the right mindset—and an openness to tinkering with new tools and leveraging AI—designers today can add breathtaking, interactive layers to their work, differentiating products and experiences in a crowded web landscape.
For more resources and past episodes: dive.club