Nebula

A volumetric gas nebula sealed inside polished glass; billowing emission clouds with hollow dark cavities and hot glowing cores, star fields drifting at real depth behind the gas, all refracted through the curved walls of the shape and dressed with studio reflections

Props

  • origin

    Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

    Type
    string
    Default
    center

  • center

    Center position of the nebula shape. Accepts CSS units, see Sizing and units.

    Type
    {x: number | string, y: number | string}
    Default
    {"x":0.5,"y":0.5}

  • scale

    Scale of the nebula shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the nebula shape in degrees

    Type
    number
    Default
    0

  • coreColor

    The hot color the densest gas cores glow with — the embedded newborn stars

    Type
    string
    Default
    #ffd9b0

  • gasColor

    The main emission color of the gas body — H-alpha rose by default

    Type
    string
    Default
    #ff5e7a

  • veilColor

    The color of the thin outer veils and the deep-space background behind the gas

    Type
    string
    Default
    #3a5bdb

  • colorSpace

    Color space the veil → gas → core ramps blend in

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    oklab

  • density

    Optical density of the gas — how strongly clouds occlude the stars and gas behind them

    Type
    number
    Default
    1

  • cavity

    How hollowed-out the nebula is — 0 fills the volume with cloud banks, high carves large dark voids between them

    Type
    number
    Default
    0

  • dust

    Cold dark dust lanes threading the gas — absorb-only tendrils that redden the clouds and stars behind them

    Type
    number
    Default
    0.55

  • gasScale

    Feature size of the gas — higher = finer, busier cloud detail

    Type
    number
    Default
    0.4

  • billow

    Turbulent folding of the clouds — 0 = smooth drifting banks, 1 = heavily churned billows

    Type
    number
    Default
    0.6

  • glow

    Hot emission bloom of the dense cores

    Type
    number
    Default
    0

  • seed

    Random seed — pans the gas field to a different region of noise space for a new cloud composition

    Type
    number
    Default
    0

  • stars

    Brightness of the star fields drifting at depth behind and inside the gas

    Type
    number
    Default
    0.07

  • starScale

    Density of the star fields — higher = smaller, busier stars

    Type
    number
    Default
    1

  • twinkle

    Intensity of the star twinkle (0 = steady stars, 1 = full shimmer)

    Type
    number
    Default
    0.35

  • refraction

    How strongly the curved glass walls bend the interior seen near the edges

    Type
    number
    Default
    0.5

  • environment

    Strength of the studio softboxes reflected in the polished glass surface

    Type
    number
    Default
    0.7

  • highlight

    Sharp key-light glint on the glass

    Type
    number
    Default
    1.15

  • highlightSoftness

    Specular highlight softness — lower is a tighter, sharper glint

    Type
    number
    Default
    0.5

  • lightAngle

    Direction of the key light and reflected studio, in degrees

    Type
    number
    Default
    315

  • edgeSoftness

    Softness of the shape boundary edge

    Type
    number
    Default
    0.05

  • speed

    Speed of the slowly churning gas and twinkling stars. 0 freezes the nebula.

    Type
    number
    Default
    0.3

  • shape

    Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

    Type
    ShapeConfig
    Default
    sphere3D

  • shapeSdfUrl

    URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

    Type
    string
    Default
    ""

Usage

<Shader>
  <Nebula />
</Shader>