Hover Pack

Ten hover & button micro-interactions from one attribute. Tag any element with data-hover and call HoverPack.init().

data-hover="underline"
Our approach Meet the team Get in touch rests visible · wipes out right, returns from left
data-hover="underline" data-hover-mode="side-aware"
Services Pricing Journal draws from the edge the cursor enters
data-hover="underline" data-hover-mode="origin-flip"
Case studies Capabilities Contact draws in from the left, exits to the right
data-hover="shine"
white sweep, .1s delay
data-hover="flood"
circle spawns at the cursor entry point
data-hover="slide"
bg / label swap + arrow clone slide
data-hover="magnetic"
inner label leans toward the cursor
data-hover="trail"
white glow trail, clipped to the pill
data-hover="pixels"
Read the story Get in touch random accent cells, pixel-stepped corners
data-hover="arrow-swap"
Explore All work arrow exits top-right, clone enters bottom-left