💨 React Smokey Fluid Cursor

A beautiful, interactive fluid simulation that creates stunning visual effects following your cursor movements for your React and Next.js application on web. Built with WebGL for high-performance real-time fluid dynamics.

!npm version
!package size minified

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


---

📦 Installation

``bash
npm i react-smokey-fluid-cursor

yarn add react-smokey-fluid-cursor

pnpm i react-smokey-fluid-cursor

bun add react-smokey-fluid-cursor
`

---

📸 Demo

Checkout demo here: Demo

Also see more details in Example:

!Demo

---

🚀 Quick Start

$3

`tsx
// src/App.tsx|jsx
import React from "react";

import { SmokeyFluidCursor } from "react-smokey-fluid-cursor";

function App() {
return (



);
}
`

$3

`tsx
// src/main.tsx|jsx
import React from "react";

import { SmokeyFluidCursor } from "react-smokey-fluid-cursor";

function Main() {
return (
<>


);
}

export default Main;
`

$3

`tsx
// pages/_app.tsx|jsx
import type { AppProps } from "next/app";

import { SmokeyFluidCursor } from "react-smokey-fluid-cursor";

function MyApp({ Component, pageProps }: AppProps) {
return (
<>
{/ Global ad observer /}



);
}

export default MyApp;
`

$3

`tsx
// app/layout.tsx|jsx
import "./globals.css";

import { SmokeyFluidCursor } from "react-smokey-fluid-cursor";

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (



{children}


);
}
`

---

⚙️ Configuration Options

Customize the fluid simulation with these configuration options:

| Property | Default Value | Description |
| --------------------- | ----------------------------- | ---------------------------------------------- |
| id | "react-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

- Website: www.farasat.me
- LinkedIn: linkedin.com/in/faraasat
- GitHub: github.com/faraasat