Skip to content
Effects / Glass / Shaders

StarField

client24.5 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