Component
Crosshair Component for Framer
This is a Framer component that adds a fully customizable crosshair to your site. Just drop it in, adjust the colors, thickness, and dot settings, and watch it follow the cursor in real time.
Created by
About the resource
To use the Crosshair Component in Framer, drop it into your project to create a custom crosshair that follows the mouse. You can style it exactly how you want—set the vertical and horizontal line colors, adjust their thickness, and pick a dot color for the center point. Want a clean look? You can hide the center dot entirely with Dot Disabled, or even hide the default cursor using Hide Cursor.
You also get control over how the crosshair behaves. Hide Outside makes it disappear when the mouse leaves the component area, which is great for hover-based interactions. And if you're adjusting layout in the editor, toggle Canvas Preview to see the crosshair live in the Framer canvas while designing.
About the resource
To use the Crosshair Component in Framer, drop it into your project to create a custom crosshair that follows the mouse. You can style it exactly how you want—set the vertical and horizontal line colors, adjust their thickness, and pick a dot color for the center point. Want a clean look? You can hide the center dot entirely with Dot Disabled, or even hide the default cursor using Hide Cursor.
You also get control over how the crosshair behaves. Hide Outside makes it disappear when the mouse leaves the component area, which is great for hover-based interactions. And if you're adjusting layout in the editor, toggle Canvas Preview to see the crosshair live in the Framer canvas while designing.
About the resource
To use the Crosshair Component in Framer, drop it into your project to create a custom crosshair that follows the mouse. You can style it exactly how you want—set the vertical and horizontal line colors, adjust their thickness, and pick a dot color for the center point. Want a clean look? You can hide the center dot entirely with Dot Disabled, or even hide the default cursor using Hide Cursor.
You also get control over how the crosshair behaves. Hide Outside makes it disappear when the mouse leaves the component area, which is great for hover-based interactions. And if you're adjusting layout in the editor, toggle Canvas Preview to see the crosshair live in the Framer canvas while designing.
Properties of the crosshair component for Framer.
Properties of the crosshair component for Framer.
Properties of the crosshair component for Framer.
