liquid metal
A futuristic flowing-metal material applied to a logo, silhouette, or built-in shape. Animated stripe pattern with chromatic dispersion.
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 { LiquidMetal } from '@devmischief/shaders-svelte';
<LiquidMetal
width={1280}
height={720}
colorBack="#aaaaac"
colorTint="#ffffff"
shape="diamond"
repetition={2}
softness={0.1}
shiftRed={0.3}
shiftBlue={0.3}
distortion={0.07}
contour={0.4}
angle={70}
scale={0.6}
rotation={0}
offsetX={0}
offsetY={0}
speed={1}
fit="contain"
/>
Shader Props
13 | name | description | type | values |
|---|
| image | Optional source image used as the metal mask. When omitted, the chosen shape is used. | string | url |
| colorBack | Background color shown behind the metal. | string | hex / rgba |
| colorTint | Overlay color blended onto the metal using colour-burn blending. | string | hex / rgb |
| shape | Built-in fallback shape used when no image is provided. | string | none · circle · daisy · diamond · metaballs |
| repetition | Density of the animated stripe pattern. | number | 1 → 10 |
| softness | Color transition sharpness. 0 = hard edge, 1 = smooth gradient. | number | 0 → 1 |
| shiftRed | R-channel chromatic dispersion. | number | −1 → 1 |
| shiftBlue | B-channel chromatic dispersion. | number | −1 → 1 |
| distortion | Noise distortion applied to the stripe pattern. | number | 0 → 1 |
| contour | Strength of the distortion at the shape edges. | number | 0 → 1 |
| angle | Direction of the pattern animation. | number | 0 → 360° |
| speed | Animation speed of the metal flow. | number | 0 → 3 |
| fit | How the source image is fit into the canvas. | string | cover · contain |
Common Props
8 | name | description | type | values |
|---|
| scale | Overall zoom level of the graphics. | number | 0.01 → 4 |
| rotation | Overall rotation angle of the graphics. | number | 0 → 360 |
| offsetX | Horizontal offset of the graphics. | number | −1 → 1 |
| offsetY | Vertical offset of the graphics. | number | −1 → 1 |
| 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 | — |