A component that animates a text underline.
These underline animations work differently from typical CSS underline animations. Instead of animating the CSS text-decoration-line: underline property, they create a separate div element positioned absolutely below the text. This div acts as the underline and its dimensions are calculated relative to the font size:
The three variants work as follows:
'use client'
import Link from "next/link"
import { CenterUnderline, ComesInGoesOutUnderline, GoesOutComesInUnderline } from "@/components/ui/underline-animation"
function UnderlineDemo() {
return (
<div className="w-full h-full flex flex-col items-center justify-center bg-background">
<div className="flex flex-row font-overusedGrotesk items-start text-[#0015ff] h-full py-36 uppercase space-x-8 text-sm sm:text-xl md:text-2xl lg:text-3xl">
<div>Contact</div>
<ul className="flex flex-col space-y-1 h-full">
<Link href="#">
<CenterUnderline label="LINKEDIN" />
</Link>
<Link href="#">
<ComesInGoesOutUnderline label="INSTAGRAM" direction="right" />
</Link>
<Link href="#">
<ComesInGoesOutUnderline label="X (TWITTER)" direction="left" />
</Link>
<div className="pt-12">
<ul className="flex flex-col space-y-1 h-full">
<Link href="#">
<GoesOutComesInUnderline
label="FANCY@FANCY.DEV"
direction="left"
/>
</Link>
<Link href="#">
<GoesOutComesInUnderline
label="HELLO@FANCY.DEV"
direction="right"
/>
</Link>
</ul>
</div>
</ul>
</div>
</div>
)
}
export { UnderlineDemo }Part of Fancy Components — browse the full library on 21st.dev.