Video tutorials
Lesson 03 / Cinematic prompting

I Built a $20,000 Website With ONE Prompt and Claude Fable 5

Learn the vocabulary behind cinematic AI websites: weighted scrolling, scroll-triggered animation, browser 3D, detailed prompting, and final demo polish.

Lesson 03

I Built a $20,000 Website With ONE Prompt and Claude Fable 5

Overview

A cinematic website prompting lesson built around the idea that expensive-feeling pages are made from recognizable ingredients. The video breaks down smooth weighted scrolling, scroll-triggered GSAP-style animation, and real Three.js-style 3D in the browser.

The lesson compares basic prompts against detailed prompts, then applies four complete directions across different landing-page concepts. The point is not that one prompt magically solves design; it is that precise vocabulary helps the AI understand the experience you want.

Claude Fable 5GSAPThree.js

Cinematic AI websites are not only about one impressive prompt. They come from knowing the ingredients that create an expensive feeling: weighted scrolling, scroll-triggered animation, real browser 3D, detailed prompts, and final experience polish.

The workflow is:

interaction vocabulary -> detailed prompt -> multiple directions -> page polish -> final demos

Use this when you want an AI-generated landing page to feel directed, paced, and cinematic.

What Makes A Website Feel Cinematic?

Cinematic website ingredients shown as smooth scroll paths, GSAP-style animation cues, and browser 3D depth

The lesson breaks the "expensive website" feeling into concrete ingredients. Smooth weighted scrolling, scroll-triggered animation, and real 3D in the browser are all specific ideas that can be described to AI.

That is useful because vague language only gets vague results. A prompt that says "premium cinematic landing page" gives the model a mood. A prompt that names scrolling behavior, animation timing, 3D depth, and page pacing gives the model mechanics.

The best prompts describe both:

  • what the page should feel like
  • how the page should behave

Why Does Vocabulary Matter Before Prompting?

Prompt vocabulary board with Lenis, GSAP, Three.js, easing, parallax, depth, and scroll-triggered motion cues

The video's main takeaway is that the hard part is knowing what to ask for. Words like Lenis, GSAP, Three.js, parallax, easing, scroll-triggered motion, and weighted scrolling give the AI a shared language with the designer.

This turns the prompt into direction. Instead of asking the model to guess what cinematic means, the prompt explains the ingredients that create that feeling.

Good vocabulary helps with:

  • motion pacing
  • section reveals
  • 3D object behavior
  • scroll feel
  • depth and atmosphere
  • interaction expectations

What Changes Between A Basic Prompt And A Detailed Prompt?

Side-by-side AI prompt comparison showing a plain landing page request versus a detailed cinematic interaction brief

The lesson compares a basic prompt with a detailed prompt. The gap is important because it shows that detail is not just extra text. Detail gives the model design decisions to make.

A stronger prompt can define:

  • the product concept
  • the visual world
  • the 3D subject
  • the scroll behavior
  • section transitions
  • animation timing
  • final polish expectations

The goal is not to write a long prompt. The goal is to write a prompt where every detail changes the result.

How Do Four Directions Test The Same Method?

Four cinematic landing-page directions represented as cosmos, fragrance, coffee, and architecture concepts

The workflow applies detailed prompts to four different concepts: cosmos, fragrance, coffee, and architecture. That makes the lesson more useful because it tests whether the same interaction vocabulary can produce different visual worlds.

Each direction should feel distinct while sharing the same cinematic foundation:

  • a clear subject
  • a strong visual mood
  • section pacing
  • motion that matches the product
  • enough detail to feel complete

This helps you learn which parts of the prompt are reusable and which parts need to change for each brand.

What Does Complete Polish Mean?

Full-page cinematic website review with scroll rhythm, section transitions, product depth, and final polish notes

Motion alone does not make a page premium. The page still needs coherent sections, readable copy, strong hierarchy, and pacing that carries the visitor from the hero to the final CTA.

Review the complete experience:

  • does the hero create a strong first impression?
  • do sections reveal at the right pace?
  • does the 3D feel connected to the brand?
  • do animations support the story?
  • does the CTA remain easy to notice?

The effect should serve the landing page, not replace it.

How Do You Become The Director?

Designer directing final AI website demos with cinematic scroll, 3D depth, and polished landing-page presentation

The final demos show the bigger lesson: once you know the vocabulary, you can direct the result. AI can produce the page, but the designer decides the mood, interaction, pacing, and quality bar.

Carry this into your own Aura prompts:

  • name the interaction stack
  • describe the motion behavior
  • define the visual world
  • ask for complete sections
  • review the final page like a director

The strongest one-prompt workflows are still shaped by taste.