Four hover behaviours you will reach for on every single build.
A magnetic button, a slanted fill, a character swap and an underline. Three of them are GSAP. The fourth is deliberately not — knowing which is which is most of the lesson.
The button is inside a transparent bt_mag wrapper with 2.25rem of padding and an equal negative margin. It reacts before the cursor arrives, and the layout never knows.
Six degrees of skew on the fill. It is the whole difference between “a rectangle went up” and something that feels drawn.
Two identical rows, one clipped box, an 18ms stagger. The duplicate carries aria-hidden so a screen reader hears the label once.
transform-origin: right at rest, left on hover — the rule leaves the way it came. Forty bytes of CSS, no JavaScript, no listener per link, and it still works if your script fails.