Fluid Hover Highlight

Navigation 3

About

An animated highlight that glides between items in a list, menu, or grid as the pointer moves over them, instead of blinking on each :hover state.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Fluid Hover Highlight to your project and fits it to your theme.

Code

How Fluid Hover Highlight is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import FluidHoverHighlight from "@/components/ui/fluid-hover-highlight";
import {
  useFluidHover,
  useRegisterFluidHoverItem,
} from "@/components/ui/fluid-hover-highlight-utils/use-fluid-hover";
import { useRef } from "react";

const ITEMS = ["Inbox", "Drafts", "Sent", "Archive", "Trash"];

export default function FluidHoverHighlightDemo() {
  const containerRef = useRef<HTMLUListElement>(null);
  const hover = useFluidHover(containerRef);

  return (
    <div className="flex w-full items-center justify-center p-8">
      <ul
        aria-label="Folders"
        className="relative w-full max-w-xs rounded-xl border border-foreground/10 bg-background p-1"
        ref={containerRef}
        {...hover.handlers}
      >
        <FluidHoverHighlight
          className="z-0 rounded-lg bg-foreground/5"
          hover={hover}
        />
        {ITEMS.map((label, index) => (
          <FluidHoverRow
            hover={hover}
            index={index}
            key={label}
            label={label}
          />
        ))}
      </ul>
    </div>
  );
}

const FluidHoverRow = ({
  hover,
  index,
  label,
}: {
  hover: ReturnType<typeof useFluidHover>;
  index: number;
  label: string;
}) => {
  const itemRef = useRef<HTMLLIElement>(null);
  useRegisterFluidHoverItem(hover.registerItem, index, itemRef);

  return (
    <li className="relative z-10" ref={itemRef}>
      <button
        className="flex w-full cursor-pointer items-center rounded-lg px-3 py-2 text-left text-sm"
        type="button"
      >
        {label}
      </button>
    </li>
  );
};