Install prompt

Read https://claude-motion.com/skills/screenshot-zoom/install.md and follow the instructions to install the "screenshot-zoom" skill, then run it once with its example prompt.

Paste into Claude Code, Codex, Cursor or any agent that supports skills.

Example prompt

Use the screenshot-zoom skill with our screenshot assets/billing.png, url "app.ledgerly.io/billing", focus "0.05, 0.6, 0.4, 0.25", label "Invoices send themselves". Strong zoom, 9:16.

Claude Motion prompt

Create a 7-second product scene on an off-white background. A browser window with a SaaS dashboard screenshot settles in with a soft shadow. After a beat, the camera pushes smoothly into the top-right revenue card "$48.2k". The rest of the screenshot dims under a dark overlay while the card gets an orange outline, and an orange pill "Revenue updates live" pops in just below it. The camera keeps drifting in very slightly.

On a Claude Team or Enterprise plan? Paste this into Claude Motion for a similar result without installing anything.

FreeExplainerSeries: Spotlight

Screenshot Zoom Callout

Push into one area of a screenshot, dim the rest, and call it out.

Your screenshot settles into a clean browser frame, the camera pushes smoothly into the area you choose, everything around it dims, and a pill callout explains what the viewer is looking at.

Engine: HyperFrames
Formats: 16:9 · 9:16 · 1:1
Length: 7s

Inputs

imageScreenshot path or URL (empty = placeholder dashboard)
urlText in the browser bar (empty = none)
focusArea to zoom into as x, y, width, height (fractions 0–1 of the screenshot)
labelCallout text
zoomZoom strengthsoft · medium · strong
themeThemeink · paper · electric · noir · sand
fontDisplayDisplay fontserif · sans · grotesk · mono

Credits

heygen-com/hyperframesregistry/components/ui-focus-zoom(Apache-2.0)
heygen-com/hyperframesregistry/components/browser-device-stage(Apache-2.0)

Original templates, designed with these open-source projects as reference. Full credits and third-party licenses are in NOTICE.md inside the download.

More in this series

Metric Spotlight

A dashboard counts up, then one tile takes the spotlight.

Explainer16:9 / 9:16 / 1:1

Circle Annotation

Hand-drawn circles and sticky notes mark up an image.

Explainer16:9 / 9:16 / 1:1

Transcript Highlight

A transcript plays out, the key phrase is highlighted and lifted into a pull quote.

Explainer16:9 / 9:16 / 1:1

Shortcut Keys

Keycaps drop in, press down, and reveal what the shortcut does.

Explainer16:9 / 9:16 / 1:1