React Eye Diagram

Copy Page

The single picture that tells a high-speed link engineer whether a serial channel works. Overlay a few hundred unit intervals of the waveform and the accumulated envelope forms an "eye"; a compliance mask in the centre must stay clear. Reports eye height, eye width, and any mask hits.

Installation

Props

Slicing and metrics

The component does not do DSP — you hand it pre-sliced traces, each one unit interval long, and it overlays them. That keeps the responsibility clear: your acquisition or simulation owns the clock recovery and slicing; this owns the picture and the pass/fail.

From the overlaid set it derives three numbers:

• Eye height — the vertical gap between the lowest "high" trace and the highest "low" trace at the sampling instant, as a fraction of the full swing. This is your noise margin.
• Eye width — the fraction of the UI over which the two rails stay separated. This is your timing margin against jitter.
• Mask violations — traces that intrude into the central hexagon. Zero is a pass; the mask turns red and the count is reported otherwise.

The demo synthesises a 10 Gb/s NRZ stream through a first-order channel with jitter and noise — all from a seeded generator, never Math.random(), so the server and client render the identical eye. Tighten the channel or widen the mask and you can watch the eye close and the mask light up. Pairs naturally with the Waveform Viewer for the time-domain view of the same signal.