Documentation

GuidesComponents

SmokeFill

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

Props

colorAstring
Default:#8cf3ff
Color of fresh smoke
colorBstring
Default:#04a0d6
Color smoke transitions to as it ages
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center position of the shape
scalenumber
Default:1
Scale of the shape (1 = default size)
emitFrom{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Emission source point within the shape
directionnumber
Default:0
Emission direction (0 = up, 90 = right, 180 = down, 270 = left)
speednumber
Default:10
Emission velocity strength
spreadnumber
Default:60
Emission cone angle in degrees
emitRadiusnumber
Default:0.03
Size of the emission area
intensitynumber
Default:1
Smoke emission density
dissipationnumber
Default:0.3
How fast smoke fades over time
detailnumber
Default:25
Fine-scale swirling detail
gravitynumber
Default:0.5
Downward gravitational pull on smoke — 0 = weightless, negative values = smoke rises
colorDecaynumber
Default:0.4
How quickly smoke shifts from Color A to Color B
mouseInfluencenumber
Default:0.1
Strength of cursor influence
mouseRadiusnumber
Default:0.1
Radius of cursor influence area
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:linear
Color space for color interpolation
shapeShapeConfig
Default:circleSDF
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.
shapeSdfUrlstring
Default:""
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.

Usage

<Shader>
  <SmokeFill
    intensity={1}
  />
</Shader>
Previous
Smoke
Next
Solarize