Next Level Background Hover Effects

project•

Demo & Source Code

  1. Liquid Gradient: A dynamic, liquid-like gradient background that morphs on hover using Three.js. CodePen demo
  2. Tubes Cursor: Interactive 3D tube trails that follow the cursor on hover, creating a mesmerizing effect using WebGL. CodePen demo
  3. Water Effect: A realistic water ripple effect that responds to cursor movement, built with Three.js. CodePen demo

Quick usage tips

  • Fork the demo
  • Respect prefers-reduced-motion and provide static fallbacks for low‑power devices.
  • Test performance on mobile and limit heavy effects to large‑screen enhancements.

See each CodePen for source, and license details.