Target Cursor

A custom cursor component that transforms into a targeting reticle when hovering over interactive elements — perfect for portfolios, product showcases, or any site that wants a distinct, playful pointer interaction.

How It Works

TargetCursor replaces the default browser cursor with a dynamic, animated reticle featuring a central dot and rotating corner brackets. When the visitor hovers over any element matching your target selector, the cursor automatically halts its spin, smartly snaps and aligns to the element's bounding box, adapts to its aspect ratio, and tracks real-time layout changes (such as tickers). It also features responsive click-scaling for both idle and targeted states.

Setup Guide

Step 1 — Add the component
Copy the updated TargetCursor component directly into your Framer project's code files. (Note: Code overrides are no longer required!)
Step 2 — Place it on your page
Drag an instance of TargetCursor anywhere onto your canvas. It tracks global mouse movement automatically, so adding it once per page is sufficient.
Step 3 — Mark your interactive elements
Select any element you want the cursor to target (buttons, cards, links, images) and add the attribute data-cursor-target to it via Framer’s attribute settings. Alternatively, you can change the Snap Selector property to match a custom CSS class or selector.
Step 4 — Customize your settings
Use the component's property controls in the right sidebar to fine-tune your design:
- Snap Selector: The CSS selector used to identify targets (default: [data-cursor-target]).
- Turn Speed: Duration of the continuous idle spinning animation.
- Snap Transition: Choose the easing style when snapping to targets (Smooth / Ease Out, Spring / Bouncy, or Linear).
- Snap Speed: Duration of the snapping transition.
- Tint: Primary accent color for the cursor dot and brackets.
- Bracket Length & Thickness: Customizes the size and stroke weight of the corner brackets.
- Resting Gap: The default spacing of the brackets away from the mouse pointer when idle.
- Idle Click Scale & Target Click Scale: Adjusts the squeeze/shrink effect when clicking, separated into idle state and target-hover state.

License

Free for personal and commercial work, including templates you sell. Not for resale or redistribution as a standalone component.

import type { ComponentType } from "react"

export function withCursorTarget(Component: ComponentType): ComponentType {
    return (props: any) => {
        return <Component {...props} data-cursor-target="true" />
    }
}