Vibe Motion

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).

[](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

Tech Stack

Layer	Technology