Try these interactions
- Press Tab to move focus and see the dual-contour focus ring.
- Press Tab once at the top of the page to reveal the skip link.
- Double-tap Ctrl to trigger the Cursor Radar at your mouse pointer.
- Tab rapidly or jump from the header to the footer to see the Saccade Animation.
- Enable prefers-reduced-motion in your OS to see safe degradation.
- Enable High Contrast Mode (Windows) or forced-colors in DevTools.
Basic Interactive Controls
Tab through buttons, links, and form fields to see FocusBeacon track each focus target.
Overflow Escape
FocusBeacon lives in a fixed overlay, so it remains visible even inside clipped or scrolling containers.
Scroll this area to see the ring stay pinned to the focused element.
Focus Shift Detection
Open this modal to trigger a large focus jump. Close it to return focus to the trigger button.
What FocusBeacon Provides
- Dual-Contour Ring: pure white inner and pure black outer contours for universal contrast.
- Overflow Escape: bypasses
overflow: hiddenvia a fixed DOM overlay. - focus-visible Aware: activates only on keyboard navigation.
- Cursor Radar: double-tap Ctrl to locate the cursor.
- Focus Trail: optional breadcrumb halos for focus history.
- Saccade Animation: directional cue for large focus jumps.
- Skip-Link Beacon: extra visibility for skip-to-content links.
- Developer HUD: debug panel showing focus metadata.
- Reduced Motion Safe: respects
prefers-reduced-motion. - Forced Colors Support: remains visible in Windows High Contrast Mode.