ViewportCorners

ViewportCorners pins four large L-shaped marks to the corners of the screen, each with a small glowing dot. They frame the whole HUD like the corners of a viewfinder.

import { ViewportCorners } from 'jarvis-react-ui';

Basic

The corners are position: fixed, 6px from each edge, with z-index: 4. Render them once near the root of your app. In this demo the frame contains them; in an app they sit in the viewport corners.

import { ViewportCorners } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <>
            <ViewportCorners />
            <span className="text-[10px] uppercase tracking-[2px] text-text-muted">Viewport</span>
        </>
    );
}

HUDShell renders ViewportCorners by default (viewportCorners). See Scene for a full backdrop that combines them with a Reactor.

Accessibility

• All four corners are aria-hidden and ignore pointer events, so they never block clicks on content underneath.
• There is no wrapper element: className is applied to each of the four corner <span>s, so a utility such as opacity-30 affects all corners alike. Every corner also carries a position class (tl, tr, bl, br) for corner-specific styling in your own CSS.

API