About
A navigation menu whose items thicken their variable font weight as the cursor approaches, using an exponential proximity falloff.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Variable Font Proximity Nav to your project and fits it to your theme.
Code
How Variable Font Proximity Nav is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import VariableFontCursorProximityNav from "@/components/ui/m-variable-font-cursor-proximity-3";
export default function Default() {
return (
<div className="flex min-h-64 w-full items-center justify-center">
<VariableFontCursorProximityNav />
</div>
);
}
















