Hacker News Reader

Comment by Kharacternyk | Hacker News Reader

The background noise is a subtle detail I would have never noticed on my own, but it does subconsciously make the blog appeal to me. Content in front of something that looks like real paper appears more credible than the same content on a flat background.

View on HN

It dramatically reduces readability for me.

Not a fan, even though it might look “nice”.

(As viewed on an iPhone)

I thought I was the only one considering the praise it's getting throughout the thread and others saying that they didn't even notice it until it was pointed out in the article. I had to reduce the opacity by at least half for it to not be so distracting.

Perhaps the noise doesn't "scale" on mobile as I'm also viewing it on an iPhone and/or is just more apparent in dark mode.

I've just deployed a change to the noise as I saw a screenshot from another user and it looked like an iPhone bug! The noise shouldn't even be noticeable.

Is it looking better now?

My timing was perfect, saw the site, saw the noise bug, read the comments, checked again and it’s fixed (on iPhone at least)

On iPhone, it's more than just the grey background that gets the noise.

The noise is being applied to everything on the screen (like buttons, sliders, etc).

It might be more readable if the noise was only on the background grey.

Just my 2 cents.

It's definitely looking better. I can now hop on board with the others in saying that it's a really nice touch.

I wonder if it looks different on different platforms. My first reaction looking at the site was that it looked super grainy - a lot of the embedded screenshots and interactive snippets are almost too noisy to read. I played with the setting and found that while I do like the aesthetic, it needs to be about half as strong to my eye.

Yes! There was a bug on iPhone, though I've fixed it now.

100%! I tried to set it at a level where it "feels" right, but you don't realise why.

True. Designer I worked with believes the eyes focus easier on text if there is a small amount of low contrast fuzz surrounding it. I don't know if that is based on science but it seems plausible at least on white backgrounds.

I agree.. I was surprised that it made a difference, but on a large screen it makes the text feel more anchored to an actual page, not just sliding on the screen. It may be less effective on a small phone screen where the screen is less of your total view.

I agree! Any tips on how to implement it?

What about a background (pattern) that has the noise already in it? I use https://bg.siteorigin.com/ often to create subtle backgrounds like the one on https://www.winkeljustitia.nl/

I was thinking maybe there's a pure CSS way to do it? That seems to be inline with the style of the author's blog.

Pure CSS would be nice indeed.

I saved myself time by reusing a small noise image I'd used before, but you could do it with an SVG pretty easily!

https://grainy-gradients.vercel.app/

It appears his full CSS is as follows:

  background-image: url(/css/noise.png);
  background-repeat: repeat;
  background-size: 182px;
  filter: brightness(6);
  opacity: 0.018;

In my experimentation with it, I can't quite figure out how he applies the effect to the whole page without it either dissapearing on adjustments to the viewport or affecting the pages text opacity.

To make it fill the page, you need to make sure it's placed inside an element (with relative positioning) that's height comes from its content. Then give the noise absolute positioning.

The noise still overlays the text, it's just not really visible because of the contrast between text and background.

Reply on news.ycombinator.com