Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
import { SmoothCursor } from "@/components/ui/smooth-cursor"<SmoothCursor />To prevent the default browser cursor from overlapping with the custom cursor, add the following CSS globally:
* {
cursor: none !important;
}input,
textarea,
select {
cursor: text !important;
}💡 If you're using Tailwind CSS, you can add cursor-none to your layout wrapper:
<div className="cursor-none">
<SmoothCursor />
{/* your app */}
</div>| Prop | Type | Default | Description |
|---|---|---|---|
cursor | React.ReactNode | <DefaultCursorSVG /> | Custom cursor component to replace the default cursor |
springConfig | SpringConfig | See below | Configuration object for the spring animation behavior |
interface SpringConfig {
damping: number // Controls how quickly the animation settles
stiffness: number // Controls the spring stiffness
mass: number // Controls the virtual mass of the animated object
restDelta: number // Controls the threshold at which animation is considered complete
}const defaultSpringConfig = {
damping: 45,
stiffness: 400,
mass: 1,
restDelta: 0.001,
}Compatible with all modern browsers that support:
requestAnimationFrameWhen using this component, consider that: