Squiggly Underline

A hand-drawn, wavy underline that draws itself on when scrolled into view. The wave scales with the inherited font size, mirrors for RTL, and tints both text and stroke when a color is set so emphasis never relies on the underline alone.

Installation

npx stepwise-ui add squiggly-underline

The most important detail is the one you notice.

import { SquigglyUnderline } from '@/components/stepwise/squiggly-underline'

// Draws a wavy underline on when it scrolls into view - color tints text + stroke
The <SquigglyUnderline color="#e11d48">most important</SquigglyUnderline> detail.

// Tune the wave + draw speed (wave metrics scale from font size by default)
<SquigglyUnderline duration={1.2} delay={0.25} replayInView>
  emphasis
</SquigglyUnderline>

Props

PropTypeDescription

children

React.ReactNode

The text (or nodes) to underline.

color

string

Tints text and stroke. Default currentColor.

amplitude

number

Wave height in px. Scales from font size when omitted.

wavelength

number

Wave length in px. Scales from font size when omitted.

thickness

number

Stroke width in px. Scales from font size when omitted.

duration

number

Draw-on duration in seconds at ~100px width. Scales with text length. Default 1.1.

delay

number

Pause before the draw begins, in seconds. Default 0.2.

replayInView

boolean

Replay the draw each time it scrolls into view. Default false.

className

string

Tailwind classes for font size, weight, and tracking.