HyperFrames Render Engine
Render dynamic HTML and GSAP animations into MP4, WebM, MOV, or GIF video files.
$49
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsHyperFrames Render Engine
Example session with this skill installed
Create a 5-second vertical 1080x1920 video named promo.mp4. Use a dark background with a centered H1 that says Summer Sale, fades in, scales up, and then fades out using GSAP.
- Read your context and instructions
- Compiled the hyperframes render engine
- Generated the image
Render complete
The HyperFrames Render Engine generated a temporary composition and exported the requested video.
| Parameter | Value |
|---|---|
| Output | promo.mp4 |
| Format | MP4 |
| Resolution | 1080 × 1920 (vertical) |
| Duration | 5 seconds |
| Content | Centered Summer Sale heading |
| Animation | GSAP fade-in, scale-up, and fade-out |
| Workspace | Temporary isolated build directory |
| Status | Completed |
Composition steps
- The request parameters were read from
MANUS_SKILL_ARGS. - The renderer generated an
index.htmlcomposition with the requested dimensions and duration. - The GSAP timeline was registered on
window.__timelinesand connected to the composition root. - HyperFrames rendered the timeline to
promo.mp4. - The temporary workspace was removed after rendering.
Next steps
Preview the exported file from the output directory. To create another variant, change the HTML, CSS, duration, dimensions, output filename, or GSAP logic and run the skill again.
index.html
PNG · 1536×1024
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
HyperFrames Render Engine is a Node.js skill for creating programmatic videos from HTML, CSS, and GSAP animation logic. It builds a temporary composition, registers the required HyperFrames timeline metadata, installs the rendering dependencies, and exports the finished video through the HyperFrames CLI.
What it does
- Accepts dynamic HTML, CSS, text, canvas dimensions, duration, output filename, and GSAP timeline logic through MANUS_SKILL_ARGS.
- Supports vertical, landscape, and square compositions by setting width and height explicitly.
- Creates an isolated temporary workspace for each render and removes it after completion.
- Maps common output extensions to MP4, WebM, MOV, or GIF rendering formats.
- Saves the final file to MANUS_OUTPUT_DIR or the default downloads directory.
Best for
Social video prototypes, kinetic typography, product demos, data-driven motion graphics, and repeatable HTML-based video generation where a deterministic script is more useful than manual timeline editing.
Updates and support
The paid listing includes ongoing compatibility updates when the underlying HyperFrames workflow changes, plus creator support for installation and common rendering issues. Support does not include custom video production or bespoke application development.
Requirements and limitations
Requires a Node.js environment with network access to install dependencies and load the GSAP CDN asset. Rendering time and output quality depend on the composition complexity and available system resources. The skill is a renderer and scaffold; it does not provide stock footage, voice-over, music, or a visual editor.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scanned
Verified clean 5 days ago
- Passed all security checks, Safe to install
Requires
Node.js