A step-by-step guide to building a cinematic, scroll-controlled AI website, and embedding your video offer without ads ruining it.
The site looks stunning, then a YouTube ad rolls right inside your hero. A skip counter, an unrelated brand, and the whole illusion breaks in one second.
Upload the same video to a platform with no ads and a fully customizable player, then embed that. Clean, on-brand, no interruptions.
Follow them in order. Every command, link and setting you need is right here.
Skills are free add-ons that teach Claude Code a specific craft. Three of them turn it from a generic template maker into a senior-level designer. Install each one: open Claude Code and paste the command, or simply send Claude the GitHub link and ask it to install.
A design brain: 84 styles, about 190 color palettes, 74 font pairings and UX rules. Gives Claude commands like design, ui-styling, brand.
The anti-generic pack: premium styles (minimalist, soft, editorial, redesign) that stop the site from looking like a template.
# in your terminal: npx skills add Leonxlnx/taste-skillThe motion pack (by the author of Sonner and Vaul): premium animation and transition craft. This is what makes the scroll feel expensive.
# in your terminal: npx skills add emilkowalski/skillsAn MCP is a connector that gives Claude a new ability. Magnific lets Claude generate the images and video for your scene right inside the chat.
Sign up at magnific.ai. The basic plan, around €16 per month, is enough for this whole build, one scene image plus one short video. Video costs more credits than images, so keep an eye on the balance.
In the Claude app: Settings, Connectors, Add custom connector. Paste this URL and confirm:
https://mcp.magnific.comPrefer the terminal? Run claude mcp add --transport http magnific https://mcp.magnific.com
Claude asks you to sign in to Magnific once (OAuth). Approve it, and the image and video tools become available in the chat.
Here is the full prompt. The reference site is already filled in (my finished build), so Claude has a concrete style to match. Replace the highlighted slots with your own product, photo, objects and texts, then paste it into Claude Code and attach your photo.
Build a premium, cinematic, single-page landing site for [WHAT THE SITE IS ABOUT, e.g. an online course, an app, a personal brand]. # Visual direction Match the look, feel and quality of this reference site: https://obscura-course.pages.dev (dark, cinematic, one warm accent color, premium fonts, film grain, a camera-viewfinder overlay). You may pick your own accent color: [#HEX]. Do not make a generic template. # Hero: a scroll-controlled tour of one scene The first screen is one continuous scene built around a video. Generate the assets with the Magnific MCP: 1) A wide, detailed frame of [THE SCENE, e.g. a film studio / office / workshop] with [MY MAIN SUBJECT, e.g. me / a product] in the centre and these objects clearly spread apart across the frame: [OBJECT 1], [OBJECT 2], [OBJECT 3]. Use my photo as a character reference: [ATTACH YOUR PHOTO]. Keep my face and features consistent. 2) From that frame, generate an ~8s video with Seedance. Give it a second-by-second camera route where the viewpoint flies from the subject to each object in turn and holds on each: 0-1s wide; push in on [OBJECT 1], hold; glide to [OBJECT 2], hold; move to [OBJECT 3], hold. Objects stay static, only the camera moves. Scroll behaviour: ONE scroll gesture = ONE flight to the next object. IMPORTANT: PLAY the video segment between key points, do NOT scrub currentTime frame-by-frame (that stutters on Windows). Re-encode the video all-keyframes for smooth playback. After the last object, the next scroll releases the page to the sections below. At each object a short chapter text fades in near the end of the flight, in the EMPTY part of the frame (opposite the object): - [OBJECT 1] to "[CHAPTER 1 TITLE]" + 3 short bullet points - [OBJECT 2] to "[CHAPTER 2 TITLE]" + 3 bullets - [OBJECT 3] to "[CHAPTER 3 TITLE]" + 3 bullets Add a subtle camera viewfinder overlay: corner frames, a REC dot, a running timecode. # Sections below the hero - A video preview block, leave a clearly marked placeholder, I will paste an embed code later. - Pricing: [YOUR PRICE + what is included]. - A minimal footer. Use the placeholder brand name [BRAND NAME] instead of a real brand. # Tech Single HTML + CSS + JS, no build step. Responsive, tuned for desktop capture. Fully self-contained so it can be deployed to Cloudflare Pages. Save a backup version before big changes. When the site is ready, I will paste my Kinescope embed code and ask you to insert it into the preview block.
[WHAT THE SITE IS ABOUT]Your product in one line: a course, an app, a service, your personal brand.[#HEX]One accent color for the whole site (e.g. warm amber #F0A94B).[THE SCENE]Where the tour happens: a studio, an office, a workshop, a kitchen.[MY MAIN SUBJECT] + [PHOTO]You or your product in the centre. Attach 1 photo, or 3 to 4 from different angles for a much better likeness.[OBJECT 1..3]The things the camera flies to. Pick items that represent the stages of your offer.[CHAPTER TITLES]The text at each object: a title plus three short points.[YOUR PRICE]Price and what is included.[BRAND NAME]A placeholder name so it is not tied to a real company.This is the ad-free part. Instead of YouTube, host your video offer on Kinescope, a video platform with no ads at all. Here is exactly how.
Open your video, then open its Settings, Player tab (player options also live in the project settings, where they apply to every video at once). Style it so it belongs to your site instead of looking like a foreign box.
Set the accent, poster and logo at minimum, that is what makes the embed feel native.
In Kinescope, open your video and find the Share, Embed option. Copy the embed code, an <iframe>...</iframe> snippet. Send it to Claude and say: "insert this embed into the video preview block." Done, an ad-free, on-brand video living inside your AI-built site.
Kinescope is a video hosting and streaming platform, the ad-free alternative to YouTube with a player you fully control. It is what keeps the video on your site clean and on-brand.