Free
Brackets round a dot
Away from anything, the pointer is four brackets around a point.
FX-008 · Lock-on Cursor
A custom cursor that locks on.
The pointer becomes four corner brackets. Over anything you can use, they jump out and frame its exact box, with a readout of what it is. Buttons lean toward the pointer and spring back.
- Weight4.3 KB
- LibraryNone
- PhonesOff
- Licence€39
Live
See it live.
It is already running on this page. Move your pointer over these.
This effect is for a mouse or trackpad, so it never loads on a phone. Open this page on a laptop to try it.
On a box
Frame and crosshair
The brackets frame this card and a crosshair stays on your pointer, so you can aim at what is inside.
On a control
Locked on
Move onto the button and the frame jumps to it.
01 — Details
What it does.
Three clear states
Free, locked on a control, or locked on a box with a crosshair, so the visitor always knows where the pointer is.
Live readout
A small tag names what is under the pointer and its size. Name any target yourself, or turn the tag off.
Magnetic buttons
Buttons lean toward the pointer and spring back on release.
Colour plates
Boxes can take a tint at random each time, never the same twice running.
02 — Prompt
Free AI prompt.
Paste this into your AI coding tool to build the effect in your own stack. It carries the behaviour, the build and the traps we hit in production. It is free for pitches and personal work.
Build a lock-on custom cursor for this website in plain JavaScript, with no animation library. Behaviour - The pointer is four corner brackets around a small dot. - Over a control (link, button, input), the brackets jump out and frame its exact box, with a small tag naming it and its size. - Over a card or a big target, the brackets frame the box and a crosshair stays on the real pointer, in a colour that contrasts with the box, so the visitor can aim at what is inside. - Buttons lean toward the pointer while locked and spring back on release. Build - Use one fixed layer with pointer-events: none, above every overlay on the page, and aria-hidden. - In a single frame loop, ease the brackets toward their target, and read the target's rect every frame so they track scrolling. - Hide the native cursor with a class on the root element, but keep cursor: text in inputs and textareas. Must hold - Load it only for (pointer: fine), and never on touch screens. - With prefers-reduced-motion, keep the native cursor. - Check that the cursor stays visible over modals and menus: a layer below them makes the pointer vanish. - Remove the layer, the class and all listeners on teardown. Done when the visitor can always tell where the pointer is, over every layer of the page.
03 — Code
Or drop it in.
With a licence, the finished effect is one attribute. The small runtime fetches what it needs and removes everything again if the element goes.
<script src="/fx/sitefx.js"></script> <body data-fx="lock"> <a href="/work" class="btn" data-fx-lock-label="Our work">See the work</a> <div data-fx-lock-tint>A box that takes a tint</div> </body>
| Option | Default | What it does |
|---|---|---|
| data-fx-lock-hot | a, button… | What it locks onto |
| data-fx-lock-magnet | button, .btn | What leans toward the pointer |
| data-fx-lock-pull | 0.3 | How far it leans |
| data-fx-lock-readout | true | Set to false for no label |
| data-fx-lock-tint | — | On a box: it takes a tint when locked |
| data-fx-lock-label | — | On a target: what the readout calls it |
04 — FAQ
Questions.
Does a custom cursor hurt usability?
It can, if the pointer gets lost. This one always shows where you are, keeps the text cursor in form fields, and steps aside for reduced motion.
Does it work on phones?
It never loads there. Touch screens have no pointer, so the code is not even downloaded.
Does it need GSAP?
No. It runs on its own, on the small SiteFX runtime.
Will it sit above my menus and modals?
Yes, and its layer order can be set with the --fx-lock-z CSS variable if your site needs it higher.
Licence
Lock-on Cursor · €39
One effect, yours to keep. Unlimited client projects, 1 developer, 12 months of updates. Prices exclude VAT.