Crown Bar

A navigation bar whose items swell, drop and settle on a damped spring as the pointer moves across them, with keyboard focus driving the same motion. The default modern fit is a masthead with an italic serif wordmark, the dock and actions over a serif headline; pill is a centred dock, retro a fitted strip over an ordered-dither WebGL field ramped from paper through the primary to ink, and glass a vertical rail over a Three.js field of refracting beads on a primary-tinted paper wash. Every colour comes from theme tokens (the shaders re-read them when the mode or palette changes), so it follows light and dark mode and the palette picker. The spring is disabled for reduced motion, coarse pointers and narrow viewports, and the shader fields pause off screen.

Installation

CLI

npx @modus-ui/cli add crown-bar

Manual

1. Install three and framer-motion.
2. Copy the code from the component tab.
3. Create a file at components/ui/crown-bar.tsx.
4. Paste the code.

Usage

import { CrownBar } from "@/components/ui/crown-bar";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <CrownBar variant="glass" />
    </div>
  );
}

Props