Fable 5 for 3D Web Design is Next Level!!! (Interactive, Animated!)

Chapter 1: An interactive 3D robot hero element

0:00-4:49. First build of the video: an interactive 3D character that visually follows the visitor's cursor, generated from a single 2D reference image with no manual 3D modeling.

Workflow, as narrated and confirmed on screen:

1. Find a reference image (the creator uses a robot ad image) and open it in Figma.
2. Use Figma's built-in AI image edit ("Edit with prompt", model GPT Image 2) to turn the reference into a front-facing, full-body pose and strip UI/text elements, then request front/left/back/right views in one image.
3. Upload the multi-view image to Tripo3D.ai (studio.tripo3d.ai), which converts multi-view 2D images into a textured 3D mesh.
4. In Tripo3D's rigging tool, select the "v1.0 - Good for Humanoid" AI model (a humanoid rig template) and click Auto Rig to generate a skeleton, then export as GLB (a compact 3D file format).
5. Drop the GLB into Claude Design (claude.ai, Design tab) and prompt it to make the model follow the cursor - Claude writes the interactive web page around the 3D asset directly.

Visual evidence beyond the narration. Several minutes of this chapter's narrated timestamps (uploading the GLB, exporting, dragging it into Claude) actually show a different, recurring example instead: Claude Design autonomously building a full "Your Robots" browser game interface end to end - reading a reference screenshot, self-generating character portrait images, writing the code, and debugging its own CSS/font issues using its own in-app browser tool. This same clip reappears repeatedly through the rest of the video as proof-of-capability B-roll, independent of whatever the narration is describing at that moment.

Chapter 2: A scrolling website with an AI-animated video hero

4:49-9:56ish. Second build: instead of a static hero image, the hero section plays a short AI-generated video animated from a reference photo.

1. Find a reference image on Pinterest and edit it with Figma's GPT Image 2 tool to match a target pose/style ("create the same image as this, the same position of the element... but use this reference image").
2. Upload the edited image to a video-generation tool (Higgsfield.ai, using its Seedance 2 model) along with a short reference video, and prompt it to "animate this image similar to how this video is animated."
3. Download the generated video and hand it to Claude with the instruction to use it as the hero background.
4. Iterate on copy and color in plain English ("make all of the content in this section pure white... make the reserve button pure black").

Chapter 3: A full AI-car-company site, built live in Cursor

10:33-22:13. The video's first ground-up marketing site, built entirely inside Cursor using the Grok 4.5 High Fast model, for a fictional car brand ("AERA", tagline "Autonomy, Engineered" / "Form Follows Intention").

1. Start from a plain prompt describing the company and section count; Cursor's Grok 4.5 model produces a functional but generic first draft.
2. Paste in a motionsites.ai prompt and instruct the model to copy its design system (fonts, structure, styling) while keeping the site's own copy and section order unchanged.
3. Layer in video backgrounds with the CSS mix-blend-mode property set to exclusion, so a video composites naturally over other content without a plain rectangular crop looking pasted-on.
4. Pull additional background imagery from design-inspiration sites (the creator names x.ai, xAI's homepage, as one source) and ask Cursor to apply it directly to a section.
5. Iterate structurally in plain English: remove a redundant section, swap section order, center-align a block, remove default AI-added borders/strokes, add a stat card row, and check the live mobile-responsive preview.
6. Finally, ask Cursor (in Max mode, a higher-effort setting versus the default "High Fast") to build out the site's remaining sub-pages (Model, Experience) using the same established design language.

Chapter 4: A fintech interactive site that avoids "AI slop" (Bolt.new)

22:42-27:49. Built in Bolt.new, this project is framed explicitly as an exercise in avoiding the generic "AI-generated" website look.

The reference point named on screen is a real, viral tweet: designer Wes Bos (@wesbos) posted "the four horsemen of the apocalypse" naming four AI-website tropes (orange/purple gradient backgrounds, extra-wide letter-spaced headlines, glassy gradient cards, generic stock photography) - a tweet with 1.4K reposts and 21K likes at time of capture. The creator's fix is the same one used throughout the video: paste in a motionsites.ai design-system prompt rather than let the model default to its own style.

1. Prompt Bolt.new for a plain "mobile-friendly bank hero section" first, to show the generic baseline result.
2. Layer in a 3D, mouse-reactive card carousel (five rotating bank cards with video-texture faces, metallic chip SVGs, and parallax tilt on hover) as the interactive centerpiece of the hero.
3. Turn on Bolt's "connector shaders" toggle to add hover-triggered shader effects to the cards.

Chapter 5: A masked-video portfolio site ("Prisma")

27:49-31:17. A site design referencing a real Awwwards-featured site, using a still-to-video animation plus a Figma masking trick to make body text appear to sit "behind" a moving video layer.

1. Browse Awwwards for inspiration; the reference cited on screen is 21hrs.space, an Apollo-11-themed scroll site where a giant "MOON" wordmark sits masked behind a lunar-surface image.
2. Find and edit a moon reference image, then animate it in Kling AI with an explicit, constrained prompt: "Animate this. Make it spin. Make the spinning noticeable. Don't change the position or size. Make it looped." Constraining position/size keeps the animated asset alignable with fixed text later.
3. Build the hero in Bolt.new with the animated video at 100% opacity, no overlay.
4. To make the "text behind video" effect: in Figma, draw a rectangle over the headline, then ask the AI to "subtract" it from the shape sitting on top - the resulting negative-space mask, exported as SVG, tells the website AI exactly where to cut the video layer so type appears to sit behind it.

Chapter 6: Figma's own AI tooling, a closer look

31:17-44:47. A dedicated section on features built directly into Figma, demonstrated across several different in-progress client projects (a logistics site for "CargoxGroup," a travel site called "Travel.In," and others), not a single continuous build.

• Native animation ("Animate this"): select any element, click the animation icon, and ask Figma's AI to animate it - Figma generates a preview with an adjustable duration, from simple reveals to parallax-style layered motion.
• Community remix: right-click an element and choose "Find similar designs" to search Figma's community library from that specific visual style; full community files can be opened, and sections copied between unrelated templates to combine ideas (the video's example: a travel site's second section swapped into a different hero).
• Prompt-based photo edit: the same "Edit with prompt" panel from Chapter 1 (GPT Image 2) can do a full day-to-night lighting conversion on a photo.
• Dark Mode Magic: a community plugin that auto-converts a light-themed page to a dark-themed variant in one click.
• Figma Make: Figma's design-to-code feature - point it at a static design and it writes and runs the actual working site, with a model picker exposing several real backends.
• Shader/filter panel ("shatter"): a library of generative visual filters, applicable to images, text, and video layers alike - Pattern refraction, Hatching, Color adjust, Gradient map, Bloom, Warp, Colored edges, Chromatic metal, Bokeh blur, Gooey merge, Pixelate, Dither.

Chapter 7: The flagship build - a scroll-scrubbed animated site (Cursor + Fable 5)

44:47-53:23. The video's final and most technically detailed build: a minimalist "portfolio agency" one-pager whose hero video plays back frame-by-frame tied to scroll position rather than to time (a "scroll-scrubbed" video background), built in Cursor with the Fable 5 model.

1. Search Pinterest for a matching asset concept ("abstract 3D forms hanging with white cable").
2. Generate the actual asset video in Higgsfield.ai (Seedance 2), with a highly specific motion prompt: cable tops stay fixed, bottom ends extend and lengthen while twisting clockwise, camera follows the gold tips, cables shrink and converge into a ball shape.
3. Pull font styles and section styling from a motionsites.ai prompt, as in every prior chapter.
4. Prompt via voice (Cursor's built-in speech-to-text) as well as text throughout the build.
5. Build the hero and second section, then apply the video as a scroll-scrubbed background - a technique the creator flags as important for playback smoothness, and offers an alternative for (converting the video to a JPEG frame sequence instead) if scroll-scrubbing a raw video lags on some devices.
6. Fix opacity and layout issues, then do a final pass swapping in a futuristic display font pulled from another motionsites.ai prompt ("Augmented Sight").

The full technical prompt behind the scroll-scrubbed effect is dense enough to be worth recording verbatim (as captured on screen, condensed): a fixed full-screen video layer sits behind the content at z-0; scroll progress is computed as scrollY / (scrollHeight - innerHeight), smoothed with linear interpolation (lerp) at a 0.12 factor per animation frame; up to 90 frames are pre-extracted from the video into an offscreen canvas frame cache (capped at 960px width) so the visible canvas can draw already-decoded frames instead of scrubbing a live <video> element; a poster image and a live <video> element both serve as fallbacks while the cache is still warming up.

Chapter 8: Growing an audience on Twitter/X to find clients

53:23-58:02. A pivot from tool tutorial to client-acquisition advice. The creator states he grew a Twitter/X account to roughly 66,000 followers over about a year, and that it now supplies about 90% of his clients, versus a YouTube channel he says he has run for four to five years.

The core growth tacticpost finished work at high quality (screen-recorded with a tool like CleanShot or Screen Studio), then tag one larger, relevant account in the post. If the post is good enough, that account may repost or comment, exposing the work to their audience. The explicit caveat: tag only one account per post, never several competing companies together - a competitor will not repost or comment on something that would also advertise a rival, so tagging a group kills the chance any of them engage.

Chapter 9: Packaging scroll-video assets as a digital product

58:02-59:56. A short monetization pitch: turn the scroll-based background videos demonstrated throughout the video into a sellable asset pack, with tiered pricing named on screen - a pack of 20 videos for $9, 40 videos for $19, and 100 videos for $49, sold through a checkout link (Lemon Squeezy is named as one option). The creator frames selling 10 packs a day at the top tier as producing roughly $490/day, which he rounds to "$14,000s a month" (10 x $49 x 30 = $14,700).

Tools and resources

Claims to verify

• Twitter/X follower count (~66,000) and the claim that it supplies ~90% of clients versus a YouTube channel run 4-5 years - self-reported, unverified against any public analytics.
• motionsites.ai's prompt count ("400+ prompts... a thousand very soon") and add-rate (~5/day) - self-reported.
• Figma's paid-plan price ("$20 plan") for the AI features shown - self-reported, and Figma's actual pricing tiers/features change over time; verify current pricing before quoting it to a client.
• The digital-product monetization math ("10 people a day... $14,000s a month") is presented as illustrative, not a demonstrated result; the arithmetic itself checks out (10 x $49 x 30 = $14,700) but the sales-volume assumption (10 buyers/day) is asserted, not evidenced.
• Model names as spoken ("Sonnet 5," "Fable 5," "Grok 4.5," "Gemini Flash") should be cross-checked against each vendor's current model lineup at time of use; AI model names and version numbers change frequently and the video's captured screenshots (Sonnet 5, Fable 5, Grok 4.5 High Fast, and Figma Make's Claude Sonnet 4.6/Claude Opus/Gemini 3 Flash/Gemini 3.1 Pro/GPT-5.5 picker) are the most reliable record of what was actually selected on screen at capture time (2026-08-06).
• "Seedance 2" as the specific Higgsfield video model: confirmed by an on-screen "Feature: Seedance 2" detail tag, but Higgsfield's site banner at capture time was also promoting a newer "Seedance 2.5" - verify which version is current before recommending it.

Glossary

• GLB: a compact binary file format for 3D models (geometry, textures, and rigging in one file), exported from Tripo3D and used to hand a 3D asset to a website builder.
• Auto-rig: a 3D tool feature that automatically generates a movable skeleton ("rig") for a model, so it can be animated or made to react to input like a cursor.
• Humanoid rig: a rig template matching a human-like bone structure (head, arms, legs), used here for the robot figure.
• Mix-blend-mode: a CSS property controlling how an element's colors combine with whatever is behind it; the "exclusion" mode is used repeatedly in this video to let a video composite naturally into a section without a visible rectangular crop.
• Multi-view image: a single image containing several angles (front/left/back/right) of the same subject, used as input for image-to-3D conversion.
• Design system: the reusable visual language of a reference - its fonts, spacing, colors, and layout structure - which the creator repeatedly asks an AI builder to copy from a motionsites.ai prompt while keeping the target site's own content unchanged.
• Scroll-scrubbed video: a video whose visible frame is tied to scroll position instead of to elapsed time, so scrolling up and down "scrubs" the video like a slider.
• Frame cache: pre-extracted still frames from a video, stored so a page can draw an already-decoded image instead of repeatedly seeking a live video element - used to make scroll-scrubbing smooth.
• Lerp: short for linear interpolation, a smoothing technique that moves a value gradually toward a target each frame rather than jumping to it instantly, used here to smooth scroll-position tracking.
• Max mode: a Cursor quality-versus-speed preset that spends more reasoning effort than the default "Fast" mode.
• Connector shaders: a Bolt.new toggle that enables shader-based visual/hover effects on generated interface components.
• Prototype view: Figma's mode for wiring up click-triggered transitions between frames, such as a dark/light mode toggle.
• Subtract: a vector-editing boolean operation that removes the overlapping area of one shape from another, used here to carve a negative-space mask for the "text behind video" effect.
• SVG: Scalable Vector Graphics, a vector image format; the cut-out mask shape is exported as SVG so a website builder can use it directly.
• Bloom: a visual filter that adds a soft glow around bright areas of an image or video, one of several shader effects shown in Figma's filter panel.
• Hatching: a generative shader effect that overlays a hatched/line-pattern texture onto text, shapes, or images.
• MVP: Minimum Viable Product, the simplest working version of something, referenced when comparing an unstyled AI-generated site to a more polished one.
• Lemon Squeezy: a hosted e-commerce/checkout platform suggested for selling a digital product without building custom payment infrastructure.