Hover Link Animation

Text 51

About

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

Code

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

Usage.tsx

"use client";

import { motion } from "motion/react";
import { Component } from "@/components/ui/hover-link-animation";

export default function HighlightDemo() {
  const fadeGroup = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: { duration: 0.6, staggerChildren: 0.12 },
    },
  };

  const itemFade = {
    hidden: { opacity: 0, y: 12 },
    show: { opacity: 1, y: 0 },
  };

  const message =
    "Welcome to the future of components with 21st Dev —".split(" ");

  return (
    <div className="w-dvw h-dvh flex items-center justify-center bg-background]">
      <motion.h2
        className="text-2xl md:text-2xl font-extrabold tracking-wide text-[#ffffff] font-mono p-6"
        variants={fadeGroup}
        initial="hidden"
        animate="show"
      >
        {message.map((word, idx) => (
          <motion.span
            key={idx}
            variants={itemFade}
            className="inline-block mr-2"
          >
            {word}
          </motion.span>
        ))}
        <motion.span variants={itemFade} className="inline-block">
          <Component
            highlightColor="#0d0d0d"
            className="cursor-pointer text-[#00ff88]"
          >
            explore
          </Component>
        </motion.span>
      </motion.h2>
    </div>
  );
}