5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/02hyzon6wywme.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T97f,

Crosshair Cursor

A full-screen interactive crosshair designed to add a precise, futuristic layer of motion to your Framer projects.

The crosshair follows the user's pointer across the entire viewport, with customizable lines, glow effects, center points, click states, and live cursor coordinates.

Features

Full-Screen Crosshair Two responsive lines follow the cursor across the entire viewport, creating a precise crosshair effect.

Custom Line Styles Choose between Solid, Dashed, or Dotted lines to match your design.

Click Interaction The crosshair can change color while the mouse button is pressed, creating instant visual feedback.

Glow Effect Add a customizable glow to the crosshair and center point with adjustable blur intensity.

Center Point Show or hide a center point and choose between Circle or Square shapes. Adjust its size directly from the property panel.

Live Coordinates Display the current X and Y cursor coordinates next to the crosshair. Font size can also be customized.

Smooth Motion Enable spring-based cursor movement for a more fluid and dynamic interaction. Control the motion using Damping and Stiffness settings.

Native Cursor Control Hide the browser's default cursor to create a fully custom cursor experience.

Mobile Control Automatically disable the crosshair on touch devices for a cleaner mobile experience.

Fully Customizable Control colors, thickness, line style, glow, coordinates, center point, motion, cursor visibility, and more directly from Framer's property panel.

Perfect For

Creative agency websites
Designer portfolios
Interactive landing pages
Experimental websites
Digital studios
Gaming-inspired interfaces
Futuristic websites
Award-style websites

Built for Framer

Drop the component into your project and customize everything directly through Framer's Property Controls. No additional setup is required.

Create anything from a minimal precision cursor to a glowing futuristic interface.

Make every movement part of the experience.

5a:[["$","$L5d",null,{"post":{"id":"01a0cc55-5975-728f-a6d6-cf02cb4d7733","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2bfbed2e-ac0f-4802-aa07-cb2c7037ed95","name":"Hendriawan","slug":"hendri-awan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/141269/avatar-VIjSxV4Ky4Vo4brUPPdZ6lMdpCKjbB.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"RTzxl7eSHr2r3B3Zh8ih","resolved":true,"title":"Crosshair cursor pro","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Crosshair Cursor"}]},{"type":"paragraph","content":[{"type":"text","text":"A full-screen interactive crosshair designed to add a precise, futuristic layer of motion to your Framer projects."}]},{"type":"paragraph","content":[{"type":"text","text":"The crosshair follows the user's pointer across the entire viewport, with customizable lines, glow effects, center points, click states, and live cursor coordinates."}]},{"type":"paragraph","content":[{"type":"text","text":"Features"}]},{"type":"paragraph","content":[{"type":"text","text":"Full-Screen Crosshair","marks":[{"type":"bold"}]},{"type":"text","text":" Two responsive lines follow the cursor across the entire viewport, creating a precise crosshair effect."}]},{"type":"paragraph","content":[{"type":"text","text":"Custom Line Styles","marks":[{"type":"bold"}]},{"type":"text","text":" Choose between Solid, Dashed, or Dotted lines to match your design."}]},{"type":"paragraph","content":[{"type":"text","text":"Click Interaction","marks":[{"type":"bold"}]},{"type":"text","text":" The crosshair can change color while the mouse button is pressed, creating instant visual feedback."}]},{"type":"paragraph","content":[{"type":"text","text":"Glow Effect","marks":[{"type":"bold"}]},{"type":"text","text":" Add a customizable glow to the crosshair and center point with adjustable blur intensity."}]},{"type":"paragraph","content":[{"type":"text","text":"Center Point","marks":[{"type":"bold"}]},{"type":"text","text":" Show or hide a center point and choose between Circle or Square shapes. Adjust its size directly from the property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Live Coordinates","marks":[{"type":"bold"}]},{"type":"text","text":" Display the current X and Y cursor coordinates next to the crosshair. Font size can also be customized."}]},{"type":"paragraph","content":[{"type":"text","text":"Smooth Motion","marks":[{"type":"bold"}]},{"type":"text","text":" Enable spring-based cursor movement for a more fluid and dynamic interaction. Control the motion using Damping and Stiffness settings."}]},{"type":"paragraph","content":[{"type":"text","text":"Native Cursor Control","marks":[{"type":"bold"}]},{"type":"text","text":" Hide the browser's default cursor to create a fully custom cursor experience."}]},{"type":"paragraph","content":[{"type":"text","text":"Mobile Control","marks":[{"type":"bold"}]},{"type":"text","text":" Automatically disable the crosshair on touch devices for a cleaner mobile experience."}]},{"type":"paragraph","content":[{"type":"text","text":"Fully Customizable","marks":[{"type":"bold"}]},{"type":"text","text":" Control colors, thickness, line style, glow, coordinates, center point, motion, cursor visibility, and more directly from Framer's property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect For"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Designer portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital studios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gaming-inspired interfaces"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Futuristic websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Award-style websites"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built for Framer"}]},{"type":"paragraph","content":[{"type":"text","text":"Drop the component into your project and customize everything directly through Framer's Property Controls. No additional setup is required."}]},{"type":"paragraph","content":[{"type":"text","text":"Create anything from a minimal precision cursor to a glowing futuristic interface."}]},{"type":"paragraph","content":[{"type":"text","text":"Make every movement part of the experience.","marks":[{"type":"bold"}]}]}]},"introduction":"Best Crosshair cursor for Framer","slug":"crosshair-cursor-pro","author":{"framerUserId":"2bfbed2e-ac0f-4802-aa07-cb2c7037ed95","name":"Hendriawan","slug":"hendri-awan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/141269/avatar-VIjSxV4Ky4Vo4brUPPdZ6lMdpCKjbB.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2bfbed2e-ac0f-4802-aa07-cb2c7037ed95/01a0ebe0-76e9-74f9-ab99-743f5d1ec6b5.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1920,"height":1080}}],"post":null,"createdAt":"2026-09-23T03:35:40.127Z","updatedAt":"2026-09-29T06:36:03.844Z","publishedAt":"2026-09-23T03:35:40.125Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://yuzuyyy.framer.website/crosshair","price":"5","paymentUrl":"https://yuzuyyy.lemonsqueezy.com/checkout/buy/86a1c867-6471-4797-81e8-29dba6580dbe","workshop":false,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"324T6T9UpDbBeJMtcuPz","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-23T03:35:40.661Z","updatedAt":"2026-09-23T03:35:40.661Z","reported":false}}],"$L5f"]

Suggested for you