gem smoke
A glassy gem with animated smoke flowing inside and around it. Up to six smoke colors, configurable distortion, and built-in fallback shapes.
Preview
live Upload your own logo or silhouette — or delete the image to use the built-in shape. Install
npm npm i @devmischief/shaders-svelte Code
import { GemSmoke } from '@devmischief/shaders-svelte';
<GemSmoke
width={1280}
height={720}
colors={['#1f1147', '#5b1d9b', '#a04ad9', '#ff7eb0']}
colorBack="#f0efea"
colorInner="#fafaf5"
shape="diamond"
innerDistortion={0.8}
outerDistortion={0.6}
outerGlow={0.55}
innerGlow={1}
offset={0}
angle={0}
size={0.8}
scale={0.6}
rotation={0}
offsetX={0}
offsetY={0}
speed={1}
fit="contain"
/>
Shader Props
14 | name | description | type | values |
|---|
| image | Optional source image used as the gem mask. When omitted, the chosen shape is used. | string | url |
| colors | Smoke gradient colors (up to 6). | string[] | hex / rgb |
| colorBack | Background color shown behind the shape. | string | hex / rgba |
| colorInner | Additional color mixed into the smoke inside the shape. | string | hex / rgb |
| shape | Built-in fallback shape used when no image is provided. | string | none · circle · daisy · diamond · metaballs |
| innerDistortion | Power of smoke distortion inside the shape. | number | 0 → 1 |
| outerDistortion | Power of smoke distortion outside the shape. | number | 0 → 1 |
| outerGlow | Visibility of smoke outside the shape. | number | 0 → 1 |
| innerGlow | Visibility of smoke inside the shape. | number | 0 → 1 |
| offset | Vertical drift of the smoke inside the shape. | number | −1 → 1 |
| angle | Direction of the flowing smoke. | number | 0 → 360° |
| size | Size of the smoke shape relative to the image box. | number | 0 → 1 |
| speed | Animation speed of the smoke. | number | 0 → 3 |
| fit | How the source image is fit into the canvas. | string | cover · contain |
Common Props
4 | name | description | type | values |
|---|
| originX | Reference point for positioning width in the canvas. | number | 0 → 1 |
| originY | Reference point for positioning height in the canvas. | number | 0 → 1 |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |