Skip to content
Effects / Glass / Shaders

StarField

client25.75 kB
@stellaria/nebula-webStarFieldProps

Preview

Props

16
PropTypeDefault

accentColor

The tint of the occasional accent star, which also carries a wider glow.

ColorExtended"accent.400"

accentEvery

One star in every this many takes `accentColor`. It feeds the generator, so changing it does not merely recolour the accents — it picks a different set of them.

number5

aurora

Adds the slow drifting colour blobs behind the field. It is a second effect on top of an effect, so it belongs only where the field is unquestionably the region's focus.

booleanfalse

className

string

—

color

The colour of grid and stars alike: the grid takes `translucency` of it, the stars 70 %. It is a text role by default so the field follows the theme's ink rather than a fixed white.

ColorExtended"text.primary"

density

How many stars. The cost is paid once, in nodes and in a CSS animation the GPU composites — it is not a per-frame cost on the main thread, so density is a visual decision rather than a budget one.

StarDensity"md"

fade

The elliptical mask that dissolves both layers towards the edges. It is what stops the field ending in a visible seam where its region does.

booleantrue

fixed

Pins the field to the viewport. `parallax` already does this, so the two rarely go together.

booleanfalse

grid

Whether the rule grid is drawn behind the stars.

booleantrue

gridSize

Side of a grid cell, in pixels. Read only with `grid`.

number56

parallax

Drifts grid and stars at different rates as the page scrolls, and pins the field to the viewport to do it. It never subscribes on a coarse pointer or under reduced motion: on touch that is a performance stop, not a preference one.

booleanfalse

scroller

Whose scroll drives the parallax. Left out it listens to the window, which is wrong whenever the page scrolls inside a container instead of the document — there the field would simply not move.

RefObject<HTMLElement | null>

—

seed

Seeds the low-discrepancy sequence the star layout comes from. The layout is generated, never random, so server and client agree and hydration holds; change this for a different sky at the same density.

number1

translucency

The grid's alpha, as a percentage of `color`. ADR-129 pins it at 1 for the page-wide ambient layer; the default belongs to a hero, where the field is the region's one dominant effect.

number4

twinkle

Whether the stars pulse. It stops on its own under `prefers-reduced-motion` and under `motion.tier: "minimal"`, and the field is swapped for an even static one — not frozen wherever each star happened to be, which would leave some of them invisible.

booleantrue

zIndex

number

—

Also accepts

On top of its own props, this component forwards these groups.

Style props · 127