GurYN

Vibe Motion — Design skill for Claude Code

Design community

Vibe Motion is a "Vibe Coding" application for motion design video creation.

How to install Vibe Motion

This entry records only its repository, not the path inside it, so there is no exact command to give. Open GurYN/vibe-motion and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Vibe Motion does

Vibe Motion is a "Vibe Coding" application for motion design video creation. It enables users to create professional videos by describing what they want in natural language, powered by Claude Code (Anthropic's AI coding assistant) and Remotion (React-based programmatic video framework).

Alternatives in Design

Algorithmic Art — Create generative art using p5.js with seeded randomness, flow fields, and particle systems 94.1k ★
Visual Content Pack — Visual content creation skills 1.6k ★
Nothing Design Skill — A Claude Code skill for generating UI in the Nothing design language 1.4k ★

README

Vibe Motion

**AI-Powered Motion Design Video Creation**

Vibe Motion is a "Vibe Coding" application for motion design video creation. It enables users to create professional videos by describing what they want in natural language, powered by **Claude Code** (Anthropic's AI coding assistant) and **Remotion** (React-based programmatic video framework).

[![Demo Video](assets/youtube.png)](https://www.youtube.com/watch?v=fbp8fcgVluM "Demo Video")

Features

**Project Management**
- Create, edit, and delete projects
- Configurable resolution presets (1080p, 720p, 4K, Square, Portrait, Custom)
- Configurable frame rate (24, 25, 30, 50, 60 fps)
- Project settings dialog
**Integrated Terminal**
- Full terminal emulation with xterm.js
- WebSocket + node-pty for real-time communication
- Claude Code runs in the context of each project's Remotion folder
- Session persistence with output buffer for reconnection
- Auto-start Claude Code when opening a project
**Asset Management**
- Drag-and-drop file upload
- Support for images (PNG, JPG, SVG, GIF, WebP), videos (MP4, WebM, MOV), audio (MP3, WAV, OGG), and fonts (TTF, OTF, WOFF2)
- Thumbnail generation for images and videos
- Original filename preservation
- Copy filename to clipboard for easy use in compositions
**Remotion Studio Integration**
- Auto-start Remotion Studio when opening a project
- Embedded Studio in iframe with full functionality
- Start/stop controls
- Open in new tab option
- Hot reload on file changes
**Video Export**
- Multiple formats: MP4 (H.264/H.265), WebM (VP8/VP9), GIF
- Quality control via CRF value
- Composition selection from project
- Progress tracking with real-time updates
- Export history with download links
**User Interface**
- Dark/Light/System theme modes
- Resizable panels (assets, terminal, preview)
- Responsive layout
- shadcn/ui components with Radix Nova style