A minimal, stylish custom cursor effect made with HTML, CSS, and vanilla JavaScript.
Ideal for interactive websites, portfolios, or any layout that demands a bit of flair.
Smooth animations. Fully customizable. No dependencies.
- Replaces the default cursor with a custom animated dot + circle.
- Follows user movement in real-time with a trailing animation.
- Expands and reacts on hover and click events.
- Easy to implement and modify.
- HTML provides a simple structure with no extra markup.
- CSS handles styling, sizing, and animations of the cursor elements.
- JavaScript listens for mouse movement and interaction events:
mousemove
updates cursor position.mousedown
andmouseup
trigger scaling animations.mouseenter
/mouseleave
control visibility and reset.
- π Smooth trailing animation
- π±οΈ Interactive scaling on click/hover
- π¨ Clean, modern design
- π‘ Easily themeable via CSS variables
- π¦ Lightweight and dependency-free
Fully compatible with modern browsers:
- β Chrome
- β Firefox
- β Safari
- β Edge
- β Arc
- β Brave
β οΈ Older browsers may not supportscroll-behavior: smooth
or modern CSS features.
- Scroll snapping is not yet implemented.
- Scrollbar visibility may vary across browsers; customization may be required.
- Keyboard navigation support is not included in this version.
- Clone or Download:
bash git clone https://github.com/masterjaneza/custom-cursor-style---V1.git
- Open the Project:
- Open
index.html
in your browser
or - Use Live Server in VS Code.
- Open
This project is open source β use it, fork it, tweak it, remix it.
Just give credit where itβs due. βοΈ
If you like this or find it useful, give it a β star on GitHub.
Fork it, extend it, tag me β letβs inspire each other to scroll sideways in style.
Designed & developed by
Davit Janezashvili
aka MasterJaneza β Creative Developer & Designer
π± For best visuals, use in light mode.
Some gradients or shadows may appear dull in dark mode.