Hacker News Reader

metalmorphismon Show HN: I made a library that adds a metallic look to anything you throw at it

Weird. I've tested it with Firefox (on Windows and Mac OS). What OS are you on?

metalmorphismon Show HN: I made a library that adds a metallic look to anything you throw at it

Thanks a bunch! And I totally agree!

metalmorphismon Show HN: I made a library that adds a metallic look to anything you throw at it

Thanks for the feedback! As soon as Houdini is ready in more browsers, I'll be sure to port the thing to CSS.

metalmorphismon Show HN: I made a library that adds a metallic look to anything you throw at it

OP here!

I've been obsessing over creating a high-end and unique metallic look that I feel has been sorely missing from the web. I've put quite a bit of effort into ensuring the implementation is lightweight, performant and cross-browser compatible.

Maybe Metalmorphism can bring a touch of metallic elegance to the web in 2023?

The library I've written to powers all this, called MetalliCSS, lets you turn any HTML element into a metallic looking thing by giving it a certain classname. It generates the SVG code (filters and all) on the fly and renders the raster image to a canvas element that is placed inside the element. The library will respect the dimensions, as well as the background and border-radius properties of the element, using them all as parameters for the effect (even after the first render, if anything changes, dynamically).

I love metallic stuff. I think the aesthetic is timeless and compelling. Seeing something metallic in the world always gives me pause. I remember as a child being fascinated with metallic toys and such, even the cheap plastic stuff with a faux metal coat. When I got into web development, the skeuomorphic design trend was on the rise, and I remember it fondly. I feel like I am on a personal crusade to bring back some of the charm of this bygone era.

Please let me answer any questions you may have about the implementation.