Animate a product image so it unfolds or transforms as a visitor scrolls the page
Make a character or product image turn to naturally follow the mouse cursor
Create a drag-controlled progress animation tied to a slider or handle
Build touch or device-orientation driven animations for a mobile web page
| oil-oil/oil-motion | wxyhgk/retain-pdf | bigdawnghost/wenyi | |
|---|---|---|---|
| Stars | 1,668 | 1,654 | 1,647 |
| Language | Python | Python | Python |
| Setup difficulty | moderate | easy | moderate |
| Complexity | 3/5 | 3/5 | 3/5 |
| Audience | developer | researcher | developer |
Figures from each repo's GitHub metadata at analysis time.
Requires configuring an API key for AI video generation the first time an animation is created.
Oil Motion is a skill for AI agents that designs and generates smooth, continuous animation sequences and wires them into a webpage so the animation responds to scrolling, mouse movement, dragging, touch, or device orientation. To use it, you describe what you want to express, provide the source images, and say what user action should drive the animation. The agent handles the actual generation, checking, compression, and front end implementation. The kinds of animation it is built for include a product gradually unfolding or changing state as a page scrolls, a character or product turning naturally to follow the mouse, an animation tracking forward and backward as a user drags a progress bar, and touch or device orientation control on mobile. These effects are meant for product showcases, character interactions, demos, data visualization, and section transitions. Because an AI generated video can only play from start to finish in one direction, Oil Motion first generates a continuous stretch of motion and then maps the user's action to a position within that animation. For example, if a product unfolding animation has 100 frames total, scrolling to 30% shows frame 30 and scrolling to 70% shows frame 70, scrolling backward moves through the same frames in reverse. Mouse, drag, and device orientation inputs are mapped the same way, just with a different input source. The process happens in three stages. First, the agent confirms key frames, meaning it generates and checks a few critical states, like the product intact, halfway unfolded, and fully unfolded, to make sure the subject's identity, structure, logo, composition, and style stay consistent. Second, it generates the continuous motion between those confirmed key frames using AI video generation, while movement speed, cropping, and playback direction stay under program control rather than needing the video model regenerated. Third, it processes the resulting video into a controllable web resource, trimming any lead in or lead out, removing near duplicate frames, catching flicker or structural changes, and compressing based on how large the animation actually displays on the page. Oil Motion automatically chooses between an image sequence in WebP format or a green screen keyed MP4 video depending on animation size, length, access pattern, and device budget, without requiring the user to understand the technical tradeoffs. It is released under the MIT license.
Oil Motion is an AI agent skill that generates smooth animation sequences from images and wires them to page scroll, mouse, drag, or touch input.
Mainly Python. The stack also includes Python, WebGL, WebP.
MIT license: use, modify, and share freely, including commercially, as long as you keep the copyright notice.
Setup difficulty is rated moderate, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Don't trust strangers blindly. Verify against the repo.