Skip to content
tileio

Menu

11 layers · 6 free

Custom cursor effects for websites

A custom cursor should tell people something the system arrow can't, such as what a click will do or what is under the pointer. Each cursor here works inside its own block, appears after the first pointer move and leaves touch screens with their normal behaviour.

The last five are not cursors but answer the same search: backgrounds and a 404 page that react to where the pointer is, and a button that leans toward it.

The 11 layers, in order

  1. A soft disc that inverts whatever it crosses with mix-blend-mode: difference, swelling over headlines so whole words flip.

  2. A dot under the pointer and a ring that follows a beat behind, growing over anything marked as a target.

  3. A rounded square that morphs to wrap the button it nears and sits behind it as a highlight.

  4. A pill that says what a click will do (View, Drag, Open), with each target setting its own word.

  5. Photos spring up along the pointer's path and sink away, recycling eight nodes so the page never fills up.

  6. A torch beam that lights the content under the pointer and dims everything else; touch screens see it all lit.

  7. The background version: a grid revealed only inside a soft circle of light that follows the pointer.

  8. A real wave equation on a canvas: every pointer move drops a pebble whose rings reflect and interfere.

  9. Halftone dots that swell under a pointer spotlight, like sweeping a torch over a printed page.

  10. A pill button that leans toward the pointer within 120 px, its label moving further than the pill.

  11. A 404 whose owl follows the pointer with its eyes, or keyboard focus when there is no mouse.

Browse the full catalogue: Pages · Elements · Backgrounds

Related collections

All collections