Loading
Loading

Build the Interaction Layer Your Website is Missing.

Browse the EffectsBrowse the EffectsBrowse the EffectsUpgrade to ProUpgrade to ProUpgrade to Pro

50+ effects free, forever. No credit card.

© 2026 Hyperiux. All rights reserved. · Vault is built by Hyperiux · Small motion. Big signal.

Platform

Vault

  • Documentation
  • Pricing
  • NPM
  • MCP

Categories

  • All Effects
  • WebGL
  • Text
  • Backgrounds
  • Buttons
  • Carousels
  • Scroll
  • Components
  • Navigation
  • Cursor
  • Transitions
  • Loaders

Documents

  • Introduction
  • Installation
  • CLI
  • Dependencies
  • License

Legal

  • License Agreement
  • Terms of Service
  • Privacy Policy
  • Refund Policy
Socials
  • Twitter / X
  • LinkedIn
  • GitHub
  • Instagram
Contact Us
  • hello@hyperiux.com
New effects, in your inbox.

Every new drop, plus the occasional behind-the-scenes build. No spam. Unsubscribe anytime.

SubscribeSubscribe
HyperiuxHyperiux
All EffectsTemplatesPricingBlogGithubNPMMCP
All Effects
Featured ComponentsText AnimationsAnimated BackgroundsAnimated ButtonsCarousel EffectsScroll EffectsCreative ComponentsNavigationsCursor EffectsTransitionsLoadersWebGL & 3D Effects
Templates
IntroductionInstallationCLIDependenciesLicense
PricingBlogGithubNPMMCP Doc
Home/effects

Hyperiux Vault Effects

150+ production-ready interaction effects for React & Next.js. Browse scroll systems, cursor effects, WebGL scenes, buttons, and transitions. Preview live, then copy or install with the CLI.

Trending

Text Animations
Pixel Text Fill

Pixel Text Fill

Backgrounds
Spider Particles Background

Spider Particles Background

Buttons
Arrow Fill Button

Arrow Fill Button

Carousels
Orbit Flip Slider

Orbit Flip Slider

Scroll Effects
Horizontal Feature Reveal

Horizontal Feature Reveal

Components
Infinite Grid Gallery

Infinite Grid Gallery

Navigation
Expanding Navbar

Expanding Navbar

Cursor Effects
Liquid Glass Cursor

Liquid Glass Cursor

Page Transitions
Aperture Transition

Aperture Transition

Loaders
Lines Loader

Lines Loader

Webgl Effects
Donut Particles

Donut Particles

TextBackgroundsButtonsCarouselsScrollComponentsNavigationCursorTransitionsLoadersWebGL

Layout

GSAP Flip Card
GSAP

GSAP Flip Card

Components

3
Parallax Strip Slider
Gsap

Parallax Strip Slider

Carousels

4
Information Drawer
GSAPLenis

Information Drawer

Components

2
Stack Spread
Motion

Stack Spread

Scroll Effects

4
Shiny Button

Shiny Button

Buttons

4
Timeline
GSAPLenis

Timeline

Components

3
Dotted Trail

Dotted Trail

Cursor Effects

2
Metallic Button
Lucide React

Metallic Button

Buttons

1
Spotlight Button
CSS
Pro

Spotlight Button

Buttons

1
Donut Particles
Three.js@react Three/fiber
Pro

Donut Particles

Webgl Effects

2
Liquid Glass Cursor
GSAP

Liquid Glass Cursor

Cursor Effects

4
Globe
Lucide ReactGSAP
Pro

Globe

Components

1
Displacement Navbar
GSAP
Pro

Displacement Navbar

Navigation

1
Unfold Navbar
GSAP
Pro

Unfold Navbar

Navigation

1
Morphing Dock
GSAP
Pro

Morphing Dock

Navigation

2
File Encryption
GSAP
Pro

File Encryption

Webgl Effects

2
Perspective Shift Menu
GSAP
Pro

Perspective Shift Menu

Navigation

1
Elastic Accordion
Pro

Elastic Accordion

Components

1
Load MoreLoad More

Questions, Answered.

Where should I start if I only know the page needs to feel better?

Start with the page job. If the page needs a stronger story, look at scroll effects. If it needs atmosphere, explore backgrounds or WebGL effects. If it needs better conversion support, review buttons, FAQs, forms, testimonials, and navigation patterns.

When is browsing the full Vault better than choosing a category first?

Use the full catalog when you are still exploring the interaction direction. It helps when the goal is clear, such as “make the hero sharper” or “make the CTA feel better,” but the exact component type is not decided yet.

How do I choose between a subtle effect and a more expressive one?

Choose the effect that improves the section without stealing its job. A quiet background may be better for SaaS copy. A WebGL scene may be right for a launch hero. A cursor effect may suit a portfolio, but not a pricing page. The strongest choice is the one that makes the page clearer, sharper, or more memorable.

How should the catalog handle heavier previews?

Keep the page light. Avoid running many WebGL, canvas, video, or continuous animation previews at once. Use static thumbnails, lazy loading, offscreen pause, and click-to-preview behavior where the effect is too heavy for always-on browsing.

What changes when reduced motion is enabled?

Animated previews should pause or become static. Autoplay, looping motion, cursor trails, WebGL movement, and continuous background effects should not run automatically. The catalog should remain fully browsable without motion.

Are free effects really free for commercial use?

Yes. Free effects are commercial-friendly where marked in the license, so you can ship them on client sites and products without paying.

View MoreView More

Request a Custom Animation

Need a custom effect? Tell us what to create.