Introduction
Effects for the parts of your site that people actually remember.
Hyperiux Vault is a library of creative interaction patterns for React and Next.js websites: scroll effects, cursor systems, text animations, page transitions, WebGL scenes, navigation patterns, backgrounds, buttons, and microinteractions.
It is not another UI kit.
Vault sits beside your design system as the interaction layer: preview an effect, install it with the CLI, tune the code in your project, and ship the moment.
npx hyperiux init
npx hyperiux add scroll-stackBuilt for React and Next.js developers, creative frontend engineers, design engineers, agencies, product teams, and anyone building websites that need to feel less assembled and more authored.
What is Hyperiux Vault?
Hyperiux Vault is a collection of creative frontend patterns for modern websites.
Most UI libraries help with the expected interface parts:
- buttons
- cards
- forms
- grids
- tabs
- accordions
- layout blocks
Vault works around those parts. It handles the moments where the interface starts to move with intent:
- how a section enters
- how text reveals
- how a cursor reacts
- how a route changes
- how scroll builds rhythm
- how a background adds atmosphere
- how a WebGL scene supports the story
The code is built to be inspected, edited, and adapted inside your project. No black box theatre.
Why Vault Exists
The modern web is painfully efficient at looking the same.
Hero. Logo strip. Feature grid. Testimonial. CTA. Repeat until funded.
That structure works. That is also the problem. The difference often lives in the interaction layer: the scroll moment, the hover detail, the page transition, the tiny piece of motion that makes someone think, “who built this?”
Good motion needs timing, restraint, layout awareness, responsive behavior, reduced-motion support, dependency clarity, and performance discipline.
Vault gives you better starting points for those details. You still tune the final experience. Vault just gets you past the blank file faster.
Copy the code. Tune the motion. Ship the moment.
What’s Inside
Vault is organized by interaction type.
| Category | Use it for |
|---|---|
| Scroll effects | Reveals, sticky stacks, pinned sections, scroll rhythm, paced storytelling |
| Cursor effects | Custom cursors, magnetic targets, trails, hover feedback, desktop interaction detail |
| Text animations | Line reveals, kinetic headings, character motion, masked text, typographic rhythm |
| Page transitions | Route changes, entry states, exit states, layout continuity, page theatre |
| WebGL and 3D effects | Three.js scenes, React Three Fiber moments, shaders, canvas depth, spatial interfaces |
| Navigation patterns | Animated menus, overlays, mega menus, docks, motion-led navigation states |
| Backgrounds | Gradients, particles, canvas layers, ambient motion, atmospheric systems |
| Components | Creative UI sections where layout, interaction, and motion work together |
| Buttons and microinteractions | Hover states, press states, magnetic buttons, small motion with big signal |
Each effect is a starting point, not a cage. Drop in the interaction. Keep the taste.
How Vault Works
Vault follows a simple workflow.
Preview
Browse the effect and see what it does before adding it to your project. Pick by the moment you need: a sharper scroll, a better reveal, a cursor with presence, a cleaner page transition, or a WebGL scene that earns its rent.
Install
Use the CLI to add the selected effect. Vault adds the files needed for that pattern, not a full interaction circus.
Tune
Edit the generated files in your project. Depending on the effect, you can adjust:
- copy
- layout
- styling
- timing
- easing
- duration
- breakpoints
- trigger behavior
- hover states
- mobile fallbacks
- reduced-motion behavior
- dependency-specific settings
Vault gives you the motion structure. You decide how it behaves in the room.
Ship
Test the effect where it will actually live.
A scroll reveal in isolation is a demo. A scroll reveal inside a real page with real content, real images, real devices, and real performance limits is the work.
Using an Effect
After adding an effect, import it from your generated files.
import ScrollStack from "@/components/hyperiux/scroll-stack";
export default function Page() {
return (
<main>
<ScrollStack />
</main>
);
}Built for Modern Frontend Stacks
Vault is built for React and Next.js workflows.
Patterns may use:
- React
- Next.js
- Tailwind CSS
- GSAP
- Motion
- Three.js
- React Three Fiber
- WebGL
- Canvas
- SVG
- CSS
Not every effect uses every tool.
A text reveal should not need a 3D pipeline. A WebGL scene probably will.
Vault keeps patterns modular so you can add the level of interaction the page actually deserves.
Before You Ship
Creative frontend work has tradeoffs.Before shipping an effect, check the implementation notes for:
- required dependencies
- peer dependencies
- client-component requirements
- browser API usage
- animation setup
- canvas, SVG, or WebGL requirements
- mobile behavior
- reduced-motion behavior
- accessibility considerations
- performance notes
This matters in Next.js projects, especially around server components, hydration, dynamic imports, and client-side animation code. If an effect requires GSAP, Motion, Three.js, React Three Fiber, WebGL, or a desktop-first interaction model, the effect page should say so clearly.
No surprise dependencies. Nobody likes those.
When to Use Vault
Use Vault when you need:
- a sharper homepage
- a memorable scroll section
- a stronger product launch page
- a case study with rhythm
- a cursor system with presence
- a transition that feels intentional
- a WebGL moment that supports the story
- a faster starting point for creative frontend work
- code you can inspect, edit, and make yours
Vault works best when your page already knows what it wants to say. It gives the interface something to do when people touch it.
When Not to Use Vault
Do not use Vault when:
- static UI is enough
- performance budgets are too tight
- the effect distracts from the content
- the dependency cost is not worth it
- the team cannot test across devices
- accessibility cannot be handled properly
- you are adding motion because the page feels empty
Animation is not seasoning for weak strategy. Fix the meal first.
Free Core and Licensing
Vault includes a free core of creative interaction patterns. For the free core:
- You can use free effects in personal and commercial projects.
- Agencies can use free effects in client work.
- You can modify generated code inside your own projects.
- You can adapt styling, motion, layout, and behavior.
- Attribution is appreciated, but not required unless stated in the license.
You cannot:
- resell Vault effects as standalone products
- redistribute Vault patterns as a competing library
- package free or paid effects into templates, themes, starters, or resale bundles without permission
- claim original ownership of Vault source patterns
- remove license notices where they are required
Premium effects, Pro packs, templates, bundles, team usage, and implementation support may use separate commercial terms.
Creative freedom is better when legal does not arrive later wearing a helmet.
Built by Hyperiux
Vault is built by Hyperiux as a public library of creative frontend thinking. It is for the details users may not describe, but absolutely feel.
Small motion. Big signal.
