oil-oil/oil-motion

Chinese · English

Oil Motion is a universal interactive animation skill for agents. It is responsible for designing movements, generating continuous frames, organizing animation resources, and integrating the final effect into page scrolling, mouse, drag, touch, or device orientation.

When using it, you only need to specify what you want to express, which assets to provide, and what actions the animation should follow. Specific generation, check, compression, and frontend implementation are handled by the Agent.

Demonstration

https://github.com/user-attachments/assets/08e26ad6-ca23-4f31-ac53-44c7692ba99d

Installation

Give the repository address to the Agent:

You can also install it with commands, and after completion, have the Agent reload the skill:

Applicable Boundaries

Suitable for interactive animations where the subject itself needs to change: character turning, product disassembly, material changes, camera transitions, or organizing existing green screen videos and Sprite images into webpage resources that can be controlled by control.

Interface transitions, button feedback, and layout animations that can be completed solely with CSS, JS, SVG, Lottie, or real-time 3D can be handled directly by ordinary frontends, without needing this material workflow. Independent video editing and single image placement are also excluded.

Animation suitable for implementation

• When scrolling down: The product gradually unfolds into a blast image, the camera enters the internal structure, or switches between several states.
• When scrolling through multiple scenes: Use multiple continuous video segments to create a continuous continuous take, such as advancing from a city panorama all the way inside the chip, or using a foreground obstruction or a similarly shaped object to transition to the next scene.
• When the mouse moves: the character’s face is always facing the screen, with the gaze following the cursor; or the hardware product drags along to rotate the booth 360°.
• When dragging progress: The animation follows gestures to move forward, backward, or stop at a designated position.
• On mobile phones: Use touch or device tilts to control the orientation and level of the subject.
• When clicking, hovering, or changing status: Play the corresponding action transition; if you reverse the action, withdraw from the current screen.
• When no action: Maintains natural micro-movements or loops, with users switching to follow input as soon as they start.

These animations can be used for product introductions, character interactions, operation demonstrations, data changes, and chapter transitions. Oil Motion simultaneously handles motion coherence, image clarity, loading volume, and mobile performance.

Working Principle

AI-generated videos need to be organized into a stable timeline, then control methods are selected based on the interaction goals: input values can continuously correspond to animation progress, only trigger a normal playback transition, or let the animation play autonomously according to time. Scrolling, mouse, and status switching are only input sources and do not directly determine playback mode.

The full process is as follows:

This process is divided into three parts.

First, check the key screen

Key images are the exact states that must be maintained during the action, such as product completeness, part unfolding, and final disassembly. The agent will create and inspect these images, confirming that the subject’s identity, structure, logo, composition, and style remain unchanged.

If you directly generate the entire video, the model may change the product structure, character proportions, or action endpoints during the process. Confirming key shots first allows continuous actions to have clear starting points, processes, and endpoints.