newton motion studio

    1

    A code-driven motion graphics pipeline for rendering branded videos and AI clip assemblies using HTML Canvas and ffmpeg.

    Free

    5 uses5.0 (1 review)

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIDeepSeekDeepSeekMuseMuse+22 more

    newton motion studio

    Example session with this skill installed

    I need a 10-second 16:9 YouTube intro for a brand called 'DataFlow'. Use a dark theme with blue accents. I have 3 clips of server racks to include. Create a beat map first.

    • Read your context and instructions
    • Compiled the newton motion studio

    I have analyzed the project requirements for the 'DataFlow' intro. The environment check confirms ffmpeg and Poppins fonts are available. I will use the engine_template.html to build the motion sequence and assemble_scenes.py to integrate your server rack clips.

    Motion Project Plan: DataFlow Intro

    SceneStartEndVisual ElementAudio Hit
    Logo Draw0.0s2.5sVector logo wipes in with #5B4BFF glowLow synth swell
    Clip 12.5s5.0sServer rack clip (Retimed: asis)Rhythmic pulse
    Clip 25.0s7.5sServer rack clip (Retimed: asis)Rhythmic pulse
    Clip 3 + Text7.5s10.0sFinal clip + 'DataFlow' text overlayFinal impact

    I have prepared the initial configuration for the render engine using the NewTon violet-to-pink gradient logic, adapted for your blue brand preference.

    
# scripts/render_config.json
{
  "project_name": "dataflow_intro",
  "resolution": [1920, 1080],
  "fps": 30,
  "brand": {
    "name": "DataFlow",
    "primary": "#1B1464",
    "accent": "#5B4BFF",
    "background": "#0B0B16"
  },
  "scenes": [
    {"type": "template", "id": "intro_wipe", "duration": 2.5},
    {"type": "user_clip", "path": "clip1.mp4", "mode": "asis"},
    {"type": "user_clip", "path": "clip2.mp4", "mode": "asis"},
    {"type": "user_clip", "path": "clip3.mp4", "mode": "hold", "overlay": "DataFlow"}
  ]
}

    Next steps

    1. Review the beat map above for timing alignment.
    2. Confirm the blue hex codes (#1B1464, #5B4BFF) match your brand.
    3. I will proceed to render 6 preview stills for your visual approval.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Building high-quality motion graphics shouldn't require manual keyframing or expensive GUI software that breaks in CI/CD. This skill provides a code-first pipeline to generate SaaS demos, intros, and explainer videos using a headless rendering engine.

    What it does

    • Headless Frame Rendering Generates frame-perfect motion graphics using HTML5 Canvas and Playwright.
    • Scene Retiming Adjusts user-supplied AI clips using speed ramping or frame-holding to fit specific beat maps.
    • Automated QA Produces contact sheets of keyframes for visual inspection before committing to full renders.
    • Resumable Processing Handles long renders via detached background processes that can resume from the last successful frame.
    • Audio Synthesis Generates beat-synced SFX and music beds programmatically to match visual transitions.

    How it works

    1. Intake & Mapping Define the project duration, aspect ratio, and brand tokens to generate a frame-accurate beat map.
    2. Environment Audit Checks local ffmpeg encoders, CPU cores, and available system fonts like Poppins.
    3. Template Configuration Edits engine_template.html or endcard_template.html to inject brand-specific logic and animations.
    4. Staged Rendering Renders preview stills for approval, then executes a detached full-sequence render.
    5. Assembly Joins scenes, applies retiming logic, and overlays synthesized audio into a final MP4.

    Frameworks & tools

    Built for environments with Python, Playwright, Chromium, and ffmpeg. It uses a lightweight HTML Canvas engine for animation, avoiding heavy Node.js dependencies like Remotion.

    Why this beats prompting it yourself

    Prompting an AI to "make a video" usually results in temporal inconsistency and lack of brand control. This skill treats motion as code, ensuring that every frame is reproducible, editable at the pixel level via CSS/Canvas, and perfectly synced to a millisecond-level beat map.

    Use cases

    • Generating branded YouTube intros, outros, and lower-thirds for consistent channel identity.
    • Assembling AI-generated b-roll into a cohesive product explainer with text overlays.
    • Building dynamic end cards with pulsing CTAs and logo draw-on animations.
    • Creating high-volume social media clips in vertical 9:16 format for Shorts or TikTok.

    Known limitations

    Requires pre-installed Playwright and ffmpeg. Offline only, so it cannot fetch external assets or npm packages during execution. Limited to Poppins font family weights 400, 500, and 700.

    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 Playwright and ffmpeg pre-installed. No network access for npm/external assets. Font support limited to Poppins (400, 500, 700). Rendering is CPU-intensive.

    How to use

    1. 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. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 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

    5.0
    1 review
    5
    1
    4
    0
    3
    0
    2
    0
    1
    0

    This skill has been used 5 times.

    Trust & safety

    Security scan

    Security scan passed 6 days ago

    • Free with an Agensi account

    Software
    Python

    Permissions

    Terminal / Shell
    Browser
    Read Files
    Write Files
    Listed6 days ago

    What's inside

    Frequently Asked Questions

    Newton Motion Studio is a headless rendering engine that uses code (HTML Canvas) instead of manual keyframing. It solves the issue of visual inconsistency in AI video by providing precise control over branding, timing, and overlays that typical AI video prompts cannot achieve.

    The skill requires a Python environment with Playwright (Chromium) and ffmpeg pre-installed. It is designed to work as a standalone pipeline or can be integrated into custom AI agent workflows that support Python-based execution.

    You receive the core rendering engine, a set of customizable HTML/CSS templates for intros and endcards, and the logic for scene retiming and audio synthesis. It also includes the automated QA utility for generating keyframe contact sheets.

    Yes, the tool is designed for CI/CD and headless environments. Because it uses detached background processes and resumable rendering, it can handle high-volume video production on a server without manual intervention.

    Currently, the engine is optimized for the Poppins font family (weights 400, 500, 700) and local assets. It operates offline to ensure rendering stability, meaning all branding assets and video clips must be available locally on the system.

    If a long-form render is interrupted by a system crash or timeout, the skill's resumable processing logic allows it to detect the last successfully rendered frame and restart from that point rather than beginning the entire sequence again.

    New in Image & Video

    Free