metaballs
Up to 20 coloured gooey balls drifting around the centre and merging into smooth organic shapes. The classic metaballs effect.
Preview
live Install
npm npm i @devmischief/shaders-svelte Code
import { Metaballs } from '@devmischief/shaders-svelte';
<Metaballs
width={1280}
height={720}
colors={['#ff006e', '#3a86ff', '#06d6a0', '#ffbe0b']}
colorBack="#000000"
count={10}
size={0.83}
scale={1}
rotation={0}
offsetX={0}
offsetY={0}
speed={1}
fit="contain"
/>
Shader Props
6 | name | description | type | values |
|---|
| colors | Ball colors (up to 8). | string[] | hex / rgb |
| colorBack | Background color shown behind the balls. | string | hex / rgba |
| count | Number of balls drifting around. | number | 1 → 20 |
| size | Size of each ball. Higher values cause balls to merge into smoother organic shapes. | number | 0 → 1 |
| speed | Animation speed of the drifting balls. | number | 0 → 3 |
| fit | How the metaballs world is fit into the canvas. | string | none · cover · contain |
Common Props
6 | 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 |
| worldWidth | Virtual width of the graphic before it's scaled to fit the canvas. | number | — |
| worldHeight | Virtual height of the graphic before it's scaled to fit the canvas. | number | — |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |