PanelBloom

PanelBloom is a soft accent glow that fills a surface from its top and bottom edges. Use it to show that a surface is focused or active.

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

Active

PanelBloom covers its parent (position: absolute; inset: 0), so the parent needs relative. When active is false the bloom is invisible; turning it on fades it in over 300ms and starts a slow brightness pulse. Put content after the bloom and give it relative so it paints on top.

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

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

    return (
        <div className="flex flex-col items-center gap-4">
            <div className="relative flex h-[90px] w-[260px] items-center justify-center border border-accent">
                <PanelBloom active={active} />
                <span className="relative text-[9px] uppercase tracking-[1px] text-accent">
                    {active ? 'Bloom active' : 'Bloom off'}
                </span>
            </div>
            <Switch label="Active" size="sm" checked={active} onCheckedChange={setActive} />
        </div>
    );
}

Panel has its own bloom tied to focused. To combine PanelBloom with the other chrome layers, see the custom card on LightTrace.

Accessibility

• The bloom is aria-hidden and ignores pointer events. It is a purely visual cue, so pair it with a state that is exposed otherwise, e.g. aria-selected or a text label.
• The pulse runs while active is true. With prefers-reduced-motion: reduce the bloom appears and disappears without fade or pulse and stays at a constant brightness.

API