Cinematic Scroll
Resource Hub
Everything you need to build an AI-generated cinematic scroll — from storyboard to shipped site. Tools, keyword libraries, prompts, and the full workflow.
The Full Flow
Token-optimised. Every frame feeds the next. Storyboard once, generate deliberately, ship clean.
Your Tools
Google Flow
FreeTurn storyboard sketches into styled reference frames. Product Studio 360 spins clean product angles in one click.
Open Google Flow→Higgsfield
$15/mo StarterGenerate cinematic clips with Kling 3.0. Precise camera moves — whip, orbit, crash zoom, tracking.
Open Higgsfield→Claude
Free / $20 ProBuild the design system, generate the page, and fine-tune the scroll. Opus recommended for the build.
Open Claude→Lovable
Free tierAI page builder. Feed it your reference, brief, and Cloudinary video URLs to scaffold the site.
Open Lovable→Canva
FreeStitch your clips, adjust playback speed, and add transitions before the video goes live on scroll.
Open Canva→Figma
FreeLet AI Figma read a reference site and draft a simple design system Claude can build against.
Open Figma→Cloudinary
FreeHost your videos and stills. Upload → get a public CDN URL that drops straight into the build.
Sign up free→The Detailed Guide
Two halves: build the footage, then build the page it lives on.
Storyboard the sequence
- Pick the product you want to showcase.
- Name your audience and how you want the piece to land with them.
- Sketch frames — paper or digital. Annotate each with the camera movement and lighting you have in mind.
Generate style frames in Google Flow
Gather a look you love on Pinterest, then feed your storyboard frames into Google Flow and prompt each still in that style. These frames become the start and end points for your video shots.
- Keep aspect ratio at 16:9.
- Add annotations on the image where it helps.
- Use @ tags to reference characters, products, or earlier frames.
Write your shot prompts
Order matters more than length. Build every prompt in the same four-part structure so the model reads it the way a director reads a shot list. Each part is colour-matched to the example below.
A woman in a white linen dress walks slowly through a lavender field, golden hour light, long soft shadows, warm hazy atmosphere, low-angle tracking shot following from behind, gentle handheld movement, choppy low frame rate, cinematic, 35mm film grain, shallow depth of field, claymation style.
Generate cinematics in Higgsfield
Run your prompts through Higgsfield on the Kling 3.0 model. It handles camera movement well — whip shots, orbits, crash zooms, follows, pans and tilts all hold up.
- Add your start and end frames from Step 2 to anchor each shot.
- Review every generation and add corrective notes — it keeps you economical with credits.
- Lean on Kling's camera control: whip, orbit, crash zoom, follow, pan, tilt.
Stitch & speed-grade in Canva
Combine your clips and adjust their speed in Canva (or any editor you like) before the footage goes on the page.
Upload to Cloudinary
Host your final video and still frames on Cloudinary to get public CDN URLs you'll drop into the build.
Build your design system in Claude
Study [REFERENCE SITE] and build me a design system: colour palette, type scale, spacing, and motion feel. It's for a cinematic, scroll-driven product page for [PRODUCT NAME]. Dark theme, atmospheric. Give me tokens I can reuse across the whole build.
Build the page in Lovable or Claude
Generate the page with Lovable or Claude — but always feed it a style reference so it matches your design system. Get it right early; free-tier credits are limited.
Build: [a brief description of the scrubbing interaction you want built] Project: [project title] Video: [video URL / file reference] Goal: Build a one page website which starts with a scroll-scrub background video, the video fills the viewport and stays sticky till the video completes. It has content that appears at the below mentioned intervals. Let there also be a smooth scroll effect and animations to the content that appears on the page. Build a collapsible toggle window to alter checkpoints, [add any other specific toggles you want to adjust later]. Include a top navigation bar. Structure: 1. Header scroll section, . . . . ., 4. Footer Design system Colours: [primary / secondary / background / accent - hex codes if you have them] Style: [e.g. minimal, bold, editorial, playful, luxury] Typography: [fonts / type pairing, if any] Other: [spacing, motion feel, imagery style, anything else that defines the look] Scrubbing checkpoints Three checkpoints to start - 0%, 50%, and 90% of the video Checkpoint 1 At [video %]: e.g. 0% Show: [headline, copy, image, or component to display] Positioning: [center, left, left bottom] Checkpoint 2 At [video %]: e.g. 50% Show: [headline, copy, image, or component to display] Positioning: [center, left, left bottom] Checkpoint 3 At [video %]: e.g. 90% Show: [headline, copy, image, or component to display] Positioning: [center, left, left bottom] [DETAILS ABOUT OTHER SECTIONS] Flow and notes Pacing / transitions: [how scroll speed and content changes should feel] References Link 1: [design file / hosting / demo / repo]
Lovable
Fastest scaffold. Good when you want the full page structure generated from a reference in one pass.
Claude — Opus
Best control over the scroll interaction and design-system fidelity. Use the Opus model for the build.
Fine-tune the scroll → ship
Preview locally, then dial in the feel with live controls. Drag until it's right, lock the values, and ship.
Show me everything I can tweak on this scroll.
Give me sliders for scroll speed, video start/end
offset, gradient intensity, blur, and overlay colour.
Let me adjust them live, then lock in the values.Drag sliders → find the sweet spot → lock values → tell Claude to make them permanent. Done.
All Prompts
Copy-paste ready. Bookmarkable.
Restyle this storyboard frame: [SUBJECT], in the style of [PINTEREST REFERENCE]. 16:9. [LIGHTING] lighting, 200mm, shallow depth of field, cinematic. Keep the product accurate. @ref for the product shot.
// Subject+Action > Scene+Mood > Camera > Style [SUBJECT] [ACTION], [SCENE + MOOD], [CAMERA MOVE], [STYLE + FILM LOOK]. Off-center framing, foreground blurred at the edge.
Study [REFERENCE SITE] and build a design system — palette, type scale, spacing, motion. Dark, cinematic, scroll-driven. Give me reusable tokens.
Show me every parameter I can tweak on this scroll
interaction. Give me live controls for each, let me
adjust in real time, and lock in my preferred values.Find Your Reference
A reference anchors the AI. Without one, you get generic output. Browse these four for cinematic, scroll-driven product pages — dark themes, video backgrounds, atmospheric gradients. Pull the one header or moment you want to echo, and bring it to Step 7.
Pre-Workshop Checklist
Set up your accounts and bring an idea. We move fast. Tick these off — your progress is saved in this browser.
- Google Flow access — flow.google (for style frames)
- Higgsfield account — higgsfield.ai ($15/mo Starter — for Kling 3.0 video)
- Claude Pro — claude.ai ($20/mo — design system, build, fine-tune)
- Lovable account — lovable.dev (free tier is fine)
- Canva account — canva.com (free — stitching & speed)
- Cloudinary account — cloudinary.com (free — video & image hosting)
- A product to showcase — even a rough idea. What's the hero?
- A few storyboard sketches — paper is perfect. Bring your shots.
Share Your Feedback
Enjoyed the workshop? Let others know — drop a quick review on Trustpilot.
