5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:T112c,

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)

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

That’s it. No extra setup required.

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 or on LinkedIn.

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

59:[["$","$L5c",null,{"post":{"id":"019b7659-7653-7916-87a0-f2b1166b30fe","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"189902f2-577b-409b-a96e-d63b629fc3b4","name":"Integry","slug":"integrystudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/96437/avatar-MfTznqKeqttkCeqaHZ3PNQowNQRZ0W.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"XSRKKavYM1mmJ7lPYJDC","resolved":true,"title":"Circle Cursor","body":"$5d","bodyJson":null,"introduction":"","slug":"circle-cursor","author":{"framerUserId":"189902f2-577b-409b-a96e-d63b629fc3b4","name":"Integry","slug":"integrystudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/96437/avatar-MfTznqKeqttkCeqaHZ3PNQowNQRZ0W.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/XSRKKavYM1mmJ7lPYJDC/circle-cursor-C3dthfsyyKBMxWYM5Ix1aUdRQNk89j"}],"post":null,"createdAt":"2025-12-14T19:21:30.215Z","updatedAt":"2026-08-22T20:26:25.417Z","publishedAt":"2025-12-31T21:38:53.139Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://premiumcirclecursor.framer.website/","price":"6","paymentUrl":"https://integry.lemonsqueezy.com/buy/c8e5b6b0-d87d-4344-905f-b59e6ef3b1a0","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"YTte4X6UQEZrekrUdEp2"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-31T21:38:53.139Z","updatedAt":"2025-12-31T21:38:53.139Z","reported":false}}],"$L5e"]

Suggested for you