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 phantom-image-trail

Built 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.

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 an entire animation framework.

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 PhantomImageTrail from "@/components/phantom-image-trail";

export default function Page() {
  const images = [
    { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-11.jpg", alt: "Gradient 1" },
    { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-12.jpg", alt: "Gradient 2" },
    { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-13.jpg", alt: "Gradient 3" },
    { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-14.jpg", alt: "Gradient 4" },
    { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-15.jpg", alt: "Gradient 5" },
    { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-01.jpg", alt: "Gradient 6" },
    { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-02.jpg", alt: "Gradient 7" },
  ];
  return (
    <div className="relative h-screen w-screen bg-[#f8fdfe]">
      <PhantomImageTrail
        images={images}
        enableRotation={true}
        idleSpawn={false}
        idleDelay={300}
        cursorOffsetX={-12}
        cursorOffsetY={-12}
        popOutDuration={0.8}
        fadeOutDuration={0.5}
        idlePopOutMultiplier={2.2}
        idleFadeMultiplier={1.8}
        imageMultiplier={3}
      />
    </div>
  );
}

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.