Kinetic Underline

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.