reezdigital
Automated motion graphics and video assembly pipeline using HTML canvas, Playwright, and ffmpeg for code-driven renders.
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 agentsreezdigital
Example session with this skill installed
Create a 5-second 1080p end card for 'Loopline' (loopline.app) using the brand palette. Include a pulsing CTA 'Start free', a logo draw-on, and a marigold accent. Show me the beat map first.
- Read your context and instructions
- Compiled the reezdigital
I have defined the beat map and motion logic for the Loopline end card. The sequence uses the brand's indigo background with marigold accents and follows a 5-second timeline at 30fps.
Motion Beat Map: Loopline End Card
| Time (s) | Event | Visual Element | Audio Hit |
|---|---|---|---|
| 0.0 - 1.0 | Logo Entrance | Logo draws on using indigo-to-violet path | Low-pass sweep |
| 1.0 - 2.5 | Tagline Wipe | "Loopline" text fades in with 20px upward slide | Soft synth pop |
| 2.5 - 4.5 | CTA Pulse | "Start free" button scales 1.0 to 1.05 at 2Hz | - |
| 4.5 - 5.0 | URL Reveal | loopline.app appears in mint at bottom center | High-mid chime |
Implementation Logic
<!-- scripts/endcard_template.html snippet -->
<script>
const CONFIG = {
brand: 'Loopline',
colors: { bg: '#1B1464', primary: '#5B4BFF', accent: '#FFC83D', text: '#F3F1FF' },
duration: 5,
fps: 30
};
function frame(T, flags) {
ctx.fillStyle = CONFIG.colors.bg;
ctx.fillRect(0, 0, 1920, 1080);
// Logo Draw-on Logic (T: 0-1)
if (T < 1.0) {
const progress = Math.min(T / 1.0, 1);
drawLogo(ctx, 960, 450, progress, CONFIG.colors.primary);
}
// Pulsing CTA (T: 2.5-4.5)
if (T > 2.5 && T < 4.5) {
const scale = 1 + Math.sin((T - 2.5) * Math.PI * 2) * 0.05;
drawButton(ctx, 960, 700, "Start free", scale, CONFIG.colors.accent);
}
}
</script>
Next steps
- Review the beat map for timing adjustments.
- Run
python3 scripts/render_frames.pyto generate the PNG sequence. - Verify the layout using the
scripts/contact_sheet.pyoutput.
Connects securely to your tools. The creator never sees your data.
About this skill
Building motion graphics often requires expensive licenses, heavy local installs, and manual keyframing that breaks when requirements change. This skill provides a code-first pipeline for generating SaaS demos, YouTube assets, and brand films using a headless rendering engine. It replaces GUI-based editing with a predictable, resumable workflow that turns HTML canvas definitions into high-quality MP4 video.
What it does
- Headless rendering generates frames using Playwright and HTML canvas for perfectly repeatable results.
- Beat-mapped assembly aligns visual cuts and UI wipes to audio hits using a structured timing grid.
- Visual QA automation produces contact sheets and keyframe previews to verify layouts before full rendering.
- Smart retiming handles AI-generated clips by applying freeze-holds or speed adjustments to fit specific durations.
- Programmatic audio synthesizes SFX and music beds anchored to the scene timeline.
How it works
- Define the brief by specifying aspect ratios, brand palettes, and verbatim text requirements.
- Generate a beat map to schedule scene transitions, sound hits, and visual appearances.
- Draft the engine using HTML templates to define motion logic for brand elements like logo draws and lower thirds.
- Execute headless render via Python scripts that manage frame extraction and resumable encoding.
- Assemble and verify final clips by joining scenes and validating audio loudness levels.
Frameworks & tools
The pipeline runs on Python, Playwright (Chromium), and ffmpeg. It uses HTML Canvas for graphics logic and numpy for audio synthesis, ensuring it works in environments without node_modules or external network access.
Why this beats prompting it yourself
Generic AI video prompts often produce inconsistent branding and timing. This skill enforces strict brand tokens, exact frame-counts, and programmatic verification, ensuring your logo wipes and CTAs look identical every time you update a demo.
Use cases
- Generate SaaS explainer videos with pulsing CTAs and clean UI wipes.
- Produce YouTube intro/outro packages with consistent brand colors and fonts.
- Assemble multiple AI-generated scenes into a cohesive brand film with captions.
- Create dynamic lower thirds and subscribe widgets for existing video content.
Known limitations
Limited to offline Poppins font weights (Regular, Medium, Bold). Requires ffmpeg and Playwright/Chromium to be pre-installed in the execution environment. High-complexity 3D scenes are not supported.
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Video Skills.
Requires pre-installed ffmpeg and Playwright. Limited to Poppins font weights. No support for external npm package installation during execution.
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 6 days ago
- Free with an Agensi account
- Software
Python