A JavaScript library for creating WebGL-powered distortion hover effects between images or videos.
Hover Effect is a JavaScript library that creates WebGL-powered distortion animations between two images or videos, triggered by hover events. It solves the need for high-performance, visually engaging interactive effects on websites without requiring low-level WebGL shader programming. The library uses displacement mapping to generate smooth transitions that respond to user interactions.
Frontend developers and designers building modern, interactive websites who want to add polished visual effects without deep graphics expertise. It’s especially useful for creative portfolios, agency sites, and experimental web projects.
Developers choose Hover Effect for its simplicity—abstracting complex WebGL logic into a few configuration options—and its performance, leveraging GPU acceleration for smooth animations. Unlike CSS-based hover effects, it enables advanced distortion and displacement transitions that are difficult to achieve with standard web technologies.
Javascript library to draw and animate images on hover
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Leverages displacement mapping and Three.js for hardware-accelerated transitions, ensuring smooth animations without taxing the CPU, as highlighted in the key features.
Offers parameters like intensity, angle, speed, and easing for fine-tuning, with overrides for individual images documented in the optional parameters table.
Works with both static images and video sequences, enabling dynamic content animations, as specified in the features and video parameter.
Can be used with vanilla JavaScript or integrated into frameworks like Vue via community plugins, making it versatile across tech stacks, as noted in the description.
Requires Three.js and GSAP to be included separately, increasing bundle size and setup complexity, as shown in the basic usage section where both must be loaded before the library.
Mandatory parameters are only for two images or videos, restricting more complex multi-image transitions without workarounds, as seen in the initialization example.
Lacks alternatives for environments without WebGL support, which could cause broken effects on unsupported browsers or devices, not addressed in the README.