Animated Cursor Style Examples and How to Build ThemAnimated cursors can elevate a website’s interactivity, provide subtle feedback, and create memorable experiences for users. This article covers why animated cursors matter, best practices, a variety of example designs, and step-by-step instructions to build them using CSS, JavaScript, and SVG. Code snippets are included so you can try each example and adapt it to your project.
Why animated cursors matter
Animated cursors:
- Improve perceived responsiveness by giving immediate visual feedback.
- Enhance brand personality when tailored to brand style or tone.
- Guide user attention to interactive elements or important UI regions.
- Increase delight and engagement when used thoughtfully.
However, they can also distract or reduce accessibility if overused, so apply them selectively.
Accessibility and performance considerations
Before adding animated cursors, follow these guidelines:
- Provide a way to disable or reduce motion for users who prefer reduced motion (respect the prefers-reduced-motion media query).
- Ensure cursor changes don’t obscure essential content or controls.
- Keep animations lightweight; avoid heavy repaints or frequent layout thrashing.
- Test across browsers and input devices (mouse, touchpads, touchscreens). On many touch devices the cursor is irrelevant; make sure the experience degrades gracefully.
Example prefers-reduced-motion CSS:
@media (prefers-reduced-motion: reduce) { .cursor, .cursor-dot { animation: none !important; transition: none !important; } } Example 1 — Simple trailing dot
A minimal custom cursor made of a dot that follows the pointer with a smooth lag for a slick, modern feel.
HTML:
<div class="cursor-dot"></div> CSS:
.cursor-dot { position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: black; pointer-events: none; transform: translate(-50%, -50%); transition: transform 0.12s linear; z-index: 9999; } JavaScript:
const dot = document.querySelector('.cursor-dot'); document.addEventListener('mousemove', e => { dot.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; }); Notes: Increase transition duration for more lag; use transform for GPU-friendly animations.
Example 2 — Expanding ring on click
A ring that expands and fades when the user clicks — useful as a click-feedback effect.
HTML:
<div class="cursor-ring"></div> CSS:
.cursor-ring { position: fixed; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #111; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; } .cursor-ring.expand { animation: ringExpand 600ms forwards; } @keyframes ringExpand { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3); } } JavaScript:
const ring = document.querySelector('.cursor-ring'); document.addEventListener('mousemove', e => { ring.style.left = e.clientX + 'px'; ring.style.top = e.clientY + 'px'; }); document.addEventListener('click', () => { ring.classList.remove('expand'); void ring.offsetWidth; ring.classList.add('expand'); }); Example 3 — Magnetic cursor with hover growth
A cursor that enlarges and attracts toward interactive elements (buttons, links) for a “magnetic” effect.
HTML:
<div class="cursor-large"></div> <button class="magnetic">Hover me</button> CSS:
.cursor-large { position: fixed; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.6); pointer-events: none; transform: translate(-50%, -50%); transition: transform 0.15s ease, width 0.15s ease, height 0.15s ease; z-index: 9999; } button.magnetic:hover ~ .cursor-large, button.magnetic:focus ~ .cursor-large { /* Note: DOM structure must place cursor after buttons for this selector to work */ } JavaScript (better: compute distance and scale):
const cursor = document.querySelector('.cursor-large'); const magneticEls = document.querySelectorAll('.magnetic'); document.addEventListener('mousemove', e => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); magneticEls.forEach(el => { el.addEventListener('mousemove', e => { const rect = el.getBoundingClientRect(); const dx = e.clientX - (rect.left + rect.width / 2); const dy = e.clientY - (rect.top + rect.height / 2); const dist = Math.hypot(dx, dy); const maxDist = 100; const strength = Math.max(0, 1 - dist / maxDist); cursor.style.transform = `translate(${e.clientX - dx * 0.25}px, ${e.clientY - dy * 0.25}px) scale(${1 + strength * 0.6})`; }); el.addEventListener('mouseleave', () => { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; }); }); Tip: For robust layouts, compute transforms relative to center and avoid fragile sibling selectors.
Example 4 — SVG cursor with animated stroke
Use an inline SVG for crisp scalable animated cursors, such as a small SVG icon that animates on hover.
HTML:
<svg class="cursor-svg" width="40" height="40" viewBox="0 0 40 40" aria-hidden="true"> <circle cx="20" cy="20" r="8" fill="none" stroke="#111" stroke-width="2" stroke-dasharray="50" stroke-dashoffset="50"/> </svg> CSS:
.cursor-svg { position: fixed; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; } .cursor-svg.animate circle { animation: dash 800ms forwards; } @keyframes dash { to { stroke-dashoffset: 0; } } JavaScript:
const svg = document.querySelector('.cursor-svg'); document.addEventListener('mousemove', e => { svg.style.left = e.clientX + 'px'; svg.style.top = e.clientY + 'px'; }); document.addEventListener('mouseenter', () => svg.classList.add('animate')); document.addEventListener('mouseleave', () => svg.classList.remove('animate')); SVG allows complex vector shapes, masks, and filters (blur, drop-shadow) without raster artifacts.
Example 5 — Cursor trail with multiple particles
Create a trailing effect made of multiple small elements that follow the pointer with staggered motion for a particle-like trail.
HTML:
<div id="trail"></div> CSS:
#trail { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; } .trail-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.85); transform: translate(-50%, -50%); will-change: transform, opacity; } JavaScript:
const trail = document.getElementById('trail'); const dots = Array.from({length: 8}, (_, i) => { const d = document.createElement('div'); d.className = 'trail-dot'; d.style.opacity = String(1 - i * 0.12); trail.appendChild(d); return d; }); let positions = dots.map(() => ({x: 0, y: 0})); document.addEventListener('mousemove', e => { positions[0] = { x: e.clientX, y: e.clientY }; for (let i = 1; i < positions.length; i++) { positions[i].x += (positions[i-1].x - positions[i].x) * 0.35; positions[i].y += (positions[i-1].y - positions[i].y) * 0.35; } dots.forEach((dot, i) => { dot.style.transform = `translate(${positions[i].x}px, ${positions[i].y}px)`; }); }); Performance: Use requestAnimationFrame to batch updates if you notice jank at high mouse move frequencies.
How to structure this in a real project
- Keep cursor code modular (separate CSS/JS files).
- Only initialize custom cursors on non-touch devices; detect touch via matchMedia or ‘ontouchstart’ in window.
- Provide a toggle or respect system preferences for reduced motion.
- Use transforms and opacity for GPU-accelerated rendering.
- Debounce heavy computations, and prefer requestAnimationFrame for animation loops.
Example init guard:
if ('ontouchstart' in window || window.matchMedia('(pointer: coarse)').matches) { document.documentElement.classList.add('no-custom-cursor'); } else { // initialize cursor } Quick checklist before shipping
- Works across major browsers (Chrome, Safari, Firefox, Edge).
- Respects prefers-reduced-motion.
- Disabled on touch devices.
- Does not block inputs or interfere with accessibility.
- Efficient (uses transforms, rAF, minimal DOM nodes).
Animated cursors are a powerful tool when used sparingly and thoughtfully. The examples above range from subtle to playful—pick what fits your brand and UX goals, optimize for performance and accessibility, and iterate with user feedback.
Leave a Reply