Vibes logo

Animated Link

Link that animates on hover or focus

  • Animates link on hover or focus
  • Multi line support

Installation

Install the following dependencies

npm install clsx

Copy and paste the following code into your project

primitives/animated-link/index.tsx

import { clsx } from 'clsx';import Link from 'next/link';import { ComponentPropsWithoutRef } from 'react';export interface AnimatedLinkProps extends ComponentPropsWithoutRef<typeof Link> {  className?: string;}/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css * :root { *   --animated-link-text: hsl(var(--foreground)); *   --animated-link-font-family: var(--font-family-body); *   --animated-link-underline-hover: hsl(var(--primary)); * } * ``` */export function AnimatedLink({ className, children, href, ...props }: AnimatedLinkProps) {  return (    <Link      {...props}      className={clsx(        'origin-left font-[family-name:var(--animated-link-font-family,var(--font-family-body))] font-semibold leading-normal text-[var(--animated-link-text,hsl(var(--foreground)))] transition-[background-size] duration-300 [background:linear-gradient(0deg,var(--animated-link-underline-hover,hsl(var(--primary))),var(--animated-link-underline-hover,hsl(var(--primary))))_no-repeat_left_bottom_/_0_2px] hover:bg-[size:100%_2px] focus:outline-none focus-visible:bg-[size:100%_2px]',        className,      )}      href={href}    >      {children}    </Link>  );}

Usage

import { AnimatedLink } from '@/vibes/soul/primitives/animated-link';export function Usage() {  return (    <AnimatedLink href="/about">About</AnimatedLink>  );}

API Reference

AnimatedLinkProps

PropTypeDefault
className
string

Refer to the Next.js Link component documentation for more details.

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {--animated-link-text: hsl(var(--foreground));--animated-link-font-family: var(--font-family-body);--animated-link-underline-hover: hsl(var(--primary));}