Full Screen Crosshair

Overview

Full Screen Crosshair turns pointer movement into a measurement layer. The page feels inspected, targeted, and slightly dangerous in a good way.

Use Full Screen Crosshair when a technical, cyber, AI, editorial, or experimental brand wants the pointer to become part of the visual language. The page job is precision: movement should make the interface feel deliberate, not decorated.

The production risk is interference. A full-screen cursor layer can cover focus rings, fight selection, obscure controls, or feel absurd on touch devices. Treat it as disposable: disable it on coarse pointers, keep it below interactive UI, and make sure the page works perfectly without it.

Install

Usage

Component Code

Example Production Use Case

A cybersecurity landing page can use Full Screen Crosshair in the hero to make the page feel like an active targeting surface. The outcome is precision: the brand tone sharpens while the headline and CTA remain fully usable.

Best Used For

• Technical, cyber, AI, and experimental homepages where pointer tracking supports the brand mood.
• Desktop hero sections that can carry a full-screen visual cursor layer.
• Interactive pages where the crosshair can vanish without removing content or control.

Not For

Not for dashboards, checkout, forms, editors, documentation, or mobile-first routes where native cursor and text selection matter more.

Not for pages where the crosshair sits above links, inputs, modals, or focus states.

Performance Budget

Use a single overlay layer, update position with requestAnimationFrame, avoid layout reads on every pointer move, and remove listeners on unmount.

Accessibility and Mobile

Disable on coarse pointers. Keep native touch behavior. Preserve visible focus states, text selection, and click targets. Reduced-motion users should get the normal cursor without tracking lines.

Common Mistakes

• Placing the crosshair above clickable UI.
• Forgetting to disable the effect on touch devices.
• Letting coordinate or line motion distract from the CTA.