StarField

StarField scatters tiny twinkling stars over a surface. Use it for a deep-space backdrop behind the orb or inside a dark tile.

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

Basic

StarField covers its parent (position: absolute; inset: 0) at 60% opacity, so the parent needs relative and usually a dark background. Each star twinkles on a four-second loop with its own phase.

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

export default function Basic() {
    return (
        <div className="relative flex h-[120px] w-[320px] items-center justify-center overflow-hidden border border-border bg-bg">
            <StarField />
            <span className="relative text-[10px] uppercase tracking-[2px] text-text-muted">
                Deep space
            </span>
        </div>
    );
}

Count

count sets the number of stars; the default is 60. Star positions are computed deterministically from their index, so the same count always produces the same sky, on the server and on the client.

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

const COUNTS = [20, 60, 150];

export default function Count() {
    return (
        <>
            {COUNTS.map((count) => (
                <div
                    key={count}
                    className="relative flex h-[90px] w-[160px] items-end justify-center overflow-hidden border border-border bg-bg pb-2"
                >
                    <StarField count={count} />
                    <span className="relative text-[9px] text-text-muted">count={count}</span>
                </div>
            ))}
        </>
    );
}

Scene includes a StarField; its starCount prop sets the count.

Accessibility

• The star layer is aria-hidden and ignores pointer events.
• With prefers-reduced-motion: reduce the twinkle stops and every star stays at a constant, medium brightness.

API