StarField
@stellaria/nebula-webStarFieldPropsPreview
Props
16| Prop | Type | Default |
|---|---|---|
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. | number | 5 |
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. | boolean | false |
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. | boolean | true |
fixed Pins the field to the viewport. `parallax` already does this, so the two rarely go together. | boolean | false |
grid Whether the rule grid is drawn behind the stars. | boolean | true |
gridSize Side of a grid cell, in pixels. Read only with `grid`. | number | 56 |
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. | boolean | false |
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. | number | 1 |
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. | number | 4 |
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. | boolean | true |
zIndex | number | — |
Also accepts
On top of its own props, this component forwards these groups.