Components
Loading preview...
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 height is controlled by underlineHeightRatio (defaults to 10% of font size) - The padding below text is controlled by underlinePaddingRatio (defaults to 1% of font size) The three variants work as follows: - Center: The underline grows outward from the center point - Comes In Goes Out: The underline enters from one side, then exits from the other side - Goes Out Comes In: The underline exits from one side, then re-enters from the opposite side
@danielpetho
npx shadcn@latest add https://21st.dev/r/danielpetho/underline-animation'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 }