Use Fable 5 for 3D Websites Before It's Gone

Was Sie brauchen

• Access to Claude with Fable 5 (any AI model works, but I recommend Fable 5 or Kimi K3 for interfaces)

• The prompt from the video description

• A browser to open the generated website

Schritt für Schritt

1. 1

   Pick a model that is good at interfaces

   0:09

   Open Claude and select Fable 5. You can do this with any AI model, but I recommend Fable 5 or Kimi K3 because they are the best at creating user interfaces.

   ClaudeKopieren

   https://claude.ai

2. 2

   Build real 3D, not a video

   0:25

   Skip the video generator approach. A generated video only gives the impression of 3D and cannot be interactive. Aim for 3D inside the website: a small world you can add things to, remove things from, and make react when someone clicks.

3. 3

   Know the five building blocks

   1:20

   Every 3D website has five parts: - World: where things are located - Objects: what you put in the world - Lights: for example a headlight or ambient light - Camera: the type of camera you choose - Engine: the 3D simulation

   Fable 5 handles most of this automatically.

4. 4

   Paste the build prompt

   2:23

   Paste the prompt below into Claude and send it. Use it as is, or get creative and change the sections, the morphing shapes or the message.

   3D website promptKopieren

   Hey Claude, please create a 3D animated website using WebGL, Three.js, and anything else you might need. I want it to be a stop-scrolling website with particle effects. There must be five sections, from 1 to 5. The numbers 1 to 5 should morph in shape as we move down progressively. The website should explain that creating a 3D website using AI is extremely simple and that you don’t even need a video generator.

5. 5

   Understand the two key words in the prompt

   3:10

   WebGL is the part of the browser that renders 3D elements, particle effects and 2D simulations. Three.js is a framework used for 3D. Naming both tells the model to build real browser 3D.

   Three.jsKopieren

   https://threejs.org

   WebGL docsKopieren

   https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

6. 6

   Switch to medium effort if servers are overloaded

   3:51

   If Fable 5 is overloaded, change it to the medium setting and run again. I got a result I call extremely nice even on medium effort.

7. 7

   Check the result and ask for interactivity

   4:06

   Open the website and scroll: particles should morph into the next number at each section. This is real 3D in your browser that you can change and modify. Ask Claude to make it interactive, or to add effects to pictures of your shop or products.

8. 8

   Try a bigger single-prompt project

   4:42

   Push further with one prompt. I built a clickable solar system simulation where I can change planets and go to the moon. Combine this kind of experience with your business website instead of a flat 2D page.

Als Nächstes ansehen

• 5:22Build a 3D Learning Game with Claude Fable 5Try a bigger single-prompt project: an interactive 3D solar system app built by Fable 5.
• 5:13Stop Wasting Your Fable 5 TokensKeep Fable 5 on design work and send heavy tasks to cheaper models so your allowance lasts.