SKILL40Motion
Orchestrating Cinematic Web Motion
Assigns motion roles and technology ownership across reveals, scroll narratives, direct manipulation, ambient detail, and interaction states.
Primary benefit
Gives React and Next.js experiences a coherent sense of hierarchy, depth, and cinematic pacing without sacrificing usability.When to use
Use when a React or Next.js interface needs a coherent premium motion language involving scroll choreography, reveals, parallax, pinned scenes, hover motion, or cinematic transitions.
When not to use
Do not use before the static layout works well or for a simple isolated hover, focus, or tap transition that CSS can own.
Use cases
Plan a scroll-driven narrative with clear motion roles
Coordinate reveals, hover motion, and reduced-motion fallbacks
Example prompts
Use orchestrating-cinematic-web-motion to choreograph this Next.js page with restrained scroll scenes and complete reduced-motion states.Install this skill
Choose the command for your operating system and run it from the repository root.
Bash
./install.sh --skill orchestrating-cinematic-web-motionPowerShell
./install.ps1 --skill orchestrating-cinematic-web-motionChatGPT
Download Skill ZIPCompatibility
- Surfaces
- ChatGPT · Codex · Claude Code
- Operating systems
- Linux · macOS · Windows
- Install modes
- PluginFilesystem
Dependencies
No external dependencies
Part of systems
Curated systems that canonically include this method.
Used in evidence
Reports that explicitly list this method among the applied methods.