/
漏 2026 RiffOn. All rights reserved.
  1. Dive Club 馃た
  2. Xavier Jack - How To Vibe Code in 3D
Xavier Jack - How To Vibe Code in 3D

Xavier Jack - How To Vibe Code in 3D

Dive Club 馃た 路 Jan 26, 2026

Xavier Jack reveals the 3D 'vibe coding' process behind viral web experiences, blending tools like Blender and 3JS for true game feel.

Isolate and Prototype Complex Animations in a Separate Repo to De-Risk Development

When working on a complex website, de-risk the development of new, intricate features by building them in a completely separate repository. Use "gray boxing" to nail the feel and get approval on the isolated prototype before attempting to integrate it into the main, complex codebase.

Xavier Jack - How To Vibe Code in 3D thumbnail

Xavier Jack - How To Vibe Code in 3D

Dive Club 馃た路24 days ago

A Strong, Non-Technical Concept Is the Foundation for Viral Web Experiences

The viral Amy website originated from a simple, powerful vision: visualizing a full day of product use with scrolling gradients. This core concept, established before any design or code, was the key to its success, proving that a strong narrative can be more impactful than micro-interactions.

Xavier Jack - How To Vibe Code in 3D thumbnail

Xavier Jack - How To Vibe Code in 3D

Dive Club 馃た路24 days ago

Impractical, Viral Launch Websites Are Strategic Tools to "Make Noise"

An unconventional, animation-heavy launch website, like Amy's, serves a specific strategic purpose: capturing attention and putting the product on the map. Even if it's later replaced by a more conversion-focused design, the initial "noise" and brand recognition it generates can be invaluable for a new company.

Xavier Jack - How To Vibe Code in 3D thumbnail

Xavier Jack - How To Vibe Code in 3D

Dive Club 馃た路24 days ago

Prioritize High-Fidelity Motion Early, Even with Low-Fidelity Content

Reverse the traditional design process by focusing on the "liveliness" of a site from the outset. While visuals and copy can remain low-fidelity placeholders, investing in high-fidelity transitions and motion early on establishes the core interactive feel, which is often the most crucial part of the user experience.

Xavier Jack - How To Vibe Code in 3D thumbnail

Xavier Jack - How To Vibe Code in 3D

Dive Club 馃た路24 days ago

Creative 3D Web Development Involves a Messy Loop Between Multiple Tools

The process for creating innovative 3D web experiences isn't linear. It's a constant, messy jump between specialized software: ideating and modeling in a 3D tool like Blender, creating static compositions in a design tool like Sketch, and then bringing it all to life with code.

Xavier Jack - How To Vibe Code in 3D thumbnail

Xavier Jack - How To Vibe Code in 3D

Dive Club 馃た路24 days ago

Even Well-Explored Creative Concepts Must Be Cut If They Distract Users

The creative process involves the painful decision to discard good ideas. An interesting scrollbar concept for the Amy website was fully explored but ultimately scrapped because it risked taking too much attention away from the main product. This highlights the importance of ruthless focus on the primary user goal.

Xavier Jack - How To Vibe Code in 3D thumbnail

Xavier Jack - How To Vibe Code in 3D

Dive Club 馃た路24 days ago

Use Game Dev "Gray Boxing" to Prototype Web Interactions in Code First

Instead of starting in Figma, prototype complex web animations using "gray boxing," a technique from game development. By using basic shapes and code (like HTML/CSS/3JS) to define the core flow and feel, you can validate the interaction's energy before investing in detailed visuals.

Xavier Jack - How To Vibe Code in 3D thumbnail

Xavier Jack - How To Vibe Code in 3D

Dive Club 馃た路24 days ago

Adapt Game Dev Physics like "Wiggle Bones" for Signature Web Interactions

Elevate web interactions beyond standard animations by adapting real-time physics techniques from game development. Using libraries like "Wiggle Bones," designers can create dynamic, responsive objects (like the Amy balloons) that feel alive, providing a signature "fidget toy" experience that canned animations can't replicate.

Xavier Jack - How To Vibe Code in 3D thumbnail

Xavier Jack - How To Vibe Code in 3D

Dive Club 馃た路24 days ago