GlowFrame

GlowFrame is a hairline frame with an accent glow around its content. Use it to highlight a single element, such as the current voice state or an active readout.

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

Static glow

By default the frame shows the --glow halo; strong switches to the larger --glow-strong. The frame is a <div> with a 1px --accent-dim border and 2px radius; add padding with className.

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

export default function Static() {
    return (
        <>
            <GlowFrame className="px-6 py-4">
                <span className="text-[10px] text-text-secondary">Default glow</span>
            </GlowFrame>
            <GlowFrame strong className="px-6 py-4">
                <span className="text-[10px] text-accent">LISTENING…</span>
            </GlowFrame>
        </>
    );
}

Breathe

breathe replaces the static glow with a slow pulse between --glow and --glow-strong.

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

export default function Breathe() {
    return (
        <GlowFrame breathe className="px-6 py-4">
            <span className="text-[10px] uppercase tracking-[1px] text-accent">Standby</span>
        </GlowFrame>
    );
}

Accessibility

• GlowFrame is a plain <div> without a role; the glow is purely visual. Do not rely on it alone to convey state, also put the state into text.
• With prefers-reduced-motion: reduce the breathe pulse stops and the static glow (--glow, or --glow-strong with strong) is shown instead.

API