Vector Vesper is a motion system for React. It gives you editable components for the visible work, a shared runtime for coordinating live interactions, and tools that make the workflow repeatable in a real codebase.
The CLI copies component source into your project. You can read it, edit it, theme it, and ship it as your own code. There is no UI wrapper between your project and the component.
What you get
- Components for WebGL, 3D, scroll, typography, transitions, and interaction.
- A motion runtime, open source and built for WebGL and 3D scenes first, that shares one frame loop, input layer, and performance budget across effects.
- A CLI for adding, inspecting, updating, and removing component source.
- An MCP server that helps you and your coding agent build components of your own on the runtime: which primitive fits, how to wire it, and a check of what you wrote.
Add your first component in seconds
npx vectorvesper init
npx vectorvesper add video-cardimport { VideoCard } from "@/components/vv/video-card";
export default function Page() {
return <VideoCard src="/clip.mp4" />;
}The CLI detects your framework, copies the source into @/components/vv/, installs any dependencies, and prints the import line. From there, the component is part of your codebase.
Components and Pro access
The component catalogue includes free and Pro components. Both install as editable source. Sign in through the CLI when you need access to a Pro component; the rest of the workflow stays the same.
Requirements
VV requires React 18+, Node.js 18+, and works with Next.js (App Router) or Vite. See the Installation guide for details.
Next step
Head to Installation to set up the CLI, or jump straight to the components.