A reusable web component that creates a custom cursor with gradient trail effect.
- Include the script in your HTML:
<script src="https://raw.githack.com/DevManSam777/custom-cursor/main/custom-cursor.js" defer></script>- Add the component to your page:
<custom-cursor></custom-cursor>- Hide the default cursor:
body {
cursor: none;
}You can change the color theme using the theme attribute:
<!-- Default orange theme -->
<custom-cursor></custom-cursor>
<!-- Blue theme -->
<custom-cursor theme="blue"></custom-cursor>
<!-- Magenta theme -->
<custom-cursor theme="magenta"></custom-cursor>Available themes: orange (default), blue, magenta
<!DOCTYPE html>
<html>
<head>
<style>
body { cursor: none; }
</style>
</head>
<body>
<custom-cursor theme="blue"></custom-cursor>
<h1>Your content here</h1>
<script src="custom-cursor.js"></script>
</body>
</html>- Multiple color themes (orange, blue, magenta)
- Gradient trail effect
- Click animation effects
- Automatically hides on touch devices
- No dependencies required
- Works in all modern browsers