Great UI Animated Link

Navigation 36

About

An interactive link component supporting 13 premium hover variants including custom clipping masks, SVG sine waves, and text marquee animations.

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

Code

How Great UI Animated Link is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import AnimatedLink, {
  type AnimatedLinkVariant,
} from "@/components/ui/great-ui-animated-link";

const previewVariants: {
  label: string;
  variant: AnimatedLinkVariant;
  showArrow?: boolean;
}[] = [
  { label: "Classic Underline", variant: "underline" },
  { label: "Center Underline", variant: "centerUnderline" },
  { label: "Top Overline", variant: "overline" },
  { label: "Vertical Borders", variant: "verticalLines" },
  { label: "Slide Reveal Line", variant: "revealLine" },
  { label: "Fade Up Line", variant: "fadeUpLine" },
  { label: "Dash Arrow Hover", variant: "dashHover" },
  { label: "Clip Fill Y", variant: "clipFillY" },
  { label: "Clip Fill X", variant: "clipFillX" },
  { label: "Clip Center", variant: "clipCenter" },
  { label: "Doodle Underline", variant: "clipDoodle" },
  { label: "Loop Wave", variant: "wavy" },
  { label: "Text Rise Marquee", variant: "textRise" },
];

export default function AnimatedLinkPreview() {
  return (
    <div className="w-full max-w-4xl px-8 py-12 select-none">
      <div className="grid grid-cols-2 gap-x-12 gap-y-12 sm:grid-cols-3 md:grid-cols-4">
        {previewVariants.map((item) => (
          <div key={item.label} className="flex h-8 items-center">
            <AnimatedLink
              href="#"
              variant={item.variant}
              showArrow={item.showArrow}
              className="text-xl font-semibold transition-colors"
            >
              {item.label}
            </AnimatedLink>
          </div>
        ))}
      </div>
    </div>
  );
}