A collection of high-quality animation effects and interactive components for Next.js - designed by Hyperiux.
50+ effects are free and open source. 100+ pro effects are available with a Pro subscription. The CLI installs source code directly into your project - you own what you install.
 npx hyperiux add phantom-image-trail |
 npx hyperiux add milky-way |
 npx hyperiux add spider-particles |
 npx hyperiux add immersive-full-screen-nav |
npx hyperiux initnpx hyperiux add rectangular-text-revealimport RectangularTextReveal from "@/components/effects/rectangular-text-reveal";
export default function Page() {
return <RectangularTextReveal>Hello, world.</RectangularTextReveal>;
}| Command | Description |
|---|---|
npx hyperiux init |
Initialize config in your project |
npx hyperiux add <effect> |
Add an effect to your project |
npx hyperiux list |
List all available effects |
npx hyperiux login |
Connect your Pro account |
npx hyperiux logout |
Remove saved credentials |
npx hyperiux whoami |
Show login status |
--overwrite- overwrite existing files--yes- skip confirmation prompts--dry-run- preview without writing files
50+ free effects - install without any account:
npx hyperiux add rotation-slider
npx hyperiux add spider-particles
npx hyperiux add phantom-image-trail100+ pro effects - require a Pro subscription:
npx hyperiux login # authenticate once
npx hyperiux add grid-tunnelScroll-driven animations built on GSAP ScrollTrigger - parallax galleries, pinned sequences, horizontal storytelling, stacking cards, and more.
sticky-content-wrapper · horizontal-feature-reveal · infinite-perspective-slider · parallax-slider · rotation-slider · text-convergence · scroll-distortion · +more
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 · +more
Pointer-following image and pixel effects for expressive cursor interactions.
phantom-image-trail · pixelated-image-effect
Animated loading indicators for numeric, stacked, and motion-heavy states.
numeric-tunnel · stack-loader
Menus and navbars with desktop and mobile interaction patterns.
directional-menu · elevate-navbar · immersive-full-screen-nav
Scroll-driven animations built on GSAP ScrollTrigger - pinned sequences, perspective sliders, split canvases, and content reveals.
circular-split-roll · horizontal-feature-reveal · infinite-perspective-slider · rotation-slider · split-canvas · sticky-content-wrapper · text-convergence
Letter-level and line-level reveal animations - blur, scramble, stagger, perspective flip, mask wipe.
blur-text · rectangular-text-reveal · text-fill-animation · scramble-text · +more
Page and section transitions built from animated grids and block-based motion.
block-transition · chess-grid-transition
Three.js, R3F, and shader-driven effects for frosted glass, image reveal, and particle galaxies.
fractal-glass · interactive-blur-reveal · milky-way
hyperiux.json is created at your project root by init:
{
"$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"
}
}| Variable | Purpose |
|---|---|
HYPERIUX_TOKEN |
Use a CLI token without saving it locally (useful in CI) |
HYPERIUX_APP_URL |
Override the Hyperiux app URL for self-hosting or testing |
HYPERIUX_API_URL |
Override the API URL independently of the app URL |
HYPERIUX_REGISTRY_URL |
Override the registry URL for local development |
HYPERIUX_DEBUG |
Set to 1 to enable verbose request logs - do not use in shared CI |
This is a pnpm monorepo with Turborepo:
packages/cli-npx hyperiuxCLI tool, published to npm ashyperiuxpackages/mcp-server- MCP (Model Context Protocol) server that lets AI clients (Claude, Cursor, etc.) browse and install Vault effects; published ashyperiux-mcp-server(not yet published to npm as of this writing - see packages/mcp-server for local usage)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 (public/r/index.json) lists all effects with metadata - pro file contents are not publicly accessible.
packages/mcp-server isn't on npm yet, so point your MCP client at a local build instead of npx:
pnpm --filter hyperiux-mcp-server buildThen add it to your client's MCP config using an absolute path to the built entrypoint:
{
"mcpServers": {
"hyperiux": {
"command": "node",
"args": ["/absolute/path/to/hyperiux-components/packages/mcp-server/dist/index.js"]
}
}
}See packages/mcp-server/README.md for the full tool list and Pro-effect auth behavior. npm publishing is future work, not the current install path.
Found a bug or want to contribute a free effect? Pull requests are welcome.
git clone https://github.com/Hyperiux-Immersion-Labs/hyperiux-components
cd hyperiux-components
pnpm install
pnpm devTo add a new free effect, follow the Adding a New Effect checklist in CLAUDE.md.
- Node.js 18+
- Next.js (App Router)
- Tailwind CSS
| 🌐 Agency | hyperiux.com |
| 🎨 UI Library | vault.hyperiux.com |
| 💻 GitHub | github.com/Hyperiux-Immersion-Labs |
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.