Installation

Usage

import { DrawUnderlineLink } from '@/components/sora-ui/texts/draw-underline-link';

export default function Page() {
  return (
    <DrawUnderlineLink href="#" underlineColor="#ff4c24">
      Hover me
    </DrawUnderlineLink>
  );
}

Props

When to Use

Use DrawUnderlineLink for editorial body copy, blog post inline links, and marketing pages where you want links to feel crafted rather than mechanical. It works particularly well in large headline text or pull-quotes where the SVG stroke is clearly visible at the text size.

Avoid it for navigation menus, button-style links, or links inside dense paragraphs where the animation competes with surrounding content.

Accessibility

The component renders as a standard <a> tag. The SVG underline is aria-hidden and purely decorative — screen readers announce the link text without any mention of the animation. Keyboard focus shows the standard browser outline alongside the drawn underline. When prefers-reduced-motion: reduce is set, useReducedMotion() swaps the draw-in/draw-out animation for a static underline that just appears and disappears on hover — no extra configuration needed.

Credits

Inspired by Osmo. Reimplemented for Motion and React.