react-smokey-fluid-cursor

v1.0.4

Published

a month ago

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 version package size minified

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

📦 Installation

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

React (CRA)

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

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

function App() {
  return (
    <div className="App">
      {/* Place observer once globally */}
      <SmokeyFluidCursor />
    </div>
  );
}

Vite + React

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

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

function Main() {
  return (
    <>
      <SmokeyFluidCursor />
    </>
  );
}

export default Main;

Next.js Pages Router

// 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 */}
      <SmokeyFluidCursor />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Next.js (App Router)

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

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <SmokeyFluidCursor />
        {children}
      </body>
    </html>
  );
}

⚙️ 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