CLAUDE - A DEEPER DIVE

This course explains how Claude Fable 5 can be combined with Claude Code, Higgsfield, Model Context Protocol connections, and modern front-end technologies to create cinematic, interactive websites.

Learners will understand how to:

• Plan an AI-assisted website project.
• Connect Claude to external creative tools.
• Generate consistent images and videos.
• Organize project assets and instructions.
• Build scroll-controlled website animations.
• Test and improve the final website.
• Turn an AI-generated prototype into a professional client deliverable.

2.1 Introduction

A cinematic website depends heavily on visual consistency.

The images and videos should appear to belong to the same campaign. They should share similar:

• Lighting.
• Colour temperature.
• Camera style.
• Product appearance.
• Background treatment.
• Composition.
• Level of realism.

Generating every asset independently can create visual drift. One image may be warm and cinematic while another appears bright, flat or artificial.

The workflow therefore generates assets in a deliberate dependency order rather than creating everything simultaneously.

3.1 Introduction

Once the assets are approved, Claude can begin building the website.

The demonstrated workflow uses a modern front-end stack consisting of technologies such as:

• Vite
• React
• GSAP
• ScrollTrigger
• Lenis
• HTML
• CSS
• JavaScript

The central interaction is a scroll-controlled video. Instead of playing normally from beginning to end, the video's playback position changes according to the visitor's scroll position.