Repolode
Submit
Sunwood-ai-labs

Sunwood-ai-labs/hyperframes-motion-reel-skill

A Claude Code skill that turns a short theme into a beat-synced motion graphics video rendered to MP4 with HyperFrames.

Open-source alternative to:After Effects

View on GitHubWebsite
Stars
143
Forks
21
Open issues
0
Last commit
21 days ago

What is it?

This repository is a Claude Code skill that directs the agent to act as a motion designer and creative coder. Given a short theme, optional images or a voice track, it plans a world, copy, design system and a beat-by-beat timeline, then builds the scenes in HTML, GSAP, SVG and Canvas.

The timing is locked to a 120 BPM, 60 FPS grid, where one beat equals 0.5 seconds or 30 frames. Background music is generated as WAV with Node.js built-ins only, driven by the same beat table as the visuals. Canvas and SVG layers use a pure render(t) function so they can be seeked deterministically.

The skill runs a verification loop of lint, check, snapshot review and render, then spot-checks the final MP4 with ffprobe and ffmpeg. It is a port of remotion-motion-reel built on Apache-2.0 HyperFrames and GSAP, so it avoids the Remotion commercial license.

Key features

  • 01Beat-locked timing on a 120 BPM / 60 FPS grid, with cuts written as beat numbers.
  • 02Generated soundtrack in WAV using only Node.js built-ins, synced to the same beat table.
  • 03Two-layer animation: a paused GSAP timeline plus a seekable render(t) function for Canvas and SVG.
  • 04Shape morphs between scenes instead of cross-fades.
  • 05Deterministic output with a seeded PRNG and no Date.now() or Math.random().
  • 06Lint, check, snapshot and ffmpeg verification before delivery.

Use cases

  • Creating a short showreel or motion teaser from a one-line concept.
  • Producing product launch videos in 16:9, 9:16 or 1:1 formats.
  • Making music-driven motion graphics where visuals follow a set BPM.
  • Generating commercial-friendly video content without paid motion library licenses.

Quick start

  1. 1

    Install the skill by cloning the repository into Claude Code's skills folder

    git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel
  2. 2

    Make sure Node.js (current LTS) with npx, Google Chrome, and ffmpeg/ffprobe on PATH are available

  3. 3

    Run the skill in Claude Code with a short theme

    /hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128

Things to know

  • Requires Claude Code plus separately installed HyperFrames domain skills.
  • Requires Google Chrome and ffmpeg/ffprobe on PATH for rendering and verification.

Topics

#claude-code#motion-graphics#gsap#svg#canvas#video-generation#animation#hyperframes#claude-skill#motion-design

FAQ

What is hyperframes-motion-reel-skill?
A Claude Code skill that turns a short theme into a beat-synced motion graphics video rendered to MP4 with HyperFrames. This repository is a Claude Code skill that directs the agent to act as a motion designer and creative coder. Given a short theme, optional images or a voice track, it plans a world, copy, design system and a beat-by-beat timeline, then builds the scenes in HTML, GSAP, SVG and Canvas.
Is hyperframes-motion-reel-skill free to use? What license does it have?
hyperframes-motion-reel-skill is open source under the MIT license. Check the license terms before using it in commercial products.
Is hyperframes-motion-reel-skill still maintained?
Actively maintained. The last commit to hyperframes-motion-reel-skill was on Sep 29, 2026.
What can I use hyperframes-motion-reel-skill for?
Creating a short showreel or motion teaser from a one-line concept. Producing product launch videos in 16:9, 9:16 or 1:1 formats. Making music-driven motion graphics where visuals follow a set BPM. Generating commercial-friendly video content without paid motion library licenses.
How do I install hyperframes-motion-reel-skill?
Install the skill by cloning the repository into Claude Code's skills folder: git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel Make sure Node.js (current LTS) with npx, Google Chrome, and ffmpeg/ffprobe on PATH are available Run the skill in Claude Code with a short theme: /hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128
Where can I get hyperframes-motion-reel-skill?
The source code and installation instructions are on GitHub: https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects