SmokeFill

Fill a shape with swirling fluid smoke that interacts with the shape boundary

Props

  • colorA

    Color of fresh smoke

    Type
    string
    Default
    #8cf3ff

  • colorB

    Color smoke transitions to as it ages

    Type
    string
    Default
    #04a0d6

  • 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 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 shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the shape in degrees

    Type
    number
    Default
    0

  • emitFrom

    Emission source point within the shape

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

  • direction

    Emission direction (0 = up, 90 = right, 180 = down, 270 = left)

    Type
    number
    Default
    0

  • speed

    Emission velocity strength

    Type
    number
    Default
    10

  • spread

    Emission cone angle in degrees

    Type
    number
    Default
    60

  • emitRadius

    Size of the emission area

    Type
    number
    Default
    0.03

  • intensity

    Smoke emission density

    Type
    number
    Default
    1

  • dissipation

    How fast smoke fades over time

    Type
    number
    Default
    0.3

  • detail

    Fine-scale swirling detail

    Type
    number
    Default
    25

  • gravity

    Downward gravitational pull on smoke — 0 = weightless, negative values = smoke rises

    Type
    number
    Default
    0.5

  • colorDecay

    How quickly smoke shifts from Color A to Color B

    Type
    number
    Default
    0.4

  • mouseInfluence

    Strength of cursor influence

    Type
    number
    Default
    0.1

  • mouseRadius

    Radius of cursor influence area

    Type
    number
    Default
    0.1

  • colorSpace

    Color space for color interpolation

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

  • 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>
  <SmokeFill
    intensity={1}
  />
</Shader>