Skill LibraryPrompt Skill1 DesignsTop Views

Scroll Story Motion Scrub

Create narrative pages with scroll sections, scrubbed video/scene motion, anchors, performance boundaries, and reduced-motion fallbacks.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines7

Reusable instruction lines for generation.

Author@Interface Lab

Animation

Skill Directive

Description

Create narrative pages with scroll sections, scrubbed video/scene motion, anchors, performance boundaries, and reduced-motion fallbacks.

TagsAnimation

Skill Prompt

- Break the story into three to seven chapters, each answering one user question: what it is, why it is credible, how it works, what the result is, and what to do next.
- Use scroll motion only to reveal causality and state change; do not make users wait for decorative animation before seeing core information.
- Scrubbed video, canvas, or WebGL scenes need a static poster/fallback; the first screen and core copy must remain understandable without a video frame.
- Prefer transform, opacity, clip-path, and CSS variables; avoid continuously animating width, height, top, left, filter blur, and other expensive properties.
- Each chapter needs stable height and anchors, and pinned sections must return to normal flow; do not create long unskippable pinned regions.
- Support `prefers-reduced-motion`: disable scrub, keep static keyframes, reduce parallax, and ensure every piece of content remains readable.
- Verify desktop/mobile FPS, scroll locking, focus order, video failure, browser back position, and touch scroll feel.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Scroll Story Motion Scrub

More pages using Scroll Story Motion Scrub