Spark Cursor
OfficialA dazzling spark cursor effect that sparks on the user's mouse onClick, adding a magical touch to any webpage.
FreecursoronClickanimated
5 downloadsOonkooUI Team
Installation
Run the following command:
npx oonkoo add spark-cursorProps
SparkCursor Props
| Prop | Type | Default |
|---|---|---|
| sparkColor | string | '#fff' |
| sparkSize | number | 10 |
| sparkRadius | number | 15 |
| sparkCount | number | 8 |
| duration | number | 400 |
| easing | 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'ease-out' |
| extraScale | number | 1.0 |
| children | React.ReactNode | - |
Usage
Copy and paste the following code to use this component:
import { SparkCursor } from "@/components/oonkoo/spark-cursor";
<div className="relative h-[400px] w-full">
<SparkCursor sparkColor="#fff" sparkCount={8} />
</div>