---
title: "Cursor Crosshair — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Nora Salem · Cursors. Cursor Crosshair is a premium cursor interaction that adds a precise crosshair following the pointer, optional axis labels, and a dynamic…"
canonical: "https://framer.elliotli.dev/component/cursor-crosshair"
---

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

# Cursor Crosshair

Interactive Cursor with Image

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

![Cursor Crosshair preview image 1](https://framer.elliotli.dev/og/component/cursor-crosshair/98343b8956b821b2/1600x1200.jpg)

## Summary

Cursor Crosshair is a premium cursor interaction that adds a precise crosshair following the pointer, optional axis labels, and a dynamic image preview that changes as you move.

## Description

**Cursor Crosshair** is a premium cursor interaction that adds a precise crosshair following the pointer, optional axis labels, and a dynamic image preview that changes as you move.

Designed for portfolios, creative studios, photography sites, architecture websites, and interactive landing pages. It can run across the **whole site** or be limited to a **single section**.

### What you can customize

-   **Mode** — Apply the effect to the whole site or a specific section.
    
-   **Crosshair** — Customize color, thickness, opacity, and line style.
    
-   **Axis Labels** — Add custom left/right labels such as `PREV` / `NEXT`, with full control over typography, color, position, and text transformation.
    
-   **Center Image** — Add one or multiple images that follow the cursor.
    
-   **Image Size & Style** — Adjust width, height, radius, and opacity.
    
-   **Image Loop** — When using multiple images, control how often they change based on cursor distance, transition speed, and reveal style.
    
-   **Image Frame** — Add a solid, dashed, dotted, or bracket-style frame with customizable color, thickness, spacing, and backdrop.
    
-   **Clickable Elements** — Automatically hide the crosshair when hovering interactive elements, with a customizable CSS selector and fade duration.
    
-   **Background** — Customize the section background when using **This Section** mode.
    

**For any questions, collaborations, or opportunities, feel free to contact me**

[**Email**](https://norasalem0101@gmail.com/)

**or**

[**X**](https://x.com/SalXNura)

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

-   All · #7625

## Details

- **Author**: Nora Salem
- **Price**: $12.00
- **Published**: 2026-08-21
- **Updated**: 2026-08-21
- **Added**: 2026-08-21
- **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…