Underline Animation

Navigation 1

About

An animated CSS hover underline for links with multiple motion styles (slide, center, fill, wavy, gradient) that supports active/current-page state and respects reduced motion.

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

Code

How Underline Animation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { UnderlineAnimation } from "@/components/ui/underline-animation";

export default function UnderlineAnimationDemo() {
  return (
    <nav className="flex gap-6 text-lg font-medium">
      <UnderlineAnimation href="/work" active>
        Work
      </UnderlineAnimation>
      <UnderlineAnimation href="/studio">Studio</UnderlineAnimation>
      <UnderlineAnimation href="/journal" variant="center">
        Journal
      </UnderlineAnimation>
      <UnderlineAnimation href="/contact" variant="gradient">
        Contact
      </UnderlineAnimation>
    </nav>
  );
}