A dynamic overlay that follows hovered elements, highlighting them with a smooth color transition.
Hover Follow Overlay is an interactive UI component where an overlay element dynamically tracks the user's pointer as it hovers over designated items. The overlay smoothly scales and changes color to match the hovered item, creating a subtle yet engaging visual effect. It uses GSAP for performant animations and pointer events for precise interaction, making it ideal for hero sections, creative portfolios, and experimental landing pages where highlighting content on hover enhances user engagement.
npm i gsap @gsap/react
Perfect for creative websites, portfolios, or interactive landing pages where you want to draw attention to specific content blocks in a smooth, visually appealing way.
Easy-Intermediate
| Prop | Type | Description |
|---|---|---|
| ease | string | GSAP easing function controlling how the overlay moves and transitions on hover. |
| duration | number | Duration (in seconds) for the overlay's movement and color transition. |
These components are designed for developers who have at least an intermediate understanding of React and GSAP. To fully customize, extend, or modify the behavior, familiarity with both libraries is recommended. They are not specifically intended for absolute beginners.
However, beginners can still use them by simply copying and pasting the code.
© 2026 dropui.design