Animated Link

Component 14

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 Animated Link to your project and fits it to your theme.

Code

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

Usage.tsx

"use client";

import React from "react";
import AnimatedLink, {
  AnimatedLinkVariant,
} from "@/components/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>
  );
}