Skip to content
Conduit

skill

cinematic-scroll-kit

Production kit for scroll-cinematic websites: Cursor skill, ffmpeg frame pipeline, and hospitality template.

alexandrubala/cinematic-scroll-kitcommunitylistedunreviewed
Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/alexandrubala/cinematic-scroll-kit itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 26, 2026

Cinematic Scroll Kit

Production kit for scroll-cinematic landing pages: drop in 2–3 videos, fill a config, and let Cursor / Claude Code generate a premium site. Primary vertical: restaurants, wine bars, hotels.

This is the engine and the skill — not a branded demo site.

What’s in the repo

cinematic-scroll-kit/
├── skill/cinematic-scroll/   ← agent skill (install once)
├── scripts/                  ← ffmpeg: video → JPG frames
├── template/                 ← React engine + example site.config
├── inbox/                    ← drop MP4s here (gitignored)
└── README.md

Install the skill (once per machine)

chmod +x scripts/*.sh
./scripts/install-skill.sh

This copies the skill into ~/.cursor/skills/cinematic-scroll and ~/.claude/skills/cinematic-scroll. Start a new chat and ask: what skills do you have available?

You can also copy skill/cinematic-scroll into Cursor’s skills folder by hand.

New project workflow

  1. Scaffold a Next.js 16 app (pinned versions are in the skill).
  2. Copy template/engine/ into src/components/cinematic/.
  3. Copy template/site.config.ts and template/engine/types.ts, then fill in the brand.
  4. Put clips in inbox/ (in this kit or in the app) and run:
./scripts/extract-frames.sh inbox/hero.mp4 ./public/frames/hero
./scripts/extract-frames.sh inbox/kitchen.mp4 ./public/frames/kitchen

Or extract everything in the inbox: ./scripts/extract-inbox.sh

  1. Copy count from each manifest.json into sequences[].frameCount.
  2. In Cursor: “Use the cinematic-scroll skill. Generate the site from site.config.ts.”

Requires ffmpeg (brew install ffmpeg).

What you provide per client

  • 1–3 videos (~4–8 seconds, continuous motion)
  • site.config.ts: name, colors, copy, short menu, hours, booking
  • Optional inbox/map.txt to map hero.mp4 → hero

Do not make the agent invent the restaurant name.

Limits

  • At most 3 canvas sequences per page (mobile weight).
  • Playback is a JPG sequence, not a <video> player.
  • The sample config (Casa Lumen) is fictional — replace every field.

Git

Source videos and extracted frames are gitignored so the history stays small.

↑↓ navigate openesc close