A customizable fluid cursor effect for React & Next.js Apps running on the web. Enhance user experience with smooth, interactive cursor animations. Perfect for modern web designs.
npm install 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

---
``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
`
---
Checkout demo here: Demo
Also see more details in Example:
!Demo
---
`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 |---
- 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
---
- 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
---
Built and maintained by Farasat Ali
- Website: www.farasat.me
- LinkedIn: linkedin.com/in/faraasat
- GitHub: github.com/faraasat