An interactive WebGL-based fluid simulation that follows cursor movements.
The Smokey Cursor is a copy-paste component in the Cursor collection of Lightswind UI. Built with TypeScript, Tailwind CSS, and Framer Motion for clean developer experience and rapid UI building.
Add this import to your component file
1import SmokeyCursor from "@/components/lightswind/smokey-cursor"
Properties and options for customizing this component
Name | Type | Default | Description | Required |
|---|
Here’s a simple example of how to use this component
1import SmokeyCursor from "@/components/lightswind/smokey-cursor";23// Basic Usage - Full screen overlay4<SmokeyCursor />56// Custom Simulation Quality7<SmokeyCursor8 simulationResolution={256}9 dyeResolution={1024}10 enableShading={true}11/>1213// Performance Optimized for Mobile14<SmokeyCursor15 simulationResolution={64}16 dyeResolution={512}17 densityDissipation={5}18 velocityDissipation={3}19 enableShading={false}20/>2122// High Quality Desktop Experience23<SmokeyCursor24 simulationResolution={256}25 dyeResolution={2048}26 densityDissipation={2}27 curl={5}28 splatForce={8000}29 enableShading={true}30/>3132// Intense Fire-like Effect33<SmokeyCursor34 curl={10}35 splatForce={12000}36 densityDissipation={1.5}37 colorUpdateSpeed={20}38 backgroundColor={{ r: 0.8, g: 0.1, b: 0 }}39/>4041// Subtle Ambient Effect42<SmokeyCursor43 splatRadius={0.1}44 splatForce={3000}45 densityDissipation={8}46 velocityDissipation={5}47 colorUpdateSpeed={5}48/>
A product byＭＵＨＩＬＡＮ and Team❤️.
