Scroll-Scrubbed Cinematic Brand Story Page
Scroll-scrubbed story page: value-chain scenes, style-locked prompts, frame handoffs, and a canvas engine that stays smooth on phones.
Before & after
Same prompt, same agent — the only difference is the skill.
A premium landing page is a great goal! You'll want to think about your key messages, visual hierarchy, and how to guide visitors through your story. Consider using high-quality imagery, maybe some animation if your budget allows, and a clear call-to-action. You could explore different layout options—maybe a hero section, some feature blocks, testimonials. There are lots of design patterns you could consider. It might help to look at what competitors are doing, and think about what makes your brand unique. Would you like suggestions on specific design trends or tools? There's a lot of flexibility here depending on your goals and timeline.
BRAND INTERVIEW → art direction: Editorial farm photography, story scenes: orchard soil work → roastery craft → cafe pour → customer ritual → global shipping → brand values moment. STYLE-LOCKED SCENES GENERATED (5 stills): Scene 1: Hands in soil, Ethiopia highlands → dive-camera flight down to bean drying racks Scene 2: Beans entering roaster → close-up flame and bean motion → camera pulls back to show roaster interior Scene 3: Barista pouring into ceramic, latte art forming → customer picks up cup Scene 4: First sip, customer's reaction → cut to cafe storefront at golden hour Scene 5: Coffee package with globe, final CTA button → "Fund Your First Bag" DELIVERABLES: • 5 HD rendered stills (Editorial style, Higgsfield tier) • Camera timeline with easing (scroll → position) • Seam-safe transition clips • Portable scroll-engine.js (drops into Next.js) • Cost estimate: 85 credits (checked against live balance pre-render) • Desktop and mobile versions Launch in 5 days. Scroll wheel drives story naturally—no timeline scrubber.
About this skill
Your scroll video stutters on iPhone, the hero weighs 60 MB, and every generated shot looks like it came from a different film. This skill plans the story from how your product is really made, locks the look so every shot matches, and ships a scroll engine sized for phones.
What it does
- Drafts 5-7 scenes from your real value chain, each with a short HTML caption, one camera move, and an object that carries into the next shot
- Writes a word-for-word style lock and per-scene still and motion prompts, joined by last-frame-to-first-frame handoffs
- Works out frame count from scroll length and computes the download size and decoded memory for desktop and mobile before you render anything
- Supplies a canvas image-sequence engine with lazy scene loading, cover-fit drawing, nearest-frame fallback, and iOS toolbar-safe sizing
- Gives the ffmpeg commands for frame extraction, handoff frames, and all-keyframe video, plus the reduced-motion, SEO, and accessibility checks
- Diagnoses janky scroll video, crashing mobile tabs, and drifting shot styles, and gives the fix
What you get
A scene table, style lock, prompt table, draft-then-final render plan with a cost formula, a frame and memory budget, and engine code for plain HTML, React/Next.js, or Vue.
Best for
Brand and product teams, studios, and front-end developers building a launch or brand story page that should feel cinematic and still load fast on a phone.
SKILL.md preview
---
name: scroll-scrubbed-brand-story-page
description: Plans and builds a scroll-scrubbed cinematic brand story page - 5 to 7 scenes from how the product is really made or delivered, a style lock so generated stills match, image-to-video prompts joined by last-frame handoffs, a frame and memory budget, and a canvas image-sequence engine with mobile and reduced-motion fallbacks for HTML, React, or Vue. Use when the user says "build an Apple-style scroll page", "scrollytelling landing page for our brand", "scroll-scrubbed video hero", "make our story scroll like a film", "my scroll video is janky on iPhone", "the page crashes on mobile Safari", or "my AI shots don't look like the same film".
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.