smokey-fluid-cursor

v1.0.7

Published

3 months ago

A customizable fluid cursor effect for Vanilla JavaScript/TypeScript applications running on the web. Enhance user experience with smooth, interactive cursor animations. Perfect for modern web designs.

Downloads

178

0High
0Medium
0Low

faraasat

smokey cursor fluid cursor animated cursor smokey fluid javascript typescript animated smoke cursor

npm version package size minified

total downloads total downloads per year total downloads per week total downloads per month download-image

📦 Installation

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:

Demo

🚀 Quick Start

Basic Usage

import { initFluid } from "smokey-fluid-cursor";

// Initialize with default settings
initFluid();

HTML Setup

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        background: #000;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="smokey-fluid-canvas"></canvas>

    <script type="module">
      import { initFluid } from "https://cdn.jsdelivr.net/npm/smokey-fluid-cursor@latest/dist/index.mjs";

      window.addEventListener("DOMContentLoaded", () => {
        initFluid();
      });
    </script>
  </body>
</html>

IIFE Setup

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        background: #000;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="smokey-fluid-canvas"></canvas>

    <script src="https://cdn.jsdelivr.net/npm/smokey-fluid-cursor@latest/dist/index.global.js"></script>

    <script type="module">
      window.addEventListener("DOMContentLoaded", () => {
        if (window.SmokyFluid) {
          const fluid = SmokyFluid.initFluid();
        } else {
          console.error("SmokyFluid not found!");
        }
      });
    </script>
  </body>
</html>

⚙️ Configuration

Customize the fluid simulation with these configuration options:

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme