Hyperiux-Immersion-Labs/hyperiux-components

**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.
npx hyperiux add phantom-image-trail
npx hyperiux add milky-way
npx hyperiux add spider-particles
npx hyperiux add immersive-full-screen-nav
---
Quick Start
1. Initialize
2. Add a free effect
3. Use it
---
CLI Commands
| Command | Description |
|---|---|
| npx hyperiux init | Initialize config in your project |
| npx hyperiux add | 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 |
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:
**100+ pro effects** - require a Pro subscription:
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.