Loading

Loading

Build the Interaction Layer Your Website is Missing.

Browse the EffectsBrowse the EffectsBrowse the Effects Upgrade 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.

Email

SubscribeSubscribe

All EffectsTemplatesPricing Github NPM MCP

Loading

Displacement Navbar

Home/effects/navigation/displacement navbar

Displacement Navbar

A navbar shelf revealed by displacing the page beneath it, not overlaying it — GSAP-driven with a full reduced-motion fallback.

gsap

Live PreviewLive PreviewLive Preview

Displacement Navbar

Live PreviewLive PreviewLive Preview

Related Effects

Explore all effectsExplore all effectsExplore all effects

Unfold Navbar

Unfold Navbar

Navigation

Morphing Dock

Morphing Dock

Navigation

Expanding Navbar

GSAPLucide React

Expanding Navbar

Navigation

Side Navbar

Side Navbar

Navigation

Immersive Full-Screen Navigation

Immersive Full-Screen Navigation

Navigation

Explore all effectsExplore all effectsExplore all effects

All Effects Templates

Featured Components Text Animations Animated Backgrounds Animated Buttons Carousel Effects Scroll Effects Creative Components Navigations Cursor Effects Transitions Loaders WebGL & 3D Effects

Introduction Installation CLI Dependencies License

Github NPM MCP Doc