Components
Custom Cursor
The component accepts props for cursor type selection, colors, and sizing, with all styles implemented inline as requested. It includes all six cursor variations: arrow-pointer, big-circle, ring-dot, circle-and-dot, glitch-effect, and motion-blur, each with their unique animations and hover effects.
"use client";
import CustomCursor from "@/components/ui/custom-cursor";
const settings = {
glitchColorR: "#ff4f71",
glitchColorB: "#00feff",
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen bg-background">
<CustomCursor
cursorType="glitch-effect"
glitchColorR={s.glitchColorR}
glitchColorB={s.glitchColorB}
/>
</div>
);
}