React & Next.js Animation Effects Library
100+ copy-paste interaction effects for React & Next.js. Scroll systems, cursor effects, text reveals, page transitions, and WebGL scenes -the moments that make a site feel authored, not assembled. Preview them, install them with the CLI
30+ effects free, forever. No credit card.
Effects
Effects Monthly
WebGL | Three.JS
Free
Motion | GSAP
React.JS | Next.JS
Most websites are not broken. They are forgettable. They use the same sections, the same rhythm, the same static patterns, and the same safe animations everyone else is using.
The difference now lives in the interaction layer: how your page moves, responds, reveals, transitions, and guides attention.
But building that layer from scratch is slow & hard. Good motion needs taste, timing, restraint, performance discipline, cleanup, responsive behavior, mobile fallbacks and reduced-motion support. Most teams either skip it, overdo it, or rebuild the same interaction from scratch for every project.
Anyone can add a fade. The hard part is everything around it: timing, restraint, layout awareness, responsive behavior, reduced-motion support, dependency clarity, and performance discipline. Get it wrong and your "wow moment" janks on mobile, tanks your Lighthouse score, or quietly breaks for the people who turned motion off.
Fixes
Solves
Timing
Precise sequencing that feels intentional, not random.
Drops frames
Restraint
Motion that supports content, not distracts from it.
Motion noise
Reduced-motion
Respects user preferences and accessibility out of the box.
Inaccessible
Performance budget
No jank, no layout jumps, no CLS spikes.
Jank + Drain
Dependency clarity
Lightweight by default. Smooth under pressure
Hidden Bundle
Mobile fallbacks
No mystery bundles or hidden landmines
CLS Spikes
Cleanup on unmount
No leaks, no ghosts, no lingering listeners
Leaks + Ghosts
That difference has a name. It's the interaction layer. Here it is.
amazing_project
app/page.jsx
amazing_project / Components
ui
01
Preview
Browse by the moment you need: a sharper scroll, a cursor with presence, a cleaner transition. See exactly what it does before it touches your project.
02
Install
Use the Hyperiux CLI to add only the effect you need. Vault adds only the files that effect needs, not a full interaction circus. You can inspect and own the implementation.
03
Tune
Edit copy, layout, timing, easing, breakpoints, hover states, mobile fallbacks, and reduced-motion behavior to match your brand and product.
04
Ship
Deploy a website that feels sharper, more responsive, and more memorable, without rebuilding every interaction from scratch.
Creative Front-End Developers
Stop rebuilding the same scroll reveal, text animation, cursor trail, and transition from scratch. Start from production-ready source and shape it to your project.
Startup Founders & Product Teams
Make your launch page feel more premium without hiring a full motion team. Use Vault to speed up build cycles, and raise perceived product quality.
Agencies & Freelancers
Move faster on client websites while keeping the work custom. Use Vault as a starting point for high-end interaction systems, then adapt the code for each brand while saving hours of custom motion work on each project.
CTOs & CPOs
Get the creative benefit of premium motion without committing to an opaque dependency. Source-first code, clear stack choices, and a workflow your developers can own.
Marketing Teams
Upgrade the moments that affect perception: hero sections, campaign pages, product storytelling, proof sections, and final CTAs.
The free core stays free, forever. Pro unlocks everything and every new drop.
Free
$0
Forever
For trying real effects in real projects.
30+ production-ready effects
Copy-paste + CLI install
Commercial-friendly usage
Code you own
Monthly
Yearly
Pro
$012345678901234567890123456789
Yearly
3 Months Free
For developers, founders, and agencies shipping premium work.
All 100+ effects
New effects added regularly.
Priority access to upcoming packs
Hyperiux CLI install + auth
Dependency, performance & reduced-motion notes per effect
Code you own, commercial-friendly
Instant access · npx hyperiux login · Cancel anytime
Cancel anytime. The free core stays free forever. Every effect lives in your repo. So even if you leave, your code stays.
The Vault is a public slice of how Hyperiux thinks about interaction design - the same discipline behind premium websites, product experiences, and immersive digital systems. When a copy-paste effect isn’t enough, we’ll design and build the moment from scratch.
Copy the code. Tune the motion. Ship the moment.
