The Ai KhanLet's talk

Claude Code · Skill · Guide

scroll-film-site: an AI film website from one skill

By Published Tested 4 min read

1
install command
4
sites built with it
MIT
free, open source

Skip to the prompt for Claude Code ↓

This skill builds a client website whose hero is a short AI film (made with Veo 3) that plays forwards and backwards as the visitor scrolls. Below it come the menu, shop, deals, reviews and location, and orders go straight to WhatsApp with every item, option, total and address already written out. It's free and open source (MIT), and I built these four sites with it: Angaar Smash & Grill, GlossWorks, Fatima Toys & Sports and Meridian.

Pipeline
intake -> scaffold -> photos -> Veo prompt -> build (poster mode) -> audit -> GitHub + Vercel
                                            |  (you make the film)
                 film -> frames -> retime text -> Cloudflare Pages -> redeploy -> live check

What you need

  • Claude Code (or Cursor, Codex, OpenCode: the skill works in all of them).
  • ffmpeg, to cut the film into frames.
  • Python 3 + Pillow, to convert photos to WebP (pip install pillow).
  • Node 18+ with playwright-core and Chrome, to check the layout on phones and desktop.
  • gh (GitHub CLI) and the vercel CLI, both logged in.
  • Access to Veo 3 (Google Flow or Gemini). You make the film; the skill writes the prompt for you.

The site works without the film too. Until the film arrives, the hero slowly zooms into a photo ("poster mode").

Install the skill

Terminal
npx skills add areeb26/scroll-film-site

For Claude Code only, globally, with no questions:

Terminal
npx skills add areeb26/scroll-film-site -g -a claude-code -y

Or clone it directly:

Terminal
git clone https://github.com/areeb26/scroll-film-site.git ~/.claude/skills/scroll-film-site

Then restart Claude Code (or start a new session).

Tell Claude about the business

Ask in plain words; the skill loads by itself:

Claude Code
make a website for a restaurant: desi BBQ and smash burgers, delivery orders, deals, gallery and reviews

Claude asks one round of questions: what the business is, which features it needs (cart, booking, quote builder, deals, gallery, reviews), whether it's a real client or a demo brand, and the WhatsApp number. Then it creates the site folder (scripts/new-site.sh), copies the template and fills in the brand name.

Photos and the Veo prompt

Until the client sends real photos, the skill finds free stand-in photos on Unsplash, picks the best from a contact sheet and converts them to WebP.

Then it writes VEO_PROMPT.md and pastes the prompt in chat. The prompt is planned so the film's subject stays on the opposite side from the text, and the last second is empty and dark so the closing headline can sit there. Paste the prompt into Veo 3 and make an 8-second film. Not ready to make it yet? That's fine: the site runs in poster mode.

Build and check the site

Claude builds the site: hero, menu or catalogue, deals, reviews, location and a WhatsApp checkout. The customer fills a cart, adds a name, phone and address, and one button opens WhatsApp with the whole order written out. Opening hours are built in too: outside business hours the site says it's closed instead of taking an order.

Then a headless audit runs at 320, 390 and 1440 pixels wide. It catches pages that zoom out on phones, clipped text, and text hidden under the nav. Claude fixes whatever it flags.

Ship it

Claude Code
ship it

The skill creates a private GitHub repo and runs vercel deploy --prod --yes. It reads the live URL from the deploy output (because <name>.vercel.app might belong to someone else) and runs the audit again on the live site.

Add the film when it's ready

Claude Code
here's the Veo video for the restaurant, put it on the site: ~/Downloads/angaar_hero.mp4

Now the skill:

  1. cuts the film into WebP frames in two sizes (1920 and 1280) with scripts/make-frames.sh;
  2. reads a gridded contact sheet of the film to time the text "chapters" to the footage, and makes the phone crop pan with the subject;
  3. puts the frames on Cloudflare Pages (free, with no bandwidth limit);
  4. redeploys and checks that every frame loads on the live site.

Now scroll: the film moves with your finger.

Common mistakes

  • The page zooms out on phones: one element (a ticker, a long nav label) is wider than the screen. Fix: html, body { overflow-x: clip }. Don't use overflow: hidden; it breaks the sticky hero.
  • A drawer or cart won't scroll: the smooth scroll (Lenis) swallows wheel events. Add data-lenis-prevent to the scrolling panel.
  • iPhone zooms into inputs: form fields on phones must be 16px or larger.
  • Wrangler 4 can't create a Pages project: the deploy script already passes --force; use it.

Safety

  • Client sites go into private repos.
  • On demo brands, reviews and stats are samples, listed in the README under "Placeholders to confirm". For a real client the skill never invents reviews; it asks for real ones.
  • Skills run with full agent permissions. Read the repo before you install; that's why it's open source.

Checklist

  • Skill installed (npx skills add areeb26/scroll-film-site)
  • ffmpeg, Pillow, Node, gh and vercel ready
  • Told Claude the business and features
  • Made the film from the Veo prompt (or went live in poster mode)
  • Audit clean at 320 / 390 / 1440
  • Tested the WhatsApp order message
  • Frames load on the live URL

Want me to build one of these sites for your business? Open a case file. I reply within 24 hours.

Using Claude Code or Codex?

Paste this. Let your agent set it up.

Prompt
Install the scroll-film-site skill from https://github.com/areeb26/scroll-film-site
1. Run `npx skills add areeb26/scroll-film-site -a claude-code -y`.
2. Check that ffmpeg, Python 3 with Pillow, Node 18+, gh and the vercel CLI are installed. For anything missing, tell me the install command for my OS and stop.
3. Never read or print .env files, tokens or keys.
4. When it's ready, ask me what business the website is for, and start the skill.

More from the drawer

All guides →

Home