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 custom animated target/crosshair graphic. When the visitor hovers over an element you’ve marked as a “target,” the cursor reacts — snapping to corners, expanding, or highlighting — to draw attention to that element.

Setup Guide

Step 1 — Copy the component Copy the TargetCursor component into your own project’s code files.
Step 2 — Copy the override This component relies on a code override (withCursorTarget) to mark which elements the cursor should react to. Copy the following override code into your project as well.
Step 3 — Add the cursor to your page Place an instance of TargetCursor anywhere on the page (it renders invisibly and tracks the mouse globally — position doesn’t matter, but adding it once per page is enough).
Step 4 — Mark your interactive elements Select any element you want the cursor to “target” (buttons, cards, links, images) and apply the withCursorTarget override to it via its code override setting. This tells TargetCursor to activate its targeting animation when the visitor hovers over that specific element.
Step 5 — Customize Use the component’s exposed controls to adjust:
- Cursor color/accent
- Size of the targeting reticle
- Animation speed/easing
- Corner style (brackets, dots, crosshair)

import type { ComponentType } from "react"

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