Motion with a runtime underneath.
Premium 3D and motion components, added with one command as source you own. Most run on our open-source runtime, which pauses them off screen, turns quality down on slower devices and brings the 3D back if the browser drops it.
Drop the context.
See which one comes back.
Two identical WebGL scenes. The unmanaged implementation mounts a standard canvas loop with no lifecycle supervision. The right one executes through useSceneGate. Under nominal conditions with no GPU faults, their visual output appears identical.
Scrolling offscreen causes unmanaged canvases to maintain active requestAnimationFrame loops, consuming GPU compute and battery budget indefinitely. When a WebGL context loss occurs, triggered by driver resets, background tab eviction, or a browser reclaiming a context it is holding, it goes black for good, with nothing in the console. The interactive controls below simulate both conditions: Off-Screen and Drop Context.
This section obeys its own argument: it is gated by the hook it demonstrates, so nothing above here mounted a canvas until you scrolled to it.
The system underneath
every interaction
The runtime is open source, has no dependencies, and every peer is optional. It was built for WebGL and three.js scenes first, where a missed frame or a lost context costs the most.
Standard web applications lack centralized frame budget arbitration. Independent visual components execute isolated requestAnimationFrame loops, causing uncoordinated DOM layout thrashing and compounding frame drops under GPU load. Four runtime subsystems coordinate execution each frame: input phase synchronization (SensorBus), unified frame lane scheduling (FrameConductor), real-time budget scoring (AnimationBudget), and hardware-aware fidelity scaling (AdaptiveQuality).
- Frame cost
A layout read in the write lane forces a recalculation every frame. On one page it cost about 46ms.
Reads and writes run in separate lanes. On that page the runtime's own work measured 2.4ms.
- Secondary Scene Gating
An unmanaged hero running continuous render loops starves downstream scenes waiting for main-thread idle windows, causing 4.5s to 7.5s mounting delays or starvation on throttled CPUs.
Viewport gating suspends offscreen hero loops, allowing downstream scenes to resolve mount conditions within 0.8 seconds.
- Adaptive Resolution
Tying resolution changes to component remounts recreates WebGLRenderer instances per adjustment, triggering rapid context exhaustion (up to 7 concurrent contexts in 20 seconds).
Dynamic DPR and shadow map scalars are applied in-place to active renderers without unmounting canvases or cycling GPU contexts.
npm i @vectorvesper/motionEvery hook below is documented with what it guarantees, what it conflicts with, and when not to use it.
One set of pointer, scroll and viewport listeners for the whole page.
useSensorBus()Docs↗The one requestAnimationFrame loop for the page, with a scheduler inside.
getConductor()Docs↗A live quality tier from measured frame health, so effects can shed themselves.
useAnimationBudget()Docs↗Names which of three unrelated things is eating the frame, and how sure it is.
useFramePressure()Docs↗Device capability, live frame health and the reduced-motion preference, fused into one quality signal.
useAdaptiveQuality()Docs↗Notices a lost graphics context and counts a generation to remount on.
getRendererHealth()Docs↗Hold an expensive mount until the main thread can actually absorb it.
useSafeToMount()Docs↗Run a callback every frame from a React component, on the shared loop.
useTick(lane, fn)Docs↗One policy for a heavy scene or section: when to mount, whether to draw, at what quality, and how to recover.
useSceneGate({ cost })Docs↗A plain three.js scene in one call: you build the scene, it does the rest.
useThreeScene({ build })Docs↗Turns a scene gate's verdict into props for a canvas.
useRenderQuality(state)Docs↗We break it
before your users do
We build every release as a real site and run it through our lab on Chrome and Safari's engine, desktop and mobile. We take the graphics context away mid-scroll, scroll the page off screen, load it under pressure and turn reduced motion on. Then we do it again with pages a fresh AI agent wrote using nothing but our MCP server.
Everything in the report below is a problem we found in our own code, with what it cost and what it does now. Two of them were on this page.
- problems we found and fixed
- 13
- probes on every page
- 11
- browser engines
- 2
- device profiles
- 3
- Black canvasreset
A second GPU reset, a tenth of a second after the first, left the scene black permanently.
Both rebuild. Drawing again 0.6s later.
- Battery burnoffscreen
120Hz continuous frame draws inside unmanaged canvases positioned fully outside the active viewport.
0 draws while off screen.
- An 8fps heropressure
Hardcoded dpr: 2 configurations on standard 1x displays quadrupled pixel fill rates, dropping throughput to 8 to 12 fps.
About 20 fps. The pixel ratio never exceeds the screen.
- Dead on the sixth visitchurn
Unreleased WebGL contexts accumulated across client-side route transitions, exceeding browser context limits and evicting primary canvases.
0 left behind, and check_motion catches it in review.
Autonomous Agent Evaluation We gave 16 fresh agents nothing but our MCP server and asked each one for a 3D page. 13 came through every probe, and check_motion flagged all 3 that did not.
The same pass runs before every release, and nothing ships while it is red. Most of what we sell runs on this runtime, so every fix above sits underneath the components you install.
Build your own components
on the same runtime.
The runtime is open source, and our components are one way to use it. Integrating our MCP server enables AI agents to scaffold and verify custom animation architectures. The MCP server provides automated primitive selection, contract inspection (boundary semantics, transform pipelines, execution phases), code generation, and static validation via check_motion's 21 lint rules. Prompts for Three.js viewports generate complete implementations pre-configured with useSceneGate, hardware DPR limits, context restoration handlers, and unmount disposals.
Describes what it is building, in the words you used.
claude · cursor · windsurfDocs↗Which primitive fits, how to wire it, and a review of the file that comes out.
Copies a component's source and its dependencies into your project.
Real TypeScript you own outright, with no wrapper between it and your project.
@/components/vvDocs↗Every component's motion contract, readable before anything lands in the project.
get_componentDocs↗Reads what was written for the problems that compile cleanly and still ship a bad page.
check_motionDocs↗The library
keeps moving.
The most recent additions to the catalogue. Each one installs with a single command and lands in your project as source, with its props documented.
Ghost Typewriter
A keyboard taken apart in mid-air. The headline types itself and the keycaps press as it goes.
npx vectorvesper add ghost-typewriter- Ghost Typewriter20 Aug
- Jigsaw Puzzle20 Aug
- Lookbook20 Aug
- Trail Collector20 Aug
- Glow Tile20 Aug
- Wind Scatter20 Aug
- Heart Stream20 Aug
- Play Pause20 Aug
- Prism Testimonial20 Aug
- Repel Me Text20 Aug
- Field Web20 Aug
- Ribbon Text16 Aug
- Tilt Transition16 Aug
A good part of the catalogue also ships a Framer version. Look for the Framer badge on a card, then Remix it straight onto your canvas.
Choose your
starting point
The whole toolchain is free to start. Upgrade to Pro for the full catalogue or claim a lifetime founding seat.
The full Pro catalogue, and every release after it. New components land monthly and are included. No upgrade, no extra cost.
Start free
The whole toolchain, and components to build with.
npx vectorvesper addPro
The full catalogue. New components land as they ship.
Founding membership
Everything, forever, for one payment. Strictly capped at 200 founding seats with no subsequent allocation.
More from VV
Pixel Library is also available as a standalone for React and Framer.
Pixel Library
Three core components containing over 50 specific effect modes powered by a single configuration object. Use the simple prop API to build interactive surfaces, pixelated typography, and generative image effects natively in JSX.
Frequently Asked Questions
Everything you need to know about licensing, stack compatibility, and the runtime.
A production motion library for React backed by an integrated animation runtime. Components encompass WebGL shaders, Three.js viewports, canvas simulations, and scroll-driven interactions that install directly into your repository. The runtime coordinates execution across all active visual elements via a shared frame conductor loop, centralized GPU pressure arbitration, and automated context loss recovery.
All 12 open-source core components, the complete motion runtime engine (@vectorvesper/motion), the vectorvesper CLI, and the Model Context Protocol (MCP) server. No credit card, account registration, or trial period is required. Components are installed locally via npx vectorvesper add <component>.
Access to the complete Pro catalogue (over 30 advanced WebGL, 3D, and physics components), all subsequent component releases during an active subscription, and the full Pixel Library (40+ pattern generators, interactive presets, and shaders). Pro is $119/year (billed annually). Subscriptions include grandfathered renewal rate protection for active accounts.
A one-time lifetime license of $199 providing perpetual access to current and future catalog releases, the Pixel Library, and CLI updates with no recurring subscription fees. Capped strictly at 200 founding seats.
React 18+ (including React 19) and Node.js 18+. The @vectorvesper/motion runtime ships zero external dependencies and declares all graphics packages as optional peer dependencies. You only install three or @react-three/fiber when implementing 3D scenes. Fully supported across Next.js (App and Pages router), Vite, Remix, Astro, and standard React build chains.
No. All components export standard React interfaces with strongly typed props and calibrated default visual parameters. Uncompiled GLSL fragment/vertex shaders and Three.js materials are embedded directly within component source files for optional customization, requiring no manual shader authoring for production use.
Vector Vesper components automatically import their required primitives from @vectorvesper/motion. You do not need to author runtime hooks manually unless developing custom motion architectures. The runtime is standalone and open source: developers can utilize its frame conductor, viewport gates, adaptive quality controllers, and sensor buses independently of the UI component library.
The catalogue spans WebGL shaders, Three.js viewports, Canvas 2D simulations, DOM scroll-linked typography, spring physics, and SVG path animations. While optimized for GPU lifecycle stability (handling context loss, DPR caps, and offscreen culling), the underlying scheduler unifies DOM layout reads, pointer tracking, and scroll updates across non-WebGL components as well.
Yes. Vector Vesper includes an integrated Model Context Protocol (MCP) server compatible with Claude Desktop, Cursor, and agentic IDE extensions. The MCP server exposes plan_motion for deterministic architecture selection and check_motion for AST-based linting. The linter flags runtime performance regressions that static TypeScript compilers permit, including unthrottled frame loops, layout thrashing in render lanes, uncapped DPR scalars, and unhandled WebGL/WebGPU context loss.
Yes. Key components in the catalogue feature dedicated Framer editions deployable directly via Framer Remix URLs across both Free and Pro tiers. In addition, the Pixel Library ships a dedicated Framer code component carrying all 50 effects: the 31 procedural patterns plus text and image modes.
A commercial, royalty-free license per developer seat. You may integrate components into unlimited commercial client deliverables, SaaS products, and personal websites without public attribution. The copyright notice and license header must remain intact within source files.
New releases are incorporated into your registry feed automatically. Active Pro subscriptions grant instant CLI download access to all new components shipped during the subscription period. Founding members receive perpetual access to all current and future releases.
Components previously installed via the CLI reside directly in your repository and remain functional indefinitely. Cancelling a subscription prevents automatic renewal at the end of the billing term and terminates access to new component downloads and CLI package updates once the active term concludes.
All digital sales are final. Because components are provisioned as uncompiled local source code, returns cannot be processed once access is granted. We provide full interactive demos, prop specifications, and a 12-component open-source tier for evaluation prior to purchase.