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.
npm i smokey-fluid-cursor
yarn add smokey-fluid-cursor
pnpm i smokey-fluid-cursor
bun add smokey-fluid-cursorAlso see more details in Example:
import { initFluid } from "smokey-fluid-cursor";
// Initialize with default settings
initFluid();<!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><!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>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
});- 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