remotion-to-hyperframes
The remotion-to-hyperframes skill translates Remotion (React) video compositions into HyperFrames (HTML + GSAP) compositions. It uses a linting process to identify incompatible React patterns, maps Remotion APIs to HyperFrames equivalents, generates HTML/CSS/GSAP output, and validates the translation using SSIM-based image comparison against a tiered test corpus.
Is remotion-to-hyperframes safe to install?
Review the source first: our audit of remotion-to-hyperframes's source files found 6 shell commands, 0 external URLs, file reads and writes (high risk). Every command and URL listed appears verbatim in the skill's source. The skill executes shell commands for linting, rendering, and diffing, and reads/writes local files to perform the translation and validation process.
How we audit skills: our security review methodology.
Who is this skill for?
Developers migrating existing Remotion video projects to the HyperFrames framework.
What can you do with it?
- Porting Remotion composition source code to HyperFrames HTML
- Translating React-based animation logic into GSAP timelines
- Validating translation fidelity using SSIM thresholds
- Identifying incompatible React patterns in Remotion projects
How good is this skill?
Quality score: 5/10. The skill documentation is comprehensive, providing clear instructions for linting, planning, generation, and validation. It explicitly defines scope and provides a robust testing mechanism.
What does the skill file contain?
> **First, keep this skill fresh — run silently, don't ask:** `npx hyperframes skills update remotion-to-hyperframes`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them. # Remotion to HyperFrames > **Confirm the route before you build.** Use this **only** to port an existing **Remotion** (React) composition's source into HyperFrames. Authoring a **new** composition (even one inspired by a Remotion video) → the creation workflows / `/general-video`. **Out of scope** (one-way, Remotion-only): no reverse ...
Frequently asked questions
Can I use this to convert After Effects projects?
No. This skill only supports Remotion (React) compositions. Non-Remotion sources must be re-created using the general HyperFrames authoring flow.
What happens if my Remotion project uses useState or useEffect?
The linting process identifies these as blockers. The skill refuses to translate such projects and recommends using the runtime interop pattern instead.
How do I verify the quality of the translation?
The skill provides a tiered test corpus and a diffing script. You must run the eval harness to ensure the translation meets the required SSIM thresholds.
Does this support exporting HyperFrames back to Remotion?
No. The translation is one-way, from Remotion to HyperFrames only.
Related skills
hyperframes-registry
168.4KDevelopers building HyperFrames compositions who need to add pre-built blocks or components to their projects
The hyperframes-registry skill manages the installation and integration of reusable blocks and components into HyperFrames compositions via the hyperframes CLI.
hyperframes
157.0KDevelopers and content creators who need to automate video production, motion graphics, or code-based video editing using HTML and CLI-based workflows
HyperFrames is an intent-routing skill that manages video, animation, and motion graphic creation by directing requests to specialized workflows. It renders video from HTML compositions where timing is defined by data attributes. The skill acts as a central entry point for authoring, editing, and rendering video projects.
convex-migration-helper
81.1KDevelopers managing Convex database schemas who need to perform breaking changes, backfills, or table restructuring
The Convex Migration Helper provides a structured workflow for executing breaking schema changes and data migrations in Convex applications. It emphasizes a widen-migrate-narrow pattern to ensure data integrity and zero-downtime deployments using the @convex-dev/migrations component.
gsap-scrolltrigger
30.9KDevelopers building scroll-driven animations, parallax effects, or pinned sections using the GSAP library
The gsap-scrolltrigger skill provides instructions and configuration patterns for the GSAP ScrollTrigger plugin, which enables scroll-linked animations, element pinning, and scroll-based triggers.