Scroll the page · hover the links

Interfaces that feel quietly alive.

A mock landing page so you can try the scroll morph, the hide-on-scroll behaviour and the menus.

Controls

variant

scrollThresholdpx

hideOnScroll

position

accentColor

Navbar

Five minimal, animated navigation bars: glass pill, scroll morph, sliding underline, dynamic island mega-menu and full-screen overlay.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/navbar

import { Navbar } from "@/components/navbar"

const links = [
  {
    label: "Product",
    href: "/product",
    children: [
      { label: "Analytics", href: "/analytics", description: "Understand every interaction." },
      { label: "Automations", href: "/automations", description: "Workflows that run themselves." },
    ],
  },
  { label: "Pricing", href: "/pricing" },
  { label: "Docs", href: "/docs" },
]

export function Demo() {
  return (
    <Navbar links={links} cta={{ label: "Get started", href: "/start" }} />
  )
}

Updates live as you change the controls. Only non-default props are included.