Hey, it's Cindy 🌱 You commented motion, so here is the open-source HyperFrames setup and the prompt for a reusable branded motion library.
btw the waitlist for AI System Club is now open! If you're keen on using AI to automate your content, video editing, job search, business or build AI agents, feel free to sign up (only if you want to hehe). Ps. the waitlist gets first dibs:)
the outcome
What you get
A working HyperFrames project, four reusable branded motion components, a preview, a validation pass, and an MP4 render.
Use the guide in order. Gather the real inputs, run the prompts against those inputs, inspect the evidence, then make one reviewable change at a time.
start here
Set it up step by step
Install Node.js 22 or newer and FFmpeg. Check both from the terminal before starting.
Install the official HyperFrames skills with npx skills add heygen-com/hyperframes.
Ask your coding agent to use /hyperframes and create a project from the brand brief below.
Run npx hyperframes check, then preview the composition. Fix validation and visual issues before rendering.
Render the final MP4 and keep the source project as your reusable library.
copy these
The prompts
Build the branded motion library
📋 copy this
Using /hyperframes, create a reusable vertical 1080 by 1920 motion-graphics library for my brand. Brand system: cream #FAF7F2 background, Claude orange #D97757 accent, Averia serif headings, Poppins body, Kindergarten-style handwritten accents, subtle paper grain. Build four separate editable compositions: a number counter, a bar chart that accepts JSON data, a word-by-word text reveal, and a two-second logo sting. Use deterministic, seekable animation; do not rely on wall-clock timers. Keep text inside safe margins, add one restrained sound on each reveal, include reduced-motion-friendly easing choices, and give every tunable value a clearly named variable. Validate every composition, capture review frames at the start, middle, and end, then render MP4 previews and report the exact commands and output paths.
check the work
Quality gate before you trust it
1 Node.js and FFmpeg meet the current project requirements.
2 npx hyperframes check passes before any final render.
3 The first, middle, and last review frames are visually correct.
4 Charts use the supplied data and labels, not invented demo numbers.
5 Fonts, colours, safe margins, and sound cues match the brand brief.
6 Save the source links, as-of date, and final evidence beside the output so another person can reproduce the check.
Guardrail. Open source does not mean every third-party font, photo, clip, or sound is cleared for commercial use. Keep asset licences with the project, and review the rendered output frame by frame before publishing.
keep it useful
Save the evidence with the workflow
Save the prompt with the source links and the date you verified them. When the tool, policy, price, interface, or documentation changes, update the guide before you reuse the workflow. Keep the inputs and outputs beside the project so the next run can be checked instead of reconstructed from memory.
the waitlist is now open
AI System Club is launching soon
Build AI systems with me through recorded lessons you can follow at your own pace. Join the waitlist for first access and the founding price.
btw this list gets first dibs the moment doors open :)