LightTrace

LightTrace sends four short strips of light around the border of its parent. It marks a surface as live or active.

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

Basic

LightTrace is absolutely positioned 1px outside its parent's padding box, so it runs over a 1px border. Give the parent position: relative (the relative utility). One full lap takes six seconds.

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

export default function Basic() {
    return (
        <div className="relative w-[280px] border border-border px-6 py-4">
            <LightTrace />
            <span className="text-[10px] text-text-secondary">Uplink active</span>
        </div>
    );
}

Color

color takes any CSS color. It tints the tails of the strips, and the bright center and its glow become a lightened mix of the same color, so the whole trace follows it. Without color the tails use --accent and the center --accent-bright. Prefer theme variables such as var(--warning).

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

export default function Color() {
    return (
        <div className="relative w-[280px] border border-border px-6 py-4">
            <LightTrace color="var(--warning)" />
            <span className="text-[10px] text-warning">Thermal warning</span>
        </div>
    );
}

Building a custom card

LightTrace, PanelBloom, PanelRails and CornerBrackets are the layers a Panel is made of. Combine them to give your own surfaces the same chrome. Put the layers first and give the content relative so it paints above them.

import { useState } from 'react';
import { CornerBrackets, LightTrace, PanelBloom, PanelRails, Switch } from 'jarvis-react-ui';

export default function CustomCard() {
    const [active, setActive] = useState(true);

    return (
        <div className="flex flex-col items-center gap-4">
            <CornerBrackets focused={active}>
                <div className="relative h-[120px] w-[260px] border border-border bg-surface">
                    <PanelBloom active={active} />
                    <PanelRails visible={active} />
                    <LightTrace />
                    <div className="relative border-b border-border px-3 py-[6px] text-[9px] uppercase tracking-[2px] text-text-secondary">
                        Reactor core
                    </div>
                    <div className="relative px-3 py-2 text-[11px] text-text">Output 3.2 GW</div>
                </div>
            </CornerBrackets>
            <Switch label="Active" size="sm" checked={active} onCheckedChange={setActive} />
        </div>
    );
}

Accessibility

• The trace is aria-hidden and ignores pointer events.
• With prefers-reduced-motion: reduce the strips are not animated and not drawn; the trace is hidden.

API