Underline Animation

Text 149

About

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

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

Code

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

Usage.tsx

'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 }