Text

Variable Font Weight Animation

Also called Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover

Letters smoothly get bolder or lighter (or change width/slant) via variable-font axes.

Interactive headings

  • weight on hover
  • per-letter wave
  • width axis
  • scroll-linked axis

View demo source

Prompt

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.

Add a "Variable Font Weight Animation" hover effect (also called font weight shift) to [where].
While the pointer is over the text, the letters should grow bolder one after another in a smooth wave from left to right, and thin out again when the pointer leaves.
Use a variable font so the weight changes smoothly instead of jumping, keep the heading from pushing nearby content around as it widens, and show the same effect on keyboard focus.

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.