---
title: "Circle Cursor — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Integry · Cursors. Premium Circle Cursor is a high-performance custom cursor component built specifically for Framer."
canonical: "https://framer.elliotli.dev/component/circle-cursor"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/Circle Cursor

# Circle Cursor

Best framer component

[View on Framer](https://framer.com/marketplace/components/circle-cursor/?via=elliot-li)

![Circle Cursor preview image 1](https://framer.elliotli.dev/og/component/circle-cursor/4bb1fc11dda9194c/1600x1200.jpg)

## Summary

Premium Circle Cursor is a high-performance custom cursor component built specifically for Framer.

## Description

Premium Circle Cursor is a high-performance custom cursor component built specifically for Framer. It replaces the default system cursor with a smooth animated dot and ring that dynamically reacts to hover interactions across your website. When hovering over buttons, links, forms, or interactive elements, the cursor expands into a soft filled circle for a polished, high-end experience seen on modern award-winning websites.

The cursor movement is powered by natural spring physics for ultra-smooth motion, while the optional invert blend mode allows the cursor to automatically adapt its visibility on both light and dark backgrounds. Every part of the cursor is fully customizable directly from Framer controls, including size, color, hover size, thickness, smoothness, and hover fill.

This component is optimized for performance, works across all modern browsers, and does not interfere with your site’s native layout or interactions.

Perfect for portfolios, agencies, SaaS landing pages, personal brands, creative studios, and experimental web experiences.

### Key Features

-   Smooth animated dot + outer ring cursor
    
-   Optional invert blend mode (light/dark auto contrast)
    
-   Fully customizable:
    
    -   Cursor color
        
    -   Dot size
        
    -   Ring size
        
    -   Ring thickness
        
    -   Hover size
        
    -   Hover fill color
        
    -   Smoothness level
        
-   Magnetic-style delayed ring follow
    
-   Auto detects clickable elements
    
-   Zero layout disruption
    
-   Ultra-lightweight & optimized
    
-   Works only in Preview/Live mode (not in editor)
    

### Use Cases

-   Portfolio websites
    
-   Creative agencies
    
-   SaaS landing pages
    
-   Startup hero sections
    
-   Personal brands
    
-   Experimental UI websites
    

### What’s Included

-   Fully working **Framer Code Component**
    
-   Ready-to-use **property controls**
    
-   Live hover detection
    
-   Invert blend mode toggle
    
-   Editor-safe preview mode
    

### Compatibility

-   ✅ Desktop (Mouse & Trackpad)
    
-   ❌ Not required for mobile
    

### How to Use (Setup Instructions)

1.  Add a **Code Component** in Framer
    
2.  Paste the provided cursor code
    
3.  Drop the component anywhere on your page
    
4.  Move the component out of the canvas.
    
5.  Customize color, size, hover behavior from the right panel
    
6.  Preview your site — the cursor activates automatically
    

That’s it. No extra setup required.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-mstugmfp-YDj09CkXXZw5vHY4jgwToNAnm7nu0X)

### Customization Options (From Controls)

-   Cursor Color
    
-   Invert Mode On/Off
    
-   Dot Size
    
-   Ring Size
    
-   Ring Thickness
    
-   Hover Expansion Size
    
-   Hover Fill Color
    
-   Movement Smoothness
    

### Performance & Optimization

-   Does not block pointer events
    
-   Uses GPU-accelerated transforms
    
-   No layout reflows
    
-   Auto-cleans event listeners
    
-   No external libraries required
    

### Refund Policy

All sales are final due to the nature of digital products. Please review all details before purchasing.

### Questions & Support

Free lifetime updates & email support. Questions? Reach out via email [**integrystudio@gmail.com**](mailto:integrystudio@gmail.com) or on [**LinkedIn**](https://www.linkedin.com/in/amio-alam-pial-29649a230/).

### Setting Up

Need help setting up your website or integrating this component?

Reach out, and we’ll help get it running perfectly in your Framer project.

[**Demo**](https://integry.framer.ai/premiumcirclecursor)

## Rank history [How rankings work →](/terms#rankings)

-   All · #3657

## Details

- **Author**: Integry
- **Price**: $6.00
- **Published**: 2025-12-31
- **Updated**: 2026-10-04
- **Added**: 2025-12-14
- **Categories**: Cursors

## More like this

-   [Ribbon Hero](/component/ribbon-hero) — Divyesh WebCraft · Free — 3D ribbon with smooth motion
-   [Spider Hunt](/component/spider-hunt) — Karim Saif · $6 — ٍpider that tracks your cursor
-   [Pixel Fluid](/component/pixel-fluid) — Jamik · $12 — Fluid cursor trail in pixels/ASCII
-   [CursorImageTrail](/component/cursorimagetrail) — princeee · $20 — Image Trail is a dynamic Framer component that creates an immersive hover experience by displaying a sequence of images that trail behind…