Cursor spotlights, magnetic buttons, 3D tilt and living icons, the page quietly responds to exactly where you point.
It answers the moment you move.
Hover the card: a soft glow tracks your cursor and a light beam sweeps the border once. .card (automatic).
Buttons lean toward your cursor and a colour flood rises from where you enter. .btn.mag.
Icons animate on hover, mail swings, shields pulse, clocks spin. Hover the tiles. .im .ish .icl.
The card leans toward your cursor in 3D, an inner layer floats forward, and a specular highlight tracks you. .md-tilt.
A sketchy underline or circle draws itself around a word as it enters, human, deliberate. .md-annotate.
Connector paths draw themselves stroke by stroke on view. .md-draw.
A clip-path curtain reveals the image on view. .md-wipe.
A slow, subconscious zoom-and-drift that makes a still image feel alive. .md-kenburns.
A greyscale image warms to full colour on hover. .md-duo.
A 3D card flips to reveal its back face on hover. .md-flip.
Tap to flip, great for pricing or FAQ reveals. .md-flip[data-click].
The fill slides in from whichever edge your cursor crosses. .md-dir.
The image gently zooms and a caption rises on hover. .md-hzoom.
A link underline draws left-to-right on hover. .md-link.
A gloss sweeps across and a soft brand glow lifts the button. .md-shine .md-glow.
The word slides up and its replacement slides in. .md-swap.
One cursor-driven light sweeps along every nearby card border, not per-card hover. .md-gridglow.
Point at one item and its siblings dim & shrink, pure :has(). .md-hoverdim.
A glowing dot endlessly laps the element’s own border, following its radius. .md-path.
Every effect here earns its place, calm, precise, and tuned to your brand, because motion should carry the message, never bury it.
Applied with restraint, tuned to your brand, and kind to every device, because motion should serve the message.