Animated Link

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5type AnimatedLinkVariant = "left" | "right" | "center";
6 
7const underlineVariants: Record<AnimatedLinkVariant, string> = {
8  // underline wipes in from the left edge
9  left: "before:origin-right before:scale-x-0 hover:before:origin-left hover:before:scale-x-100",
10  // underline wipes in from the right edge
11  right:
12    "before:origin-left before:scale-x-0 hover:before:origin-right hover:before:scale-x-100",
13  // underline grows outward from the center
14  center: "before:origin-center before:scale-x-0 hover:before:scale-x-100",
15};
16 
17export interface AnimatedLinkProps extends React.ComponentPropsWithoutRef<"a"> {
18  /** Direction the underline reveals from on hover. */
19  variant?: AnimatedLinkVariant;
20  /** Show the diagonal arrow that lifts in on hover. */
21  showArrow?: boolean;
22}
23 
24const AnimatedLink = ({
25  variant = "left",
26  showArrow = true,
27  className,
28  children,
29  ...props
30}: AnimatedLinkProps) => {
31  return (
32    <a
33      className={cn(
34        "group relative inline-flex w-fit items-center text-foreground",
35        "before:pointer-events-none before:absolute before:left-0 before:top-[1.5em] before:h-[0.05em] before:w-full before:bg-current before:content-['']",
36        "before:transition-transform before:duration-300 before:ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:before:transition-none",
37        underlineVariants[variant],
38        className,
39      )}
40      {...props}
41    >
42      {children}
43      {showArrow && (
44        <svg
45          className="ml-[0.3em] size-[0.55em] transition-none"
46          fill="none"
47          viewBox="0 0 10 10"
48          xmlns="http://www.w3.org/2000/svg"
49          aria-hidden="true"
50        >
51          <path
52            d="M1.004 9.166 9.337.833m0 0v8.333m0-8.333H1.004"
53            stroke="currentColor"
54            strokeWidth="1.25"
55            strokeLinecap="round"
56            strokeLinejoin="round"
57            className="[stroke-dasharray:32] [stroke-dashoffset:32] transition-[stroke-dashoffset] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:[stroke-dashoffset:0] motion-reduce:transition-none"
58          />
59        </svg>
60      )}
61    </a>
62  );
63};
64 
65export { AnimatedLink };
66export default AnimatedLink;