A beautiful, interactive fluid simulation that creates stunning visual effects following your cursor movements for your JavaScript and TypeScript application on web. Built with WebGL for high-performance real-time fluid dynamics.
  [](https://www.jsdelivr.com/package/npm/smokey-fluid-cursor) [](https://standardjs.com)      [](https://npmjs.org/package/smokey-fluid-cursor) --- ## 📦 Installation ```bash npm i smokey-fluid-cursor yarn add smokey-fluid-cursor pnpm i smokey-fluid-cursor bun add smokey-fluid-cursor ``` --- ## 📸 Demo Also see more details in [Example](https://github.com/faraasat/smokey-fluid-cursor/tree/main/example):  --- ## 🚀 Quick Start ### Basic Usage ```javascript import { initFluid } from "smokey-fluid-cursor"; // Initialize with default settings initFluid(); ``` ### HTML Setup ```html ``` ### IIFE Setup ```html ``` --- ## ⚙️ Configuration Customize the fluid simulation with these configuration options: ```javascript initFluid({ id: "smokey-fluid-cursor", // Canvas element ID simResolution: 128, // Simulation resolution (higher = more detailed) dyeResolution: 512, // Dye/color resolution densityDissipation: 0.98, // How quickly colors fade (0-1) velocityDissipation: 0.98, // How quickly movement slows down pressureIteration: 10, // Pressure solver iterations curl: 30, // Vorticity/swirl intensity splatRadius: 0.25, // Size of cursor splats splatForce: 6000, // Force of cursor movements shading: true, // Enable 3D lighting effects colorUpdateSpeed: 0.5, // Speed of color transitions transparent: false, // Transparent background }); ``` --- ## 🌟 Features - **Real-time Fluid Dynamics**: Physics-based simulation using Navier-Stokes equations - **WebGL Accelerated**: High-performance rendering for smooth 60fps - **Interactive**: Responds to mouse and touch movements - **Customizable**: Extensive configuration options - **Mobile Support**: Touch-optimized interactions - **Auto-scaling**: Adapts to screen size and pixel ratio - **Color Cycling**: Dynamic, evolving color palettes - **3D Lighting**: Optional shading for depth perception --- ## 🎯 Use Cases - **Website Backgrounds**: Immersive animated backgrounds - **Cursor Effects**: Enhanced user interaction feedback - **Data Visualization**: Fluid-based data representations - **Art Installations**: Digital art and creative coding - **Game Effects**: Atmospheric and UI effects - **Product Demos**: Eye-catching technology showcases --- ## 🧑💻 Author Built and maintained by [**Farasat Ali**](https://www.farasat.me) - Website: [www.farasat.me](https://www.farasat.me) - LinkedIn: [linkedin.com/in/faraasat](https://linkedin.com/in/faraasat) - GitHub: [github.com/faraasat](https://github.com/faraasat)