Draw Underline Link

A link with a hand-drawn SVG underline that animates on hover, powered by Motion. A React component.

Tweak Props

label

variant

duration

underlineColor

draw-underline-link.tsx

Loading code…

Link with a hand-drawn SVG underline that animates on hover — hover to see the stroke draw in.

Usage

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

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

Props

Prop	Type	Default
`children?`	`string`	-
`label?`	`string`	-
`variant?`	`"default" \| "sm" \| "lg"`	`"default"`
`duration?`	`number`	`0.5`
`paths?`	`readonly string[]`	-
`underlineColor?`	`string`	`"currentColor"`
`className?`	`string`	-
`textClassName?`	`string`	-
`underlineClassName?`	`string`	-

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.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/texts/draw-underline-link.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

draw-underline-link.tsx

import { DrawUnderlineLink } from '@/components/sora-ui/texts/draw-underline-link'; export default function Page() { return ( <DrawUnderlineLink href="#" underlineColor="#ff4c24"> Hover me </DrawUnderlineLink> ); }

Prop

Type

Default

children?

string

label?

string

variant?

"default" | "sm" | "lg"

"default"

duration?

number

0.5

paths?

readonly string[]

underlineColor?

string

"currentColor"

className?

string

textClassName?

string

underlineClassName?

string

When to Use

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

Accessibility

Draw Underline Link

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Props

When to Use

Accessibility

Credits

On this page

Draw Underline Link

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Props

When to Use

Accessibility

Credits

On this page