Scene

Scene is the full-screen backdrop of the HUD: a dark radial background with a drifting grid, scanlines, stars, a vignette, film grain and a horizon glow. Render it once behind everything else.

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

Basic

Scene is a fixed, full-viewport layer with z-index: 0 and an opaque background. Content that should appear above it needs a position (e.g. relative) and must come after it in the tree. In this demo the frame contains the layer; in an app it covers the viewport.

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

export default function Basic() {
    return (
        <>
            <Scene />
            <span className="relative text-[10px] uppercase tracking-[2px] text-text-secondary">
                J.A.R.V.I.S.
            </span>
        </>
    );
}

Layers

grid, stars and scanlines switch the optional layers off; all three are on by default. The background, vignette, grain and horizon glow are always drawn.

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

export default function Layers() {
    return (
        <>
            <Scene stars={false} scanlines={false} />
            <span className="relative text-[10px] uppercase tracking-[2px] text-text-secondary">
                Grid only
            </span>
        </>
    );
}

Star count

starCount sets the number of stars in the built-in StarField; the default is 60. Use fewer for a calmer backdrop or more for a denser sky.

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

export default function StarCount() {
    return (
        <>
            <Scene grid={false} scanlines={false} starCount={200} />
            <span className="relative text-[10px] uppercase tracking-[2px] text-text-secondary">
                200 stars
            </span>
        </>
    );
}

Backdrop

Combine Scene with a Reactor and ViewportCorners for the complete HUD backdrop, then put your panels on top. HUDShell renders exactly this stack for you, with props to toggle each piece.

import { Panel, Reactor, Scene, ViewportCorners } from 'jarvis-react-ui';

export default function Backdrop() {
    return (
        <>
            <Scene />
            <Reactor />
            <ViewportCorners />
            <Panel title="Diagnostics" className="relative h-[120px] w-[280px]">
                <span className="text-text-secondary">All subsystems nominal.</span>
            </Panel>
        </>
    );
}

Accessibility

• The whole backdrop is aria-hidden. Its layers ignore pointer events.
• With prefers-reduced-motion: reduce the grid drift and the star twinkle stop, so the backdrop is static. The grid and stars stay visible.

API