Vibeset

Metallic paint

A logo or a headline that looks like mercury: chrome surface with flowing bands, reflections that move with the light (the pointer moves it) and a slightly iridescent edge. It is done without a 3D model: the shape comes from drawing the text, or an SVG path like the Vibeset logo, on a 2D canvas and uploading it as a texture; the relief is invented from that mask, blurring it with nine samples to get a soft hill and taking a fake normal from the slope, like a rounded bas-relief (softness is how much it is blurred: low gives a narrow bevel, high a soft hill); and the metal is three things on top: a band that flows following the relief, a specular reflection that depends on the light and a different phase offset per colour channel (dispersion) that irises the edge. The output is transparent outside the shape, with premultiplied alpha. The container is an image named by the text (or the logo name), because drawing it on a canvas stops it being text to the browser; without WebGL the plain text or the flat path remains.

And the React Bits original: Metallic Paint

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Metallic Paint, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For the big logo on a brand landing, the one thing that needs to shine. With a simple, high-contrast shape, not a detailed wordmark.

Watch out for

With imageSrc it downloads the image with fetch: make it your own and keep it on your domain. And the logo stops being text or an image to the browser: it needs its alternative outside the canvas.

Accessibility

It respects the system reduced-motion setting. It carries no aria attribute: you provide the logo's alt text yourself, on the element that wraps it.