Components
Loading preview...
A text component that animates a text underline into a text background. The component creates a separate div element positioned absolutely below the text (instead of the regular underline elements with CSS pseudo-elements). It animates the height from a thin line (controlled by underlineHeightRatio) to cover the full text height, effectively becoming a background. Simultaneously, it transitions the text color to maintain contrast against the expanding background.
@danielpetho
npx shadcn@latest add https://21st.dev/r/danielpetho/underline-to-background'use client'
import { motion } from "framer-motion"
import { UnderlineToBackground } from "@/components/ui/underline-to-background"
function UnderlineToBackgroundDemo() {
const fadeInVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { duration: 0.5, staggerChildren: 0.1 },
},
}
const wordVariants = {
hidden: { opacity: 0 },
visible: { opacity: 1 },
}
const words = "Weekly goodies delivered straight to your inbox —".split(" ")
return (
<div className="w-full h-full flex flex-col items-center justify-center bg-[#f5f5f5]">
<motion.h2
className="text-[#0015ff] text-xl p-12 md:p-24"
initial="hidden"
animate="visible"
variants={fadeInVariants}
>
{words.map((word, index) => (
<motion.span
key={index}
variants={wordVariants}
className="inline-block mr-1"
>
{word}
</motion.span>
))}
<motion.span variants={wordVariants} className="inline-block">
<UnderlineToBackground
label="subscribe"
targetTextColor="#f0f0f0"
className="cursor-pointer"
/>
</motion.span>
</motion.h2>
</div>
)
}
export { UnderlineToBackgroundDemo }