beat motion
Generate frame-perfect, beat-synced motion graphics and SaaS demos from HTML/JS code with real motion blur.
Free
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
Manus
Grok
Grok Bot+18 agentsbeat motion
Example session with this skill installed
Create a 15-second 1080x1920 vertical video for a new task app called 'Flow'. Use a 120 BPM beat, brand colors #2D3436 and #0984E3, and show a list morphing into a checkmark.
- Read your context and instructions
- Compiled the beat motion
I have designed the storyboard and motion logic for the 'Flow' task app teaser. The animation uses a 120 BPM grid (0.5s per beat) to drive a continuous transition from a task list UI into a hero checkmark graphic.
Motion Graphic Specification
| Beat | Time | Shot Description | Transition Logic |
|---|---|---|---|
| 1-4 | 0-2s | The Hook: Text "Focus on Flow" scales in. | BM.expOut from scale 0.8 to 1.0. |
| 5-12 | 2-6s | UI Build: Three list items slide in sequence. | BM.clock triggers items at 2s, 3s, 4s. |
| 13-20 | 6-10s | The Morph: List items collapse into a circle. | Shape morph using BM.spring for center gravity. |
| 21-28 | 10-14s | The Payoff: Circle scales up; checkmark draws. | SVG path animation using dashOffset. |
| 29-32 | 14-16s | Outro: Logo appears; background color shift. | Return to frame 1 state for seamless loop. |
// Render Configuration
const config = {
bpm: 120,
width: 1080,
height: 1920,
colors: ['#2D3436', '#0984E3', '#FFFFFF'],
duration: 16 // 8 bars
};
function draw(t) {
const clock = BM.clock(config.bpm);
const progress = t / config.duration;
// Background logic
ctx.fillStyle = BM.lerpColor('#2D3436', '#0984E3', clock.beat(28));
ctx.fillRect(0, 0, innerWidth, innerHeight);
// Animation segments
if (t < 4) {
drawHook(t, clock);
} else if (t < 10) {
drawUI(t, clock);
} else {
drawCheckmark(t, clock);
}
}
Next steps
- Run
bash scripts/setup.sh flow_teaserto initialize the project files and assets. - Execute
python scripts/audio.py --bpm 120 --duration 16 --hits 2,6,10,14to generate the beat track. - Start the render with
python scripts/render.py page.html flow.mp4 --fps 60 --sub 3.
Connects securely to your tools. The creator never sees your data.
About this skill
Generating high-quality video content from code is often slow, prone to visual artifacts, or requires expensive editing software. This skill provides a programmatic pipeline for building beat-synced motion graphics, kinetic typography, and SaaS demos using a deterministic HTML/JavaScript engine that renders to frame-perfect 60fps MP4 with real motion blur.
What it does
- Deterministic Rendering converts time-based HTML/JS animations into MP4 files using a
window.seek(t)mechanism to ensure frame-perfect sync. - Beat-Synced Choreography uses a specialized clock system to schedule transitions, camera moves, and audio hits on specific BPM grids.
- Professional Motion Blending renders subframes for every frame of video to create natural motion blur without using heavy post-processing effects.
- Integrated Audio Pipeline generates synchronized soundtracks with automatic ducking for narration and rhythmic "hits" at scene changes.
- Automated QA generates contact sheets for visual inspection and runs lints to ensure code follows strict motion design rules.
How it works
- Storyboard the sequence into a beat-by-beat table to map out duration, BPM, and transitions.
- Scaffold the project using
setup.shto pull in the motion engine, Chromium, and local font assets. - Develop the animation within a
draw(t)loop, using specific easing functions for physics-based movement. - Process the audio and render the final MP4 using the CLI tools for multi-subframe capture.
Frameworks & tools
The skill utilizes a custom JavaScript motion engine (BM), Chromium for headless rendering, and Python-based CLI utilities for audio synthesis and video encoding. It relies on FFmpeg for final assembly and local Inter font files for consistent typography.
Why this beats prompting it yourself
Writing motion code that stays in sync with audio is mathematically tedious and prone to drift. This skill enforces a "no-cut" transition philosophy and provides the specific subframe rendering logic required to prevent the "ghosting" artifacts common in standard web-to-video captures.
Use cases
- Generate SaaS product teasers with live UI elements instead of static screenshots.
- Create kinetic typography videos for social media that loop perfectly.
- Build data visualization videos where every bar move is locked to a musical beat.
- Produce professional YouTube Shorts and explainer videos from text-based source facts.
Known limitations
Requires local font files as the sandbox lacks internet access for external CDNs. Rendering is compute-intensive: a 15-second video at 60fps with subsampling requires 2,700+ individual captures.
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Agents & Orchestration.
Requires local font files (no external CDNs). Renders are compute-heavy: 15s at 60fps requires ~2,700 captures. No CSS animations/transitions allowed; all movement must be a function of time.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Free to use
No account required to browse
Trust & safety
Security scan
Security scan passed 7 days ago
- Free with an Agensi account
- Software
Python