Screenshot Motion Skill
Produce a real, editable video with one of six implemented templates:
| Template | Effect | Screenshots | Duration |
|---|---|---|---|
spotlight | Five cards unfold, the center screenshot becomes the hero, then the lineup returns | Exactly 5 | 12 seconds |
kinetic | Bold type, split screens and graphic wipes | Exactly 5 | 16 seconds |
prism | Accordion screens, layered glass reveals and light sweeps | Exactly 5 | 18 seconds |
orbit | Neon orbital gallery, depth rotation and final lineup | Exactly 5 | 18 seconds |
launch | Dark editorial promo with collage, feature close-ups, large headlines and CTA | Exactly 5 | 20 seconds |
storybook | Hardcover opens, illustrated spreads turn, cover closes | 1–12 | Configurable holds; 5 pages default to 32 seconds |
Read template selection and mapping before arranging screenshots. Follow an explicitly selected effect. Otherwise recommend/select the closest match from the user's intent, preserving previous choices; do not default all requests to a book. The authoritative template registry is templates.json. This is an extensible library, not bundled finished demo videos.
Inputs and decisions
Identify the product being promoted, the supplied screenshot order, and the output language from the request. Preserve previous choices. If the product is ambiguous, clarify before writing promotional claims; otherwise use reasonable defaults and proceed. Default: 1920×1080, 30 fps, four-second holds for storybook, English explanatory text, no spoken narration.
Inspect screenshots before writing copy. Use the real UI without inventing controls, customer counts, performance claims, prices or download addresses. The explanatory copy is a separate editable layer; text baked into screenshots cannot be changed by changing captions. Use user-provided or appropriately licensed media. Keep private screenshots and generated jobs outside the installed skill directory.
User-facing interaction
Treat invocation as a request to produce the video. Ask for screenshots and product details only when missing; write the configuration and execute preparation, rendering, and mixing yourself when tools are available. Do not hand the user Python commands or require them to author JSON as the normal workflow. Check local dependencies and report concrete missing requirements. Honor execution permissions; explain any action the user must take when your environment cannot perform it.
Accept revision requests in natural language, update the generated project, and render a revised result. For screenshot or storybook duration changes, prepare a new job so composition metadata stays consistent. Keep technical commands in agent execution or developer troubleshooting, unless the user explicitly requests them. See developer rendering commands for manual usage.
Create the video
- Read the configuration reference. Write a project JSON beside the user's assets, using the matching example in
examples/as a starting point. Write short, concrete explanations, one feature per screenshot. Select--template spotlight,--template launch,--template orbit,--template kinetic,--template prism, or--template storybook; the command below illustrates storybook. Respect the validated line limits. - Prepare an isolated job:
Existing jobs are never overwritten bypython3 /path/to/screenshot-motion-skill/scripts/motion.py prepare --template storybook --config /path/to/project.json --out /path/to/new-jobprepare. The job contains its own renderer, copied screenshots and normalized configuration; it does not depend on the skill after preparation except for the helper CLI. - Install dependencies inside the new job using
npm install. Node.js 22+ and Chrome/Chromium are required. Usenpm run studioin that job for interactive preview. - Render representative still frames for the selected template first:
Inspect the resulting PNG. Correct copy, clipping or layout before a full render. Useful preview frames: spotlight 105/190/330; launch 60/150/250/355/450/550; orbit 45/170/270/380/490; kinetic 35/100/170/245/320/430; prism 70/150/240/330/470; storybook 150 andpython3 /path/to/screenshot-motion-skill/scripts/motion.py render --job /path/to/new-job --frame 150 --browser /path/to/chrome90 + holdFrames + 21for the first turn midpoint. Choose frames within the job duration. - Render without
--frame. This createsout/video-silent.mp4. Supply an existing browser explicitly if auto-discovery fails; the script does not download a browser. - Run
motion.py mix --job /path/to/new-jobto createout/video.mp4. Without audio inputs it makes a silent copy. For music, transition sounds or paper sounds, read audio and licensing. Do not add narration unless requested and a suitable authorized voice service is available. - Follow the output checks, inspect the rendered file rather than only source code, then return the actual video and job path. Be precise about whether narration, listening, or real-time playback was performed. If rendering is blocked, report the specific missing dependency; do not substitute a still image and call it a video.
Desktop editing delivery
When requested, follow editing export and compatibility. Render the clean mode and export the portable pack with editable SRT captions, independent audio stems, original screenshots and shot clips. Explain that motion geometry remains baked and imported captions need editor styling. Keep the final styled MP4 as a reference. Verify the user's app/version before claiming native draft support; the optional legacy Jianying adapter is experimental and is not verified in current macOS/Windows or CapCut. Never silently install drafts into an application's library.
Stable implementation details
The following page-curl notes apply to storybook. For spotlight, preserve the paint barrier and screen-space labels. For launch, use normalized region crops only where supported by visible UI; never reuse a previous product's pixel coordinates.
- A turning right page has the old screenshot on its front and the next explanation on its back. Do not crossfade entire spreads or mirror the reverse text.
- All geometry follows frame numbers; never introduce wall-clock animation or unseeded randomness.
- The Canvas2D strip mesh avoids nested browser 3D compositing problems. Keep the flat-page fast path, small strip overlap, and continuous lighting overlay: per-strip antialiased shading creates visible lines across text.
- Camera distance 3000 keeps lifted page tips inside the 1080p frame. Recheck the full turn envelope after camera or page-size changes.
- The default renderer fits images without cropping. Landscape screenshots are supported; do not stretch them to a portrait aspect ratio.
- Render sequentially by default. Increasing concurrency requires another visual check of captured frames.
The package's original code is MIT licensed. Remotion and media have separate licenses; see THIRD_PARTY_NOTICES.md. This skill does not authorize publishing, uploading user assets, changing account settings, or installing itself globally.
Extend the library
When asked to add another effect, follow the extension contract. Add a renderer, registry entry and example rather than replacing existing templates. Verify both the new effect and relevant existing templates.