Components
Loading preview...
Hover Link Animation
npx shadcn@latest add https://21st.dev/r/erikvalencia1/hover-link-animation"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>
);
}