Animation Engine
Hover Effects
10 pointer-driven hover interactions for any element — magnetic pull, 3D tilt with glare, cursor spotlight, image reveal, glow border, ripple, lift, colour shift and text scramble.
Hover the cards
Interactions that follow the cursor.
Every card below carries a live hover interaction from its Animations tab. They’re pointer-only — automatically skipped on touch devices — and honour reduced-motion.
Pointer interactions
Move your cursor over each
Magnetic
Hover me
3D Tilt
Hover me
Spotlight
Hover me
Image Reveal
Hover me
Glow Border
Hover me
Ripple
Hover me
Lift
Hover me
Colour Shift
Hover me
Text Scramble
Hover me
How to set it up
Add it in under a minute
- Open an element → Animations → Hover Interaction.
- Pick an interaction and tune its strength / colour.
- Combine more than one on the same element if you like.
- Save and hover over it.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.