Custom Cirlce Cursor
Replace the default cursor with a sleek, animated dot + ring design. Fully customizable colors, sizes, hover effects & animations. Perfect for modern, premium websites
Make it with Workshop
Build your own component with AI
About this Component
Transform your website's user experience with a sleek, professional custom cursor that replaces the default system cursor. Perfect for creating modern, interactive designs that stand out.
✨ What it does:
Replaces the default cursor with a customizable dot + ring design
Smooth animations on hover and click interactions
Automatically detects and responds to buttons, links, and interactive elements
Mobile-responsive (hides on touch devices by default)
🎨 Fully customizable:
Adjust dot and ring sizes, colors, and border width
Multiple blend modes (difference, overlay, multiply, etc.)
Custom hover and click scale animations
Adjustable animation speeds and opacity
Toggle default cursor visibility
💼 Perfect for:
Portfolio websites and creative agencies
Modern SaaS landing pages
E-commerce sites wanting to enhance UX
Any project needing that premium, polished feel
🚀 Easy to use: Simply drag the component onto your canvas - no coding required! All customization happens through Framer's visual property panel. The cursor automatically works across your entire site.
