COMPONENT / CURSOR

Signal Crosshair

A technical crosshair with measured axes, coordinate telemetry, focus brackets and a velocity-sensitive center target for creative tools.

Ready

LIVE RENDERERCanvas 2D · VARIANT 01

RUNNING

DPR ≤ 2RESPONSIVEPOINTER SAFE

03 VARIANTSSELECT A STARTING STATE

RENDERERCanvas 2D

DEPENDENCIESReact + Canvas 2D

OUTPUTAdaptive live canvas

MOTIONReduced-safe

WHAT IT DOES

A technical crosshair with measured axes, coordinate telemetry, focus brackets and a velocity-sensitive center target for creative tools.

BEST FOR

Exploration cues
Portfolio detail
Pointer-led product moments

KEY FEATURES

Full surface axes remain locked to local coordinates
Velocity opens the center focus brackets
Position labels and ticks remain legible at compact sizes
A component-specific renderer and control contract—not a palette swap of another release
Compact and full previews share one visibility-aware production renderer

PERFORMANCE

Adaptive sampling, capped DPR and visibility-based suspension keep the renderer predictable. Test density on low-power mobile hardware before increasing it.

INTERACTION

Pointer and touch coordinates are container-scoped; offscreen renderers stop work and pixel ratio is capped.

ACCESSIBILITY

The visual canvas is decorative by default. Pair it with a semantic heading or description, and reduced motion holds a stable rendered frame.

BEHAVIOR

Built to move without taking over.

Full surface axes remain locked to local coordinates
Velocity opens the center focus brackets
Position labels and ticks remain legible at compact sizes
A component-specific renderer and control contract—not a palette swap of another release
Compact and full previews share one visibility-aware production renderer

USE IT