Hacker News new | ask | show | jobs
by metalmorphism 1222 days ago
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.

2 comments

On Firefox with Dark Reader Theme Generation set to Dynamic, the initial page is just a black slate. (The default setting, Filter, inverts the background making it look awful.) I have to scroll down to see anything.

I know that it's my own browser configuration changing your website, but I expect you'll find many users here use Dark Reader. I'm also not sure what you can do about it, but I know that I am personally more amenable to turning it off on websites that provide a dark mode, especially if the CSS automatically respects the color scheme of my device (which is dark).

The next logical step is generating dynamic reflections via MediaDevices API (Webcam), right? :D