Text link hover effects

[Eshan05]

Is your feature request related to a problem? Please describe.
Not a problem but it just becomes inconvenient at times

Describe the solution you'd like
In various websites there are link hovers, like on hover the original text transitions by going up and from below comes the same text, or I've seen some where it does a 'cube rotation'. In effect, it just gives a nice visual feedback that you've hovered and some of them look really nice. It would be nice if there was a component that has all these effects. I have implemented this for example.

msedge_wMQCVlEj9Z.mp4

Via

// transition-replace-text.tsx
import { cn } from "@/lib/utils";
import React from "react";

type Position =
  | "top-left"
  | "top"
  | "top-right"
  | "left"
  | "right"
  | "bottom-left"
  | "bottom"
  | "bottom-right";

const positionVariants = {
  "top-left": {
    original: "group-hover:translate-x-full group-hover:translate-y-full",
    duplicate: "-translate-x-full -translate-y-full",
  },
  "top": {
    original: "group-hover:translate-y-full",
    duplicate: "-translate-y-full",
  },
  "top-right": {
    original: "group-hover:-translate-x-full group-hover:translate-y-full",
    duplicate: "translate-x-full -translate-y-full",
  },
  "left": {
    original: "group-hover:translate-x-full",
    duplicate: "-translate-x-full",
  },
  "right": {
    original: "group-hover:-translate-x-full",
    duplicate: "translate-x-full",
  },
  "bottom-left": {
    original: "group-hover:translate-x-full group-hover:-translate-y-full",
    duplicate: "-translate-x-full translate-y-full",
  },
  "bottom": {
    original: "group-hover:-translate-y-full",
    duplicate: "translate-y-full",
  },
  "bottom-right": {
    original: "group-hover:-translate-x-full group-hover:-translate-y-full",
    duplicate: "translate-x-full translate-y-full",
  },
};

interface AnimatedTextProps {
  children: React.ReactNode;
  className?: string;
  position?: Position;
}

export function AnimatedText({ children, className, position = "bottom" }: AnimatedTextProps) {
  const { original, duplicate } = positionVariants[position] || {};

  return (
    <div className={cn("relative overflow-hidden inline-flex items-center group", className)}>
      <div
        className={cn(
          "transition-all duration-400 ease-in-out",
          "group-hover:opacity-0 group-hover:rotate-[-10deg]",
          original
        )}
      >
        {children}
      </div>
      <div
        className={cn(
          "absolute inset-0 transition-all duration-400 ease-in-out",
          "opacity-0 group-hover:opacity-100 group-hover:rotate-0",
          "transform rotate-[10deg]",
          "group-hover:translate-x-0 group-hover:translate-y-0",
          duplicate
        )}
      >
        {children}
      </div>
    </div>
  );
}

Something like above but with many transitions and effects would be a useful addition, this is just a quick implementation.

Additional context
Add any other context or screenshots about the feature request here.