SmokeFill
Fill a shape with swirling fluid smoke that interacts with the shape boundary
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | color | #8cf3ff | Color of fresh smoke |
| colorB | color | #04a0d6 | Color smoke transitions to as it ages |
| origin | origin | center | Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. |
| center | position | {"x":0.5,"y":0.5} | Center position of the shape |
| scale | range | 1 | Scale of the shape (1 = default size) |
| rotation | range | 0 | Rotation of the shape in degrees |
| emitFrom | position | {"x":0.5,"y":0.5} | Emission source point within the shape |
| direction | range | 0 | Emission direction (0 = up, 90 = right, 180 = down, 270 = left) |
| speed | range | 10 | Emission velocity strength |
| spread | range | 60 | Emission cone angle in degrees |
| emitRadius | range | 0.03 | Size of the emission area |
| intensity | range | 1 | Smoke emission density |
| dissipation | range | 0.3 | How fast smoke fades over time |
| detail | range | 25 | Fine-scale swirling detail |
| gravity | range | 0.5 | Downward gravitational pull on smoke — 0 = weightless, negative values = smoke rises |
| colorDecay | range | 0.4 | How quickly smoke shifts from Color A to Color B |
| mouseInfluence | range | 0.1 | Strength of cursor influence |
| mouseRadius | range | 0.1 | Radius of cursor influence area |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for color interpolation |
| shape | shape | {"type":"sphere3D","radius":0.35} | Serialized shape configuration (JSON) |
| shapeSdfUrl | shape-upload | URL to a pre-generated SDF .bin file | |
| shapeType | - | Active SDF shape type |
Usage
vue
<Shader>
<SmokeFill
:intensity="1"
/>
</Shader>