← Back to Skills / Marketplace / cinematic-scroll
SKL · 44PRO

Cinematic Scroll.

A scroll-driven, Awwwards-style landing page where a hero video scrubs frame-by-frame as you scroll — buttery inertia, animated type, and a pinned horizontal section that make the whole page feel like a film.

UNLOCK WITH PRO →
● Live preview · Cinematic Scroll demo
● Scroll inside the frame — the film scrubs to your scroll
↗ New tab
01 · The Vibe

Cinematic Scroll builds the kind of landing page that wins Awwwards — a short video plays frame-by-frame as you scroll, tied directly to your scroll position, running as a fixed background across the entire page while content layers smoothly above it. Add buttery inertia scrolling, typography that animates in, a pinned horizontal section, and a depth gallery, and you've got a page that feels like a film. This is the skill for when you want people's first reaction to be "how did they build this?"

● Looks Like
Award-winning luxury brand sitesApple-style product reveal pagesHigh-end agency and fashion landing pagesThe immersive scroll experiences that get featured on Awwwards and FWAPremium product launches where scrolling feels like watching a trailer
02 · Best For / Avoid If
＋ Best For
+Luxury and premium brand landing pages
+Product launches and reveal pages
+Fashion, automotive, and lifestyle brands
+Creative agency and studio showcases
+Campaign and storytelling microsites
+Any page where you want a jaw-dropping, immersive first impression
× Avoid If
×You're building a product app, dashboard, or anything utility-first — this is a marketing experience, not a UI
×Your content is dense or text-heavy — the scroll-driven format wants space and a single narrative
×You need maximum performance on low-end devices — frame-by-frame video scrubbing is GPU and bandwidth heavy
×Your brand is plain or minimal and a cinematic treatment would feel overdone
03 · Design Philosophy
01

01 — Scroll is the playhead

The video doesn't autoplay — it advances frame by frame as you scroll, so the visitor controls the pace of the story. That direct connection between scrolling and motion is what makes the whole page feel alive.

02

02 — Everything moves together

Smooth inertia scrolling, typography animating in, panels pinning and sliding horizontally — every element is choreographed to the scroll. The motion has to feel intentional and smooth, never janky, or the spell breaks.

03

03 — Built to be felt, not read

This is an experience first and a page second, designed to make someone feel something before they process the words. Lead with the imagery and the motion, and let the copy stay short and punchy.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Heavy video files
Frame-by-frame scrubbing needs an optimized image sequence or a compressed video, or the page stutters and takes forever to load. Keep the source short and well-compressed, and ask Claude to lazy-load it.
! WARNING
Too much scroll without payoff
Every scroll moment needs something happening — a frame change, a reveal, a transition. Long stretches of nothing make the page feel broken rather than cinematic.
! WARNING
Forgetting mobile
Scroll-scrubbed video is demanding on phones. Ask for a lighter fallback on mobile — a shorter sequence, a static hero, or reduced motion — so the experience still holds up.
! WARNING
Copy that's too long
This format wants short, bold, punchy text that animates in. Paragraphs of body copy fight the cinematic feel, so keep the words minimal and let the motion carry it.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →