Target Lock Cursor React component
A custom cursor of four corner brackets that roams freely, then snaps around whatever you point at — links, buttons or anything marked data-lock — resizing to its exact bounds with a quick focus squeeze and a label tag, like a camera locking on.
About the Target Lock Cursor component
Target Lock Cursor swaps the arrow for a small reticle of four corner brackets. As you move over links, buttons or anything you've marked with data-lock, the brackets jump out and frame that element exactly, with a quick focus squeeze and a little tag naming what you've locked onto.
It works inside one area of the page, so the rest of the site keeps its normal cursor, and it only appears for a mouse; touch and keyboard users get the page as usual.
When to use it
Use it for portfolios, creative studios, game and tech landing pages, or galleries where pointing at things should feel like aiming a camera.
Mark the meaningful things with data-lock and a short label; locking onto every word gets busy.
Installation
Add the Target Lock Cursor component to your project with the shadcn CLI. It lands in components/target-lock-cursor.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/target-lock-cursorOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<TargetLockCursor /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| targets CSS selector for elements the cursor locks onto. Elements with data-lock always count. | string | "a, button, [data-lock]" |
| color | string | "#d4ff3f" |
| size Size of the free-roaming reticle, in px. | number | 26 |
| padding Gap between a locked target and the brackets, in px. | number | 8 |
| corner Length of each corner bracket, in px. | number | 12 |
| showLabel Show the target's data-lock text in a tag above it. | boolean | true |
| keepCursor Keep the system cursor visible as well. | boolean | false |
- targets
CSS selector for elements the cursor locks onto. Elements with data-lock always count.
stringDefault: "a, button, [data-lock]" - colorstringDefault: "#d4ff3f"
- size
Size of the free-roaming reticle, in px.
numberDefault: 26 - padding
Gap between a locked target and the brackets, in px.
numberDefault: 8 - corner
Length of each corner bracket, in px.
numberDefault: 12 - showLabel
Show the target's data-lock text in a tag above it.
booleanDefault: true - keepCursor
Keep the system cursor visible as well.
booleanDefault: false
npm dependencies
Installed for you by the shadcn CLI.
Target Lock Cursor FAQ
- What does it lock onto?
- Anything matching targets (links and buttons by default) plus any element with a data-lock attribute; the data-lock text becomes the label.
- Can I keep the normal cursor?
- Yes, set keepCursor and the reticle draws alongside the system arrow.
- Does it work on phones?
- Touch screens have no hovering pointer, so the reticle stays hidden and the content works normally.
- Can I change its look?
- color sets the brackets, dot and tag; size is the free reticle, padding the gap around a locked target and corner the bracket length.
