Morph Nav
A floating frosted glass navigation bar with glowing pulse brand icon, magnetic indicator pill with spring physics that glides under hovered links, and an interactive action button.
- 4.3 KB .bexode
- 7 live inputs
- Responsive fit Layout
Use it
The code follows your customizations. Install with npm i exodeui.
import { ExodeUICanvas } from 'exodeui';
// morph-nav.bexode goes in /public (download it below)
export function MorphNav() {
return (
<ExodeUICanvas
src="/morph-nav.bexode"
fit="Layout" // responsive: redraws at any container size
autoPlay
interactive
onTrigger={(name) => {
// fires: 'navChange', 'ctaClick'
}}
style={{ width: '100%', height: 360 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
logoText | Text | exode | — |
links | Text | Home,Components,Blocks,Pricing,Docs | — |
ctaText | Text | Get Started | — |
speed | Number | 1 | 0.1 – 3 |
accent | Text | #6366f1 | hex colour |
accent2 | Text | #a855f7 | hex colour |
bg | Text | #090a10 | hex colour |
Events (via onTrigger): navChangectaClick