Skip to content
Pinky UI

text

Kinetic Underline

A small hover and focus underline motion.

  • text

Live preview

Read the note →

Quick usage

usage
import { KineticUnderline } from "@pinky-ui/effects";

<KineticUnderline />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

Purpose

KineticUnderline gives a link, nav item or heading a small elastic underline that responds to hover and keyboard focus. It is a microinteraction for hierarchy, not a decorative line on every text node.

Use one color with sufficient contrast and a thickness around 1–2px. Keep the movement near the label and use it to reinforce an existing link affordance. Do not remove the native underline from an ambiguous text link without another clear state.

The underline is decorative; the label and focus style remain visible. Pointer and focus both activate it, and reduced-motion users still receive a static underline. Keep it pointer-transparent and avoid layout-affecting transforms.

Open this skill on its own page