Motion with a runtime underneath.
Production-ready components, as source you own. Most are powered by an open-source runtime that coordinates every frame, sheds non-essential work under load, and recovers from lost WebGL contexts. Built to hold its frame rate across a wide range of devices.
Drop the context.
See which one comes back.
Two identical scenes. The left one mounts a canvas the way most code does. The right one goes through useSceneGate. On your machine, with nothing going wrong, you cannot tell them apart, which is why this ships.
Scroll the page and the left one keeps drawing frames nobody can see, on a battery nobody agreed to spend. Take the graphics context away and it goes black for good, with nothing in the console. A driver reset does that, so does a backgrounded tab, or a browser reclaiming a context it is holding. The buttons under the scenes do both: 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.
Most pages animate blind. Every effect runs its own loop, nothing knows what the frame cost, and when one goes over budget they all degrade together. Four governors answer four questions each frame: what the page is doing (SensorBus), when work runs (FrameConductor), what it cost (AnimationBudget), and at what quality (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.
- A second scene
Below a hero that never stops drawing, a scene waiting for an idle frame took 4.5–7.5 seconds to appear. On a throttled CPU it never did.
The hero stops drawing off screen, and the scene below it arrived in 0.8 seconds.
- Quality changes
A scene rebuilt from its quality setting recreates the renderer on every change. Under GPU pressure one page went from 3 graphics contexts to 7 in twenty seconds.
Quality is applied to the renderer already running. Nothing is torn down and rebuilt.
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 for good.
Both rebuild. Drawing again 0.6s later.
- Battery burnoffscreen
120 draws a second into a canvas nobody could see, long after it was scrolled past.
0 draws while off screen.
- An 8fps heropressure
A hero that copied one line, dpr: 2, onto a 1x screen ran at 8–12 fps.
About 20 fps. The pixel ratio never exceeds the screen.
- Dead on the sixth visitchurn
9 graphics contexts left behind after six visits. Browsers cap them, and the hero is dropped first.
0 left behind, and check_motion catches it in review.
ai devs 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. This is the other. Point any coding agent at the MCP server and it works the whole loop on components you write yourself: decide which primitive the job needs (or that plain CSS does it), read the contract (client boundary, transform ownership, what conflicts with what), write the file, then check it against 21 rules that type checking cannot see. Ask for a 3D hero and it hands back a whole starting file, with the scene gate, the pixel-ratio cap, context-loss recovery and cleanup already wired. Free, on any codebase, whether or not you ever buy a vv component.
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. When the 200 are gone, this doesn't come back.
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 component library for React and a motion runtime underneath it. The components are WebGL, canvas and scroll-driven pieces you install into your own codebase and own outright. The runtime is what keeps them from fighting each other for the frame: one shared loop, one quality decision, and recovery when the browser takes a graphics context away.
The free components and the whole runtime, both open source, plus the CLI and the MCP server. No account, no card, no trial. Install with npx vectorvesper add and keep them.
The complete Pro catalogue, everything released while your subscription is active, and the Pixel Library. Pro is $119 a year, which is under $10 a month billed annually. Launch pricing is grandfathered: whatever you pay today is what you keep paying while you stay subscribed.
One payment of $199 for everything, permanently, including every component added later. There are 200 seats and they are not restocked. It exists because early buyers take a risk on an unproven library, and this is what that is worth.
React 18 or newer and Node 18 or newer. That is the whole requirement. The runtime has no dependencies of its own and every peer is optional, so you only install Three.js and React Three Fiber if you use a component that renders 3D. Next.js and Vite both work.
No. Every component is a React component with typed props, and the defaults are the version you would have tuned to anyway. The GLSL is included and commented if you want to change it, and nothing breaks if you never open it.
The components use it, so it comes with them. You do not have to build anything on it yourself. If you do, it is open source and works on its own: the frame loop, the sensors and the governors are usable without installing a single component.
It is built for WebGL and 3D first, because that is where a lost context, an uncapped pixel ratio or a scene drawing off screen costs the most. It is not only for them: the same scheduler runs scroll, pointer and canvas work, and the catalogue covers page transitions, scroll-driven typography, SVG animation and physics-based interactions.
Yes, and that is a deliberate part of it. The CLI ships an MCP server that helps Claude, Cursor or Copilot build components of your own on the runtime: which primitive fits what you are building, how to wire it, and when the answer is plain CSS instead. It also carries a checker that reads motion code for the mistakes that pass type checking and drop frames anyway. In the lab, 13 of 16 pages built by an agent with nothing but that server came through every test, and the checker flagged all three that did not.
Yes. A good part of the catalogue ships a Framer version you add with a Remix link, on both tiers. Look for the Framer badge in the catalogue. The Pixel Library adds a Framer code component covering all 31 pattern modes; its 11 text modes and 8 image modes are React-only.
One licence per developer. Use the components in unlimited client projects and commercial products, with no credit needed in your product, your site, or your credits. The one thing we ask is that the licence header stays in the source file it came in.
They are included. Pro covers everything released while your subscription is active, and a founding seat covers everything, permanently. There is no upgrade to buy when the catalogue grows.
Every component you have installed is already in your codebase and keeps working. You stop receiving new releases and lose access to the download route, and you keep access until the end of the period you have paid for.
Digital sales are final. Every component has a live interactive preview and twelve of them are free to install, so please try before you buy.