Split Panel Crosshair Visual CTA Block for React

The field turns the pointer's position into coordinates in a 256 by 128 space (x from its start edge, y up from its bottom edge, as on a graph), and the lines read them from two CSS variables, --x and --y, set on the field. Nothing is drawn on a canvas and no animation library runs: the lines are two one-pixel elements placed with start-(--x) and top-(--y). While the pointer or keyboard focus is in the field the lines track it directly; once both leave, a short CSS transition glides them back to the centre.

Yes. Inside the field are two real range inputs, named "Reticle, horizontal position" and "Reticle, vertical position", hidden visually but in the tab order. Tab to one and the arrow keys move the reticle 8 units at a time (Page Up and Page Down take bigger steps, Home and End jump to the edges), and a ring shows inside the field while one has focus. A screen reader reads each one as a slider with its value from 0 to 256 or 0 to 128.

WIDTH and HEIGHT at the top of the file set the space the readout counts in, and STEP sets the arrow-key distance. The field fills whatever box its half gives it and the coordinates are shares of that box, so nothing needs to match its shape. RINGS lists the rings as a share of the field's height. The readout is a Kbd fixed at 14 characters wide, so it doesn't change size as the digits do. Drop it, or print the position another way, if your page doesn't need it.

The field is always left to right, like a map or a code pane: the reticle follows the pointer's real position, and the readout keeps "x" before "y". The copy beside it, the divider and the buttons flip as usual.

Yes. Dragging a finger across the field moves the reticle, and lifting it sends the reticle home. Vertical swipes still scroll the page, because the field only takes sideways drags (touch-pan-y), so it never traps a phone's scroll.

The copy comes first, so the Shine Button is on the first screen, and the field follows under a rule that runs from rail to rail. It is a fixed height there (18rem, then 24rem from sm) and still edge to edge.

The copy fades and rises in once, the rings dim while the reticle is in use, the reticle glides back to the centre, and the Shine Button sweeps a band of light across itself on hover or focus. With reduced motion on, the entrance and the glide are off, so the reticle jumps, and the light fades in instead. It still follows the pointer and the arrow keys, since that is your own input, not animation.