Liquid Cursor Website Effect – Free Javascript Resource

Liquid Cursor Website Effect

A customizable liquid cursor effect built with JavaScript and WebGL.

The cursor behaves like a small blob of liquid that follows the mouse, stretches during movement, leaves a dynamic trail behind, and creates splashes during fast motion. It was originally created for an interactive 3D web project, but can be adapted to almost any website.

Features

• Liquid metaball-based cursor effect
• Dynamic stretching and movement
• Organic trail system
• Motion-based splashes
• Customizable colors, size and behavior
• Lightweight and self-contained
• No external libraries required

Included Files

• HTML setup
• CSS styling
• JavaScript source file

Installation

Download the files and add the provided code to your website.

The effect is self-contained and does not require any third-party plugins or frameworks. Simply include the files on your page and the cursor will replace the default mouse pointer.

Customization

Most visual settings can be adjusted directly in the JavaScript file, including:

• Cursor size
• Color
• Trail length
• Splash frequency
• Movement responsiveness
• Blob complexity

This makes it easy to match the effect to the visual style of your own project.

Compatibility

Tested in modern desktop browsers with WebGL support.

The effect is intended primarily for desktop experiences and automatically benefits from hardware acceleration available in modern browsers.

License

Feel free to use, modify and adapt this resource for personal or commercial projects.

Attribution is appreciated, but not required.