Show HN: I made a library that adds a metallic look to anything you throw at it | Hacker News Reader

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

metalmorphism.com

37 pointsmikaelaast15 comments

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.

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

This is so ridiculously cool. I do miss shiny UI's from the 2000s. We've gotten a little bit too professional.

Thanks a bunch! And I totally agree!

Very interesting effect. Not sure how practical it would be, but I like seeing what's possible with CSS. I'd prefer it without request to Google Fonts for the Roboto font, and just use system fonts by default. Also I'm curious what the JavaScript is for - I think people would like it better if it were pure CSS.

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

This is one of those projects that I question the utility of, but which I think is endlessly cool and a fun demonstration of artistry for art's sake and as a demonstration of love for an idea.

I love it.

Looks like chrome needs an overhaul. Witness me.

But it an all seriousness this is pretty cool. I just wish I had a sue for it.

Doesn't seem to work well in Firefox, the effect is very different from the sample images and the text is borderline unreadable

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

I think I'm running into the same issue, Windows 11 Firefox 109.0.1. The "ridge" of the reflection effect is stuck to the lower ~10% of the button, and completely dark, and the gold looks distinctly green.

Left is firefox, right is Edge (appearing, I presume, as intended)

[0] https://snipboard.io/AVU6zh.jpg

Working fine for me using Firefox 109 on Ubuntu 22.04.

Great job, feels like a modern refreshment of 2000s skeuomorphic interfaces

I think this is awesome, good job!

Reply on news.ycombinator.com