Free
☁️ SaaS
Glass Command Navbar
Glassmorphism navbar with scroll shrink, active-link lamp indicator and a built-in ⌘K command palette stub.
2.3k views 147 copies 289 words
The Prompt
# Glass Command Navbar — UI Component
## Goal
Build a premium glass navbar: blur shell, lamp-style active indicator, scroll behavior, mobile overlay, and a ⌘K palette stub. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.
## Design Spec
- Shell: fixed top, inner container rounded-full mt-4 px-2 with bg-white/[0.06] backdrop-blur-xl border-white/[0.1] — floating pill style, not full-width bar.
- Links: 5 items px-4 py-2; active link gets a 'lamp': a pill highlight behind it plus a 2px glow line on top edge — the highlight is one shared element that glides between links.
- Right cluster: ⌘K button (kbd-styled, opens palette stub: centered modal with search input + 5 fake results, arrow-key selectable), divider, avatar or CTA.
- Scroll behavior: at top the pill is wider (max-w-4xl) and taller; after 80px it compresses (max-w-2xl, h-12) and bg opacity rises — one smooth animated transition, not a snap.
- Mobile: pill shows logo + burger; menu opens as full glass overlay, links 28px with 60ms stagger, close morphs burger→×.
## Motion Spec
- Lamp indicator uses a shared layout element so it fluidly slides + resizes between links, 350ms spring.
- Palette opens with scale 0.96→1 + fade 180ms; backdrop blurs page behind.
- Compress-on-scroll interpolates via scroll progress over the 0-80px window (no binary toggle jump).
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.
## Component API
- `<GlassNav links={{label,href}[]} cta?={{label,href}} onPaletteQuery?=(q)=>Result[] />`
## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.
You may also like
Free
Featured
Meridian Analytics
☁️ SaaS
Data analytics SaaS landing with live dashboard mockup hero, gradient data-viz accents and a conversion-focused flow.
4.0k 172CursorClaude CodeLovable
Free
Button Motion Set
🛬 Landing Page
A cohesive set of 6 animated buttons: magnetic, shine-sweep, morph-to-loader, icon-nudge, gradient-ring, ghost-fill.
3.5k 371CursorClaude CodeLovable
Free
Bento Feature Grid
☁️ SaaS
Six-cell bento features section with one hero cell, live UI fragments inside cells and hover choreography.
3.5k 501CursorClaude CodeLovable
Premium
Glass Pricing Table
☁️ SaaS
3-tier glassmorphism pricing section with popular badge and toggle billing.
2.8k 811Cursorv0Bolt