skills.rest
ilya-makarov-dev
ilya-makarov-devCOMMUNITY
Explore all skills by this author →
GitHub

reframe-motion

Select CSS or hyperframes techniques to add motion effects and export HTML or MP4.

15|3|Updated Apr 7, 2026
Search Tags:#CSS#video#animation#transitions#motion#hyperframes
One-click install
npx skills add https://github.com/ilya-makarov-dev/Reframe --skill reframe-motion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reframe-motion
Source: https://github.com/ilya-makarov-dev/Reframe/tree/main/.claude/skills/reframe-motion
Command: npx skills add https://github.com/ilya-makarov-dev/Reframe --skill reframe-motion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

It streamlines the creation and integration of motion and transition effects in design scenes, bridging static design and animated video output.

Core Features & Use Cases

  • Intuitive Animation: Adds entrance, hover, and scroll reveal animations using predefined presets or custom hyperframes compositions.
  • Bridging Static and Video: Manages transitions from simple CSS animations to complex shader effects, enabling scalable motion design workflows.
  • Use Case: A user requests a slide-in hero animation or an audio-synced scene transition; the skill determines the appropriate operation level and either presets in INode-space or raw hyperframes composition for cinematic effects.

Quick Start

Inspect the scene to identify node names, then export animated HTML or MP4 by specifying the desired presets or raw composition parameters accordingly.

Frequently Asked Questions about reframe-motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add motion effects and animations to static design scenes?▼

You can export animated design scenes to HTML or MP4 by inspecting the scene to identify node names and specifying desired presets. The skill handles the transition complexity and renders the output format accordingly.

When should I use CSS animations versus hyperframes compositions for UI motion?▼

Yes, this skill works with design files to add UI motion control. It inspects the scene to identify node names and integrates motion effects directly into your existing design-to-video workflow.

Can I export animated design files to HTML or MP4 for video production?▼

You can export animated design scenes to HTML or MP4 by inspecting the scene to identify node names and specifying desired presets. The skill handles the transition complexity and renders the output format accordingly.

Does this skill support both quick previews and production-ready video exports?▼

Yes, this skill supports both quick previews and production-ready video exports by managing transitions from simple CSS animations to complex shader effects. It scales the motion design workflow according to your output requirements.

How do I create audio-synced scene transitions from static designs?▼

To create audio-synced scene transitions, the skill utilizes raw hyperframes compositions to generate cinematic effects. It scales motion design workflows by determining the appropriate operation level for complex transitions.

Related Skills

Explore More Design & Creative Skills→
2lab-ai2lab-ai

review-motion

Review animation and motion code for compliance with defined standards.

Official
Advanced
PlaidmustachePlaidmustache

hyperframes

Convert HTML video compositions into render-ready MP4/WebM outputs.

Community
Advanced
jallard-007jallard-007

cameras

Coordinate Phaser 4 cameras for viewports, scrolling, and effects.

Community
Advanced
Maccio-huangMaccio-huang

motion-frames

Generate looped motion design compositions using HTML and CSS.

Community
Intermediate