motion-stretch

Spring-physics letter spacing on hover. Characters elastically spread apart when the cursor enters and snap back when it leaves.

Preview

Import

Usage

Static content

Write the text as a child. The browser shows it as plain text before the element is defined, so the page never paints an empty gap while the library loads.

Dynamic content

Use the text attribute when text changes at runtime. Setting the property restarts the animation automatically.

If both are present, the attribute wins and the child text stays as the pre-upgrade fallback.

Spread

spread controls how far the outermost characters move (in px per side). Higher values give a more dramatic stretch.

Spring tuning

Adjust stiffness and damping to change the character of the snap. High stiffness + low damping is bouncy; low stiffness + high damping is slow and smooth.

How it works

Each character is wrapped in an inline-block span. On mouseenter, Motion One animates each character's x transform using a spring — characters at the edges travel furthest (±spread), characters near the center barely move. On mouseleave, a new spring animation returns all characters to x: 0.

Any in-progress animation is cancelled before starting the next, so fast hover transitions always feel responsive rather than lagging.

Accessibility

The animated per-character spans are marked aria-hidden="true", and the full text string is exposed to assistive tech via a visually-hidden span inside the shadow DOM. Screen readers announce the word as a single phrase rather than letter-by-letter, regardless of the spring transforms applied to individual characters.

When composing inside another text component (e.g. motion-scramble), pass the text only once — either as the parent's content or as motion-stretch's text attribute, not both — to avoid duplicate announcements.

Properties