Motion link

1"use client";
2 
3import React from "react";
4import Link, { type LinkProps } from "next/link";
5import { motion, stagger, MotionConfig, type MotionProps } from "motion/react";
6 
7import { cn } from "@/lib/utils";
8 
9const MLink = motion.create(Link);
10 
11type CombinedAnchorProps = Omit<
12  React.AnchorHTMLAttributes<HTMLAnchorElement>,
13  keyof LinkProps | "href"
14>;
15 
16export type MotionLinkBaseProps = LinkProps & MotionProps & CombinedAnchorProps;
17export function MotionLink(props: MotionLinkBaseProps) {
18  return <MLink {...props} />;
19}
20 
21export interface MotionLinkUnderlineProps extends MotionLinkBaseProps {
22  underlineColor?: React.CSSProperties["background"];
23  underlineHeight?: React.CSSProperties["height"];
24  startDirection?: "left" | "right";
25  endDirection?: "left" | "right";
26}
27export function MotionLinkUnderline({
28  className,
29  children,
30  underlineColor = "var(--color-foreground)",
31  underlineHeight = "2px",
32  startDirection = "left",
33  endDirection = "right",
34  ...rest
35}: MotionLinkUnderlineProps) {
36  const isStartDirectionLeft = startDirection === "left";
37  const isEndDirectionRight = endDirection === "right";
38 
39  const underlineActiveStyles = {
40    width: "100%",
41    ...(isStartDirectionLeft
42      ? { left: "0px", right: "auto" }
43      : { left: "auto", right: "0px" }),
44  };
45 
46  return (
47    <MotionLink
48      initial="initial"
49      whileFocus="whileFocus"
50      whileHover="whileHover"
51      className={cn(
52        "!relative w-fit !text-nowrap text-inherit focus-visible:!outline-0",
53        className,
54      )}
55      {...rest}
56    >
57      {children}
58      <motion.div
59        style={{
60          height: underlineHeight,
61          background: underlineColor,
62        }}
63        className="absolute bottom-0"
64        variants={{
65          initial: {
66            width: "0%",
67            ...(isEndDirectionRight
68              ? { left: "auto", right: "0px" }
69              : { left: "0px", right: "auto" }),
70          },
71          whileHover: underlineActiveStyles,
72          whileFocus: underlineActiveStyles,
73        }}
74        transition={{
75          left: { duration: 0 },
76          right: { duration: 0 },
77          default: { ease: "easeInOut" },
78        }}
79      />
80    </MotionLink>
81  );
82}
83 
84export interface MotionLinkSlideTextProps extends MotionLinkBaseProps {
85  children: string;
86}
87 
88export function MotionLinkSlideText({
89  children,
90  className,
91  ...rest
92}: MotionLinkSlideTextProps) {
93  const characters = children.split("");
94// … truncated