Metallic Paint

Liquid metallic paint shader which can be applied to SVG elements.

Default

The shader paints over the shape of any image with a transparent or white background. Every prop is wired to the controls underneath. It needs WebGL2.

Customize

Tint Color

Dark Color

Light Color

Seed42

Scale4

Refraction0.01

Blur0.015

Speed0.3

Brightness2

Contrast0.5

Angle0

Fresnel1

Pattern Sharpness1

Wave Amplitude1

Liquid0.75

Noise Scale0.5

Chromatic Spread2

Distortion1

Contour0.2

Mouse Animation

API Reference

MetallicPaint

Prop	Type	Default	Description
`imageSrc`	`string`	`required`	URL or path to the image used for the metallic paint effect. The image is processed internally.
`seed`	`number`	`42`	Random seed for pattern generation. Different values create different pattern variations.
`scale`	`number`	`4`	Scale of the metallic pattern. Higher values create more repetitions.
`refraction`	`number`	`0.01`	Amount of chromatic aberration (color separation). Creates the rainbow edge effect.
`blur`	`number`	`0.015`	Blur amount for the pattern transitions. Higher values create softer gradients.
`liquid`	`number`	`0.75`	Amount of liquid/wavy animation applied to the pattern.
`speed`	`number`	`0.3`	Animation speed multiplier. Set to 0 to disable animation.
`brightness`	`number`	`2`	Overall brightness of the metallic effect. Values above 1 increase brightness.
`contrast`	`number`	`0.5`	Color contrast of the effect. Higher values create more distinct light/dark areas.
`angle`	`number`	`0`	Rotation angle of the pattern in degrees.
`fresnel`	`number`	`1`	Fresnel effect intensity. Controls edge highlighting based on viewing angle.
`lightColor`	`string`	`#ffffff`	Hex color for the bright/highlight areas of the metallic effect.
`darkColor`	`string`	`#000000`	Hex color for the dark/shadow areas of the metallic effect.
`patternSharpness`	`number`	`1`	Controls the sharpness of metallic band transitions. Higher = sharper edges.
`waveAmplitude`	`number`	`1`	Intensity of the wave distortion effect.
`noiseScale`	`number`	`0.5`	Scale of the noise pattern. Higher = more detailed noise.
`chromaticSpread`	`number`	`2`	Multiplier for chromatic aberration spread between RGB channels.
`mouseAnimation`	`boolean`	`false`	When true, mouse position controls wave animation instead of auto-loop.
`distortion`	`number`	`1`	Amount of noise-based distortion applied to the pattern flow (0-1).
`contour`	`number`	`0.2`	Intensity of edge contour effect that warps the pattern along shape boundaries (0-1).
`tintColor`	`string`	`#feb3ff`	Hex color for color burn tint effect. White = no tint.

Accessibility

Keyboard shortcuts and ARIA behavior.

The output is a canvas with no text alternative. Put a label on the parent when the shape carries meaning.
Set speed to 0 to freeze the animation for users who prefer reduced motion.

Meta Balls Noise