https://github.com/vibe-motion/skills
agent skills for vibe motion
https://github.com/vibe-motion/skills
agent skills vibe-coding vibe-motion
Last synced: 18 days ago
JSON representation
agent skills for vibe motion
- Host: GitHub
- URL: https://github.com/vibe-motion/skills
- Owner: vibe-motion
- Created: 2026-03-17T17:29:31.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2026-10-05T15:06:13.000Z (about 1 month ago)
- Last Synced: 2026-10-17T10:49:12.740Z (20 days ago)
- Topics: agent, skills, vibe-coding, vibe-motion
- Language: Python
- Homepage:
- Size: 60.3 MB
- Stars: 1,367
- Watchers: 2
- Forks: 84
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
Awesome Lists containing this project
- awesome-agent-skills - vibe-motion/skills - Agent skills for Vibe Motion workflows. (Diagram and Visual Skills)
- awesome-claude-video-skills - vibe-motion/skills - 1.5k (🧱 Frameworks & toolkits)
README
> [!IMPORTANT]
> This project is no longer maintained. Please visit [motionface.cc](https://motionface.cc).
简体中文 | English
## Installation
```bash
npx skills add vibe-motion/skills
```
> Note: This is an interactive installer. Use `Space` to select skills (installing all is recommended), and make sure to choose the target agent (for example, Claude Code), since different agents use different skill directories.
## Available Skills
### ruler-progress-render
Creates a ruler progress animation. Trigger keyword: 尺子进度动画; supports configurable parameters such as text and progress.
### claude-typer
Converts prompt text into a Claude Code CLI typing animation demo.
### fisheye-motion
Creates a screen-photo style fisheye effect: barrel distortion + moire interference + vignette, with a Remotion video output that pushes focus onto a target region and slides in a yellow highlight. The skill guides cloning the [fisheye-motion](https://github.com/vibe-motion/fisheye-motion) project and rendering with custom parameters.
### procedural-fish-render
Generates a loop-friendly procedural fish animation.
### pixel2motion
Turns PNG/JPG/WebP/screenshot logos into clean, low-complexity, motion-ready SVG, then generates branded logo motion, interactive HTML demos, GIF/video previews, and motion QA evidence. Useful for logo animation, SVG logo reveal, brand motion delivery, and pixel-to-vector-to-motion workflows.
### brand-launch-video-star
Creates fast, high-impact 15–30 second brand and product marketing films from an official company website, verified brand sources, or user-uploaded product imagery. It verifies logos, fonts, colors, imagery, and product claims before designing the story, frame timeline, and real product demonstration. Defaults to English, 16:9, and 15 seconds, with custom durations and formats supported.
Useful for AI/SaaS launches, website motion films, consumer campaigns, physical products, services, and company concept films.
```text
Use $brand-launch-video-star to create a 15-second 16:9 English launch film
for https://example.com. Use authentic official assets, demonstrate the core
product workflow, and keep the pacing fast, visually bold, and smooth.
```
**Burger King — Flame Shift**
**Moonshot AI — Product Hypercut**
### remotion-candlestick
Creates animated financial candlestick charts in Remotion, covering Yahoo Finance data acquisition, frame-driven Canvas rendering, a dark trading-terminal style, timeline design, Studio previews, and final renders.
### light-spotlight-render
Generates a swinging spotlight text-reveal HTML animation with configurable text, swing range, lamp scale, glow, and background color.
### printed-curtain-render
Weaves PNG, JPEG, or WebP artwork and optional text into an interactive p5.js strand-curtain simulation. The print is baked into material coordinates, so it stretches, folds, and separates with the individual threads. Output is an offline-capable HTML directory with live physics controls.
The curtain engine is adapted from Jason Labbe's Dynamic ropes 2 under CC BY-SA 4.0.
### remotion-3d-ticker
Creates an infinite 3D vertical scrolling photo wall/ticker animation in Remotion. Configurable image columns, scroll direction, and speed.
### remotion-vinyl-player
Creates an elegant, realistic Vinyl Record Player animation in Remotion. Features infinite record rotation, seamless marquee text scrolling for long titles, and customizable album art.
### threejs-earth-render
Clones or updates `vibe-motion/threejs-earth` and renders a Three.js 3D Earth route animation with Puppeteer. Useful for globe flight arcs, city-to-city transitions, and 16:9 Earth GIF/MP4 exports.
### 3d-chladni-render
Clones or updates `nolangz/3D-Chladni` and uses its deterministic exporter to create 3D Chladni particle MP4 or transparent ProRes MOV output. Supports Dynamic Sand, Modal Sand, Cosmic Web, Dynamic Cosmic, audio-driven motion, particle density, lighting, rotation, and reproducible seeds.
Preview media: 3D Chladni media by Lykno, licensed under CC BY-NC 4.0.
### wechat-2d-render
Clones or updates `sxhzju/wechat-2d` and renders the default WeChat-style 2D chat motion video. Useful for WeChat chat animation, video-message bubble motion, and transparent Remotion exports.
### disney-animation-rule-skill
Applies Disney's 12 animation principles as practical design and engineering rules for procedural animation. Use when creating, improving, reviewing, or debugging code-driven motion in web, SVG, canvas, React, Remotion, game, UI, character, camera, or 3D scenes — especially when motion feels stiff, weightless, mechanical, unclear, or physically correct but visually weak.
### colorize
A black-and-white to color reveal: mono gradient sweep + motion blur + Tyndall spin focus. The frame starts monochrome and spun, color sweeps in from the left, the spin settles from the center outward, and a soft glow remains. Works on images, videos, iPhone Live Photos (HEIC/JPG + MOV) and Android motion photos; several inputs can be joined into one clip. Standalone repo: [vibe-motion/colorize](https://github.com/vibe-motion/colorize).
## Contributing
Compress every GIF before opening a PR. Each GIF must be smaller than 1 MB (1,000,000 bytes), and should ideally be no larger than 250 KB (250,000 bytes). Reduce preview dimensions, frame rate, and palette size as needed; before submitting, verify that the full duration, loop, key text, and main subject remain legible.
## Misc
### Fish School Simulation
A Three.js boids fish school simulation project. This is a standalone project, not a skill.
Project: [vibe-motion/threejs-boids](https://github.com/vibe-motion/threejs-boids)
## Community Group
The WeChat group has reached 200 members and can no longer be joined via QR code. Please add my WeChat and I'll manually invite you to the group.
TG group: t.me/zjucat
## Star History
[](https://star-history.dera.page/#vibe-motion/skills&Date)