Hyperiux Vault

A collection of high-quality animation effects and interactive components for Next.js - designed by Hyperiux.

150+ effects in total - 50+ free and open source, 100+ pro effects available with a Pro subscription. The CLI installs source code directly into your project - you own what you install.

Quick Start

1. Initialize

bashCopy code
npx hyperiux init

2. Add a free effect

bashCopy code
npx hyperiux add rectangular-text-reveal

3. Use it

jsxCopy code
import RectangularTextReveal from "@/components/effects/rectangular-text-reveal";

export default function Page() {
  return <RectangularTextReveal>Hello, world.</RectangularTextReveal>;
}

CLI Commands

Options for add

• --overwrite - overwrite existing files
• --yes - skip confirmation prompts
• --dry-run - preview without writing files

Free vs Pro

50+ free effects - install without any account:

bashCopy code
npx hyperiux add rotation-slider
npx hyperiux add spider-particles
npx hyperiux add phantom-image-trail

100+ pro effects - require a Pro subscription:

bashCopy code
npx hyperiux login       # authenticate once
npx hyperiux add grid-tunnel

Browse all effects →

Effects

Text

Letter-level and line-level reveal animations - blur, scramble, stagger, perspective flip, mask wipe.

rectangular-text-reveal · blur-text · text-fill-animation · scramble-text · +more

Backgrounds

Ambient canvas and particle backgrounds that sit behind content without competing for attention.

dot-transition · dotted-grid · spider-particles

Buttons

Interactive button treatments - fill sweeps, metallic sheens, shiny highlights, and scramble-on-hover text.

arrow-fill-button · link-button · metallic-button · scramble-link-button · shiny-button

Carousels

Slider and carousel patterns beyond a plain swipe - arc paths, 3D flips, parallax strips, and zoom transitions.

arc-flow-carousel · dimensional-switch-slider · ellipse-carousel · orbit-flip-slider · +more

Scroll

Scroll-driven animations built on GSAP ScrollTrigger - parallax galleries, pinned sequences, horizontal storytelling, and stacking cards.

sticky-content-wrapper · horizontal-feature-reveal · infinite-perspective-slider · rotation-slider · circular-split-roll · split-canvas · +more

Components

Small, self-contained UI pieces - accordions, counters, timelines, and hover-driven lists.

animated-faq · border-beam · gooey-counter · gsap-flip-card · +more

Navigation

Menus and navbars with desktop and mobile interaction patterns.

directional-menu · elevate-navbar · immersive-full-screen-nav

Cursor

Canvas 2D and Three.js cursor effects - image trails, rope followers, liquid glass, character grids.

phantom-image-trail · pixelated-image-effect · liquid-glass-cursor · magnetic-image-trail · character-trail · rope-cursor · +more

Transitions

Page and section transitions built from animated grids and block-based motion.

block-transition · chess-grid-transition

Loaders

Animated loading indicators for numeric, stacked, and motion-heavy states.

numeric-tunnel · stack-loader

WebGL

Three.js and R3F scenes with custom GLSL shaders - image carousels, pixel grids, frosted glass, GPU particle galaxies, and 3D heroes.

interactive-blur-reveal · mouse-pixelation · grid-tunnel · draggable-canvas · milky-way · fractal-glass

Browse all →

Configuration

hyperiux.json is created at your project root by init:

jsonCopy code
{
  "$schema": "https://vault.hyperiux.com/schema.json",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css"
  },
  "aliases": {
    "components": "@/components",
    "effects": "@/components/effects",
    "hooks": "@/hooks",
    "lib": "@/lib"
  }
}

Environment Variables

Architecture

This is a pnpm monorepo with Turborepo:

• packages/cli - npx hyperiux CLI tool, published to npm as hyperiux
• packages/mcp-server - MCP (Model Context Protocol) server that lets AI clients (Claude, Cursor, etc.) browse and install Vault effects; published to npm as hyperiux-mcp-server
• registry/effects - Free effect source, organized by category

Pro effect source lives in a private repository and is served via a protected API. The registry index (registry/index.json) lists all effects with metadata - pro file contents are not publicly accessible.

Running the MCP server

Add it to your client's MCP config via npx:

jsonCopy code
{
  "mcpServers": {
    "hyperiux": {
      "command": "npx",
      "args": ["-y", "hyperiux-mcp-server"]
    }
  }
}

Contributing to the server itself? Point your MCP client at a local build instead - see packages/mcp-server.

See packages/mcp-server/README.md for the full tool list and Pro-effect auth behavior.

Contributing

Found a bug or want to contribute a free effect? Pull requests are welcome.

bashCopy code
git clone https://github.com/Hyperiux-Immersion-Labs/hyperiux-components
cd hyperiux-components
pnpm install
pnpm dev

To add a new free effect, follow the Adding a New Effect checklist in CLAUDE.md.

Requirements

• Node.js 18+
• Next.js (App Router)
• Tailwind CSS

Connect

License

The hyperiux CLI and the hyperiux-mcp-server are licensed under the MIT License. Free effects installed through the CLI are provided under the Hyperiux Effects License. Pro effects require an active Hyperiux Pro subscription and are proprietary - not open source, not redistributable.