Turn any icon or image into liquid metal. Powered by the Metallic Paint WebGL shader, Metallify renders a live, animated liquid-metal finish over your artwork and lets you fine-tune every aspect of the effect. Export the result as PNG or SVG.
- Live liquid metal preview — WebGL2 rendering with smooth animation right in the browser
- Upload your own image — SVG, PNG, JPEG, WebP, and GIF, with drag & drop support
- Sample icons — bolt, star, gem, ring, crown, and heart to get started instantly
- Preset palettes — Plasma, Silver, Gold, Rose Gold, Copper, Emerald, Ice, Violet, and Inferno
- Full control — seed, pattern scale, sharpness, noise, angle, animation speed, liquid, brightness, contrast, refraction, blur, chromatic spread, fresnel, wave amplitude, distortion, contour, and light/dark/tint colors
- Export as PNG or SVG — at 256 × 256, 512 × 512, or 1024 × 1024
Requires Node.js and pnpm (or your preferred package manager).
# install dependencies
pnpm install
# run the development server
pnpm devOpen http://localhost:3000 with your browser to see the result.
| Command | Description |
|---|---|
pnpm dev |
Start the development server |
pnpm build |
Create a production build |
pnpm start |
Serve the production build |
pnpm lint |
Run ESLint |
- Next.js 16 (App Router)
- React 19
- Tailwind CSS 4
- Base UI + shadcn/ui components
- WebGL2 (GLSL ES 3.00) via a custom shader based on Metallic Paint from ReactBits
- The uploaded image is processed on a canvas into a depth map — a soft, blurred grayscale height field derived from the shape's alpha mask and boundary.
- This depth map is uploaded to the GPU as a texture.
- A WebGL2 fragment shader samples the depth and combines it with a procedurally animated metallic pattern (simplex-noise flow, refraction, chromatic aberration, and fresnel falloff) to produce the liquid-metal look in real time.
- On export, the live canvas is captured at the chosen resolution and downloaded as a PNG, or wrapped in an SVG that embeds the raster result alongside the parameter metadata.