Claude motion graphics: prompt and setup guide
Download the runnable reference project (ZIP)
Official setup references
Select and copy the guide text below.
# Make editable motion graphics with Claude Code + HyperFrames ## Example attribution and status The MAKE → MOVE animation shown with this episode is an original Codex-built reconstruction, not a Claude-created example. The steps and prompt below are portable workflow guidance, not evidence of a Claude session or a guarantee of output quality. The [downloadable starter project](demo-starter.zip) is the same Codex-built reconstruction with its local runtime and fonts included, so you can preview it without downloading dependencies from a CDN. The ZIP contains the editable source and provenance/revision record. ## What you need - Node.js 22 or later and FFmpeg on your PATH (HyperFrames requirements). - Claude Code installed and authenticated with an account that can use it. - Enough free disk and memory to run Chromium and encode a local video; preview and rendering run on your machine. Official install and setup references: [Node.js](https://nodejs.org/en/download), [FFmpeg](https://ffmpeg.org/download.html), [Claude Code setup](https://code.claude.com/docs/en/getting-started), and [HyperFrames quickstart](https://github.com/heygen-com/hyperframes/blob/main/docs/quickstart.mdx). The commands below were checked against HyperFrames CLI v0.8.140; check `--help` if you install a different version. ## Install Claude Code and the HyperFrames agent skills Install Claude Code using Anthropic's native installer: ```sh # macOS, Linux, or WSL curl -fsSL https://claude.ai/install.sh | bash claude --version claude ``` On Windows PowerShell, use Anthropic's official installer command: ```powershell irm https://claude.ai/install.ps1 | iex claude --version claude ``` Start Claude Code once and complete its sign-in flow. Install the HyperFrames plugin from its official Claude Code marketplace, then start a fresh Claude Code session (or run `/reload-plugins`): ```sh claude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes claude plugin details hyperframes ``` The plugin exposes `/hyperframes:hyperframes` and `/hyperframes:hyperframes-cli`. As an alternative, install the standalone skills with `npx skills add heygen-com/hyperframes`, choose the Core Skills group, and restart Claude Code. Follow one install path; don't install both. See the [official plugin instructions](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/plugins.mdx) and [standalone skills guide](https://github.com/heygen-com/hyperframes/blob/main/docs/prompting/overview.mdx). ## Start and inspect the example Download and unzip the starter project above. In its folder, run: ```sh npx --yes hyperframes@0.8.140 doctor npx --yes hyperframes@0.8.140 lint npx --yes hyperframes@0.8.140 preview ``` The preview opens locally in HyperFrames Studio. If the command stays attached, stop it with Ctrl+C; if it returns to the shell, stop the managed preview with `npx --yes hyperframes@0.8.140 preview --stop`. Render the example with: ```sh mkdir -p renders npx --yes hyperframes@0.8.140 render --output renders/make-move-demo.mp4 ``` The starter's `README.md` repeats the pinned commands, source attribution, and font licenses. The starter makes no claim that Claude created it. ## Build a new piece with Claude For a Claude-authored experiment, make a separate clean project, then open Claude Code in that folder: ```sh npx --yes hyperframes@0.8.140 init my-motion-demo --resolution portrait cd my-motion-demo claude ``` Paste the prompt below in Claude Code. The scaffold is expected; if the folder contains other work, keep it intact and use a new project name. Ask Claude to show you its code changes, open the local preview, and explain exactly what it changes after your targeted revision request. That gives you an inspectable source/revision trail; it still does not guarantee a successful or polished output. After the first version, preview it and ask for a review before making one specific revision. Preview the revision, inspect the relevant frames, then check and render: ```sh npx --yes hyperframes@0.8.140 lint npx --yes hyperframes@0.8.140 preview npx --yes hyperframes@0.8.140 check mkdir -p renders npx --yes hyperframes@0.8.140 render --output renders/final.mp4 ``` ## Before you paste the prompt Use the separate HyperFrames scaffold created above; don't overwrite the downloaded Codex reference project. Claude can inspect the installed version's examples and current registration contract. HyperFrames uses HTML compositions and can use seekable, paused GSAP timelines. If you prefer Remotion, use [Remotion's official Claude Code plugin guide](https://www.remotion.dev/docs/ai/claude-code-plugin) instead; don't combine its React setup with this HyperFrames prompt. For creative reference, Oğuz Erol's [motion-design experiments](https://oguzerol.com/en/agentic_ai_skills/motion_design_with_just_claude_opus/) are process inspiration only; don't copy a composition, assets, palette, or signature treatment. Claude, HyperFrames, plugins, and model access may have account, licensing, or usage limits. Check their current terms; this guide does not promise a free plan or a particular model result. ## Copy-paste prompt Paste this into Claude Code while its working directory is the new HyperFrames scaffold: ```text In this HyperFrames scaffold, create a fresh, editable 7-second vertical motion-graphics demo called “MAKE → MOVE”. Use the installed HyperFrames version and its current examples, HTML/CSS/SVG and GSAP for motion. Do not switch to Remotion or another video framework. DELIVERABLE - Build a complete HyperFrames composition in this project folder. - Include index.html, any local source files/assets the composition needs, and README.md with the verified local preview/render steps for the installed HyperFrames version. - Include REVIEW.md listing the visual checks you performed and the exact points that still need a human look. - Keep dependencies and assets local at render time. Do not load fonts, images, scripts, or other resources from a CDN or remote URL. Prefer original CSS/SVG geometry and system fonts; don't add stock footage or a logo. - Inspect the scaffold first and preserve its package/configuration files. Do not overwrite unrelated files. If you find files beyond the expected scaffold, stop and tell me before replacing or removing anything. - Do not claim the composition is tested or rendered unless you actually preview/render it with the installed tools. Inspect the installed version's own help/docs before selecting CLI commands or flags. If a capability is missing, explain the limitation and leave verified code plus manual steps. CANVAS AND TIMING - 1080 × 1920 pixels, 9:16, 30 fps, exactly 7.0 seconds (210 output frames). - Respect a phone-safe text area: keep essential text at least 150 px from the top and 180 px from the bottom; leave comfortable side margins. - Use three scenes with these exact boundaries: scene 1 0.0–2.2s; scene 2 2.2–4.6s; scene 3 4.6–7.0s. No gaps or overlaps. Make transitions intentional and preserve the full duration. - Make every frame deterministic and seekable: a requested timestamp must always produce the same frame. Use a paused GSAP timeline registered through the current HyperFrames composition API. Do not rely on wall-clock time, setInterval, requestAnimationFrame, unseeded randomness, autoplay, or animation state carried forward from a previous frame. Do not use scripts to play, pause, seek, or hide media elements; follow HyperFrames' documented timing model. VISUAL IDEA AND ORIGINAL ART DIRECTION Make the word MAKE transform into MOVE through an original typographic composition. The animation itself is the subject: no explanatory UI, chatbot windows or code screenshots inside this example. This is a new project; do not copy the downloadable Codex reconstruction or represent it as your own earlier work. Use warm ivory (#F3F0E8), graphite (#151515), cobalt (#214EFB) and a restrained orange accent (#FF6A3D). Use sharp editorial composition, oversized typography, precise thin rules and a few tactile transitions. Avoid neon-on-black, gradients as decoration, stock imagery, copied creator styles, fake software screenshots, and ornamental clutter. Typography should be readable on a phone; use a locally available/system sans-serif fallback. STORY BEATS 1. 0.0–2.2s — Open on a legible, oversized MAKE. Its letter masks unfold into an asymmetric graphic composition, with one cobalt shape acting as the focal point. 2. 2.2–4.6s — Carry that focal point through a controlled depth shift as the letter geometry rearranges into MOVE. Preserve visual continuity; do not dissolve between unrelated title cards. 3. 4.6–7.0s — Settle MOVE into a strong editorial poster. Hold it long enough to read, then return its geometry to the opening MAKE framing for a clean loop. Use a restrained number of elements and clear entrances/exits. Give each scene one focal action, strong scale contrast, and enough hold time to read. Don't add a voiceover or music unless I ask. All on-screen copy must be spelled exactly as written above; don't invent claims, metrics, or UI labels. IMPLEMENTATION AND REVIEW - First inspect the local HyperFrames docs/examples and state which timeline registration pattern you will follow. Then implement the smallest complete project. - After writing it, check that all elements remain inside the safe area, that the composition is exactly 210 frames at 30 fps, and that scene boundaries meet exactly. - Use the installed tools' documented preview/check/render commands only. Inspect frames at 0.0, 0.8, 2.19, 2.2, 3.4, 4.59, 4.6, 5.8, and 6.97 seconds, plus the final frame. If you cannot capture frames with the installed version, tell me how to inspect them manually; don't fabricate review results. - Seek to 2.40s twice in separate preview/render passes and compare the images. They must match. If the toolchain cannot test that, explain how I can check it and mark it unverified in REVIEW.md. - Report the files created, the commands actually run, whether preview/render succeeded, and any unverified checks. Do not describe an unrendered composition as a finished video. ``` ## Critique prompt After previewing the composition or its contact sheet, paste this separately: ```text Review this 7-second vertical composition as a motion designer and a phone viewer. Inspect the actual rendered frames/contact sheet, not just the source code. Check: first-frame clarity, text safe areas and readability, timing at each scene boundary, whether independent captures at 2.40s match, visual hierarchy, transition continuity, loop seam, and whether the art direction feels original rather than like generic AI-tech UI. List the three most consequential defects with timestamps and evidence. Separate definite defects from taste preferences. Do not edit files yet; ask me which revisions to apply. ``` ## Revision prompts Choose one change at a time so you can see its effect: - `At 0.0–0.5s, make the first visual read faster at phone size. Change only the opening; keep duration and later scene boundaries fixed.` - `The title feels crowded at 2.2s. Improve its scale and whitespace without changing the palette, copy, safe margins, or scene timing.` - `The transition into scene 3 feels abrupt. Add one visual bridge while preserving the exact 4.6s boundary and the final hold.` - `Recheck deterministic seeking after this edit: request 2.40s twice and compare. Keep the animation time-based; don't add playback state or wall-clock animation.` ## What to offer with “Comment SETUP” The shared hub features this guide and a downloadable, runnable Codex-built reference project. The prompt above is a separate starting point for a new Claude Code project. Don't promise that it has been tested with Claude or that it will produce a particular result.