Your React site can pass review and still feel assembled. Your dialog works. The spacing is consistent. The hero, feature grid, pricing cards, FAQ and CTA are all present.
The missing piece may not be another component. It may be the code that decides how the page reacts to a pointer, turns scroll into a sequence, bridges a route change, or represents a real wait.
Call that backlog interaction debt: the work between a finished layout and an interaction system tested across devices, input types, motion preferences and performance budgets.
Hyperiux Vault addresses that gap by installing editable cursor, scroll, transition, loader and WebGL source into your project.
Vault sits beside your UI kit
Vault is a source-first library of interaction effects for React and Next.js. Its official catalog lists 115 effects: 32 free and 83 Pro. The catalog includes 16 cursor effects, 22 scroll effects, 6 page transitions, 3 loaders, and 19 WebGL/3D effects.
A larger catalog does not automatically mean better code. The counts matter because they reveal the catalog’s priorities.
Use shadcn/ui or your design system for dialogs, inputs, tables, tokens, and component states. Use Vault when the brief needs a cursor trail, a sequenced scroll section, a branded route transition, a loading treatment connected to real application state, or a WebGL scene.
Vault is not a replacement for a UI kit. It supplies pointer tracking, scroll sequencing, route-transition lifecycle work, loader visuals, and WebGL rendering that a foundational component library may not provide.
What “source-first” changes
Vault documents this CLI flow:
npx hyperiux init
npx hyperiux add phantom-image-trail
The CLI adds the selected effect’s files to your project and prompts before installing required dependencies. Depending on the effect, those files can include a React component, hooks, utilities, styles, animation setup, shaders, dependency notes, and usage examples.
That changes the workflow in concrete ways. You can edit a timing curve, pointer threshold, breakpoint, fallback, shader, asset, or DOM structure in the same repository as the rest of the product.
You also inherit the maintenance work. Installed code still needs review, tests, dependency updates, accessibility checks, cleanup verification, and profiling on real devices.
Source access is not the same as unrestricted ownership. Vault’s license documentation permits modification within projects covered by the applicable effect license or Pro plan, while Pro source redistribution and resale are restricted. The accurate promise is local source custody and editability under the applicable license.
Vault adds effect logic and supporting files to your project rather than hiding them behind a hosted component runtime. You should still audit imported packages, example assets, and external URLs before treating an installation as completely self-contained.
The competitor difference is catalog emphasis
“Who has animation?” is the wrong comparison. All four libraries overlap.
shadcn/ui is primarily organized around interface foundations such as dialogs, forms, navigation, tables, and feedback components. Its official component index is not organized around dedicated cursor, route-transition, or WebGL categories. That makes Vault complementary to the core job shadcn/ui performs.
Aceternity UI’s official categories index includes backgrounds, cards, shaders, loaders, 3D components, three entries under “Cursor & Pointer,” and five under “Scroll & Parallax.” As of August 6, 2026, Vault’s official taxonomy lists more cursor and scroll entries.
That does not prove that every Vault effect is better, or that Aceternity cannot implement the same techniques.
Magic UI includes Pointer, Smooth Cursor, Lens, Globe, Scroll Based Velocity, Scroll Progress, particles, beams, and animated backgrounds. Its current primary index does not use dedicated page-transition or loader headings. That is a taxonomy difference, not evidence that the library is incapable of those patterns.
Vault’s strongest defensible position is specific: editable interaction source with a catalog deliberately organized around cursor, scroll, transitions, loaders, and WebGL.
Catalog structure is only positioning. The source reveals whether that distinction survives contact with production.
Five effects and the production questions they expose
Phantom Image Trail
Phantom Image Trail leaves images behind pointer movement. The current public example detects coarse pointers and reduced-motion preferences, but its reduced-motion branch displays a notice instead of stopping the trail.
That is not a sufficient production fallback. Before shipping, disable or substantially simplify the animation, preserve native pointer meaning and focus visibility, keep the layer below controls and modals, and ensure no important content depends on hovering.
Source access matters here because the fallback is yours to inspect and fix.
Scroll Distortion
Scroll Distortion uses GSAP, Lenis, and Three.js to warp selected visuals during scroll.
It provides an existing implementation of scroll coordination, rendering logic, responsive behavior, and cleanup that your team can inspect and modify. Keep text and controls outside the distorted surface, reduce the effect on mobile, and avoid it on reading-heavy or utility pages.
Pixel Transition
Pixel Transition turns route changes into a pixel-grid dissolve. The documented version is Next.js App Router only, requires next-transition-router, and does not work in plain React or the Pages Router.
Use it only where a brief transition supports the brand. Keep it fast, restore focus after navigation, avoid artificial delay, and provide an instant or restrained reduced-motion path.
Numeric Tunnel Loader
Numeric Tunnel Loader uses GSAP, React Three Fiber, Drei, and Three.js. The public example advances its percentage with a local timer.
For production, replace that timer with real progress or use an indeterminate state. Add aria-busy, concise status text, and a reduced-motion alternative. A branded loader is useful only when it represents work that is actually happening.
Grid Tunnel
Grid Tunnel is a continuous React Three Fiber scene built around a vanishing-point grid.
Its official guidance recommends capping device pixel ratio, pausing offscreen and in hidden tabs, keeping meaningful content in HTML, and switching to a poster when the scene cannot maintain frame rate.
Local scene access is valuable here, but a mid-range phone reveals more about production readiness than a desktop preview.
When Vault is the right recommendation
Choose Vault when your project already has interface foundations and needs a specific interaction system whose pointer logic, scroll sequencing, route lifecycle, loading state, or rendering setup would otherwise start from a blank file.
Skip heavy effects when speed-to-action matters more than atmosphere. Dashboards, checkout, documentation, dense forms, and frequently navigated product flows often benefit from less choreography, not more.
An effect earns its place when it improves comprehension, feedback, hierarchy, or brand expression enough to justify its accessibility, performance, and maintenance costs.
A low-risk way to evaluate Vault is to browse the catalog, choose an effect marked free, install it, place it inside a real page, and test it with real content, keyboard navigation, reduced motion, touch input, and a mid-range phone.
Start with one interaction that earns its place. Then decide whether the rest of the page needs more.
Top comments (0)