Animated Underline
Text that animates on hover or focus
- Animates text on hover or focus
- Multi-line support
Installation
Install the following dependencies
npm install clsxCopy and paste the following code into your project
primitives/animated-underline/index.tsx
import { clsx } from 'clsx';export interface AnimatedUnderlineProps { children: string; className?: string;}/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css * :root { * --animated-underline-hover: hsl(var(--primary)); * --animated-underline-text: hsl(var(--foreground)); * --animated-underline-font-family: var(--font-family-body); * } * ``` */export function AnimatedUnderline({ className, children }: AnimatedUnderlineProps) { return ( <span className={clsx( 'origin-left font-[family-name:var(--animated-underline-font-family,var(--font-family-body))] font-semibold leading-normal text-[var(--animated-underline-text,hsl(var(--foreground)))] transition-[background-size] duration-300 [background:linear-gradient(0deg,var(--animated-underline-hover,hsl(var(--primary))),var(--animated-underline-hover,hsl(var(--primary))))_no-repeat_left_bottom_/_0_2px] hover:bg-[size:100%_2px] group-focus/underline:bg-[size:100%_2px]', className, )} > {children} </span> );}Usage
import { AnimatedUnderline } from '@/vibes/soul/primitives/animated-underline';export function Usage() { return ( <p>Check out this <AnimatedUnderline>animated text!</AnimatedUnderline></p> );}Usage with buttons and links
The AnimatedUnderline component can be used with other components, like the Next.js Link component or a button element, to create a focus-based underline animation. To do this, you need to pass the className prop to the wrapping component and apply the group/underline and focus:outline-none classes to it.
import Link from 'next/link';import { AnimatedUnderline } from '@/vibes/soul/primitives/animated-underline';export function Usage() { return ( <Link className="group/underline focus:outline-none" href="/about"><AnimatedUnderline>About</AnimatedUnderline></Link> );}API Reference
AnimatedUnderlineProps
| Prop | Type | Default |
|---|---|---|
children | string | |
className | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --animated-underline-text: hsl(var(--foreground)); --animated-underline-font-family: var(--font-family-body); --animated-underline-hover: hsl(var(--primary));}