Hacker News Reader

Comment by ezekg | Hacker News Reader

Thanks. That shader doesn't seem to play nicely with some GPUs and I'm still working on edge cases. If possible, could you look at your console logs and email me your specs? They should be logged. Email is in bio. It should be doing automatic categorization of the GPU to determine render quality, but maybe something's still incorrect there.

View on HN

With all due respect, this is possibly the dumbest rebuttal I've heard. Why do I need a powerful GPU or even need my GPU to waste compute cycles just to view a webpage?

Just get rid of it entirely. The visual flair is not adding any value. It's a performance drag, highly distracting, and serves no useful purpose whatsoever. This "trend" in modern web design is truly infuriating.

Wasn't expecting so much candid feedback today. There was a Launch HN yesterday that had a 3D rubik's cube on their home page. It was literally pointless. But kind of neat. But you probably hated that as well, if I could assume. But I say that to point out that lots of companies do it, sometimes simply because we can (just look at Stripe and GitHub).

I think the lava lamp effect is cool. The perf issues can and will be fixed.

I appreciate you engaging with commenters on this, it’s nice to see.

From my perspective I agree with a lot of the other commenters - it’s just design for design’s sake. It’s an expensive way to add minor visual flair that heavily degrades the experience for a sizeable number of users. In terms of value provided to the user: it’s basically zero, or often worse than zero.

Personally, it feels over-designed, which the stretched font for the headings really reinforces. I’d drop the shader, re-evaluate your font choice for the headings, and focus on layout and readability a little more - using the site on my iPhone feels really cramped and like the whole page is getting cut off on the right-hand side constantly. I can’t scroll horizontally to see the rest of the code, for example.

I do like the little text-flicker/flipboard animation on the “keygen” logo though. That looks clean and well-suited to the theme of the site.

I spent weeks on the typography and on choosing a font. Went through so many different styles. I ended up on Owners by MCKL [^0] because I personally like the ultra-wide font trend, and I liked its Text variant as well. Bummed to hear that others aren't a fan of it. Oh well, design is pretty subjective.

And it may be over-designed. It was my first foray back into design since switching careers to programming about 10 years ago. Maybe I took it a bit too far? Felt good to stretch those muscles, though. :)

[^0]: https://mckltype.com/owners/

That wide font is on purpose?! No offense, but I was sure something went wrong with rendering the page.

It didn't quite register as a "display" font variant usually does for me either -- the only feature is the width (it's a nonfancy sans-serif, what do you expect) so it somehow just feels like it's been squished. Intellectually I know it's definitely not a simple scale-transformation and must have involved some curve work to make it look less off, but I just can't shake the feeling of having seen text getting run over by a truck.

I went and found that Launch HN, and yeah, that rubik's cube is horrendous on my computer. They did not do as much effort as you did to make it work on low end machines. I don't have a GPU at all; your site disables the background effect but their site shows the cube anyway. Their site drags once that rubik's cube appears, and the cube itself animates at 1-2 fps. It's a very poor experience and I don't really see what the cube adds, but I do see what the cube subtracts.

(Your site works fine on my computer. The effect is disabled and it's not a problem.)

I'm sorry, but what should just. be a _progressive enhancement_ in this case completely ruins the user experience for me. However, I'm probably not your target audience, I'm just commenting on this trend in general.

It literally is a progressive enhancement, so I'm not sure what your point is.

There's clearly bugs where it's enabled where it shouldn't be, and that's certainly an issue, but the comments here make it clear that it gets disabled automatically on lower-end devices.

Not sure why people are hating so hard on your site, but I liked the effect, and it didn't cause any problems for me.

Yes other companies have animations but they make sure it performs well across browsers and OSs.

Mac+Firefox users are probably in your customer base. Listen to the feedback.

Speaking as someone that blocks javascript by default, the page doesn't look too bad!

Looks good on the 4090 here, ship it

So I took a look at the actual shader, and it really should not require anything powerful (decade old, worst-you-can-get hardware might struggle). A much more likely explanation (that the gp is alluding to but didn't explicitly say) is that the issue is related to your GPU drivers or related software. These are often buggy and/or hit a slow path for whatever reason. This is almost guaranteed to happen for some browser/os/hardware/driver combo (of which there are _many_) and you seem to have drawn today's short stick.
The animation itself looks fine, its slow enough that it doesn't feel distracting. Just a bit of flavor.

Its mostly just a few calls to a cheap noise function and no footguns I can see. Also hurrah for dev tools and open text formats! If you're looking for better performance, it looks like the noise could be precomputed (the same blob always gets the same noise)". Might be faster, might just hit more bugs.

That’s just your opinion, man. I checked the site on iPhone and would say that it’s better than 80% of the sites I see. No performance issues at all. The extra wide font I don’t like however.

The pixel shader is cool, but consumes too much resources. On my 1080Ti, uses about 20% of GPU to render, which is too expensive for such a simple graphics.

I’ve looked at the source, and it seems you’re doing too much computations there. Metaballs are usually rather simple, and they don’t require any trigonometric functions. Compute something like `sum( ball.z / length( pixel - ball.xy ) )` and apply the threshold. If you want anti-aliasing, use fwidth() for the screen-space partial derivative of that value after the loop, compute two thresholds around the iso-value, then smoothstep() instead of a hard threshold.

Also, consider moving the ball parameters (center and size) into a constant buffer and update them on CPU. Because there’s just a few balls, JavaScript is good enough for the job. Your current version computes these things from time for each pixel for each frame. There’re about 8 megapixels on my display, so these computation costs are escalating very quickly.

My lack of knowledge in shaders is showing. :)

I sent you an email with a job offer.

this works fine for me on mobile brave

I'm not the person you replied to, but it's janky for me, too.

Console logs: device: undefined, fps: 60, gpu: amd renoir, isMobile: false, tier: 3

FWIW, my laptop is a relatively beefy 2021 model (granted, with integrated GPU). For a business that's not about 3D rendering, spending an innovation token on making sure your landing page can have a smooth background animation seems like it's playing on hard mode.

With respect, all of that for some bokeh? Is it worth it for y’all? Do you know how many folks just leave when the stuttering starts?

The entire lava lamp effect is a shader, not just the bokeh. :)

I haven't noticed any drop in registrations, conversions, or any noticeable differences in traffic patterns after launching the redesign, so I'm not sure if this is actually happening. Though it's a valid concern and issue, and I do want to fix it. And I appreciate all the reports. I think it may be a retina resolution issue, but could be wrong.

On launch day, everyone loved the effect (it goes along with the new logo) and only a couple people said it performed badly, but they were on exotic devices.

I may have caused this a few days ago when I enabled rendering at retina resolution for tier 3 devices. What I wasn't expecting was so many tier 3 devices that aren't really what I'd consider "tier 3." I was expecting all tier 3 devices to be gaming-level GPUs.

I guess I should have read the source [^0] more closely and I could've avoid this.

[^0]: https://github.com/pmndrs/detect-gpu/

Another danger here is testing with the website being the only thing on the PC: some people use their computers like that but many others will have many different things open at once: just because it can run at an acceptable FPS on the detected hardware doesn't mean the resource use is acceptable on a system which is multitasking. I usually have >100 tabs in my browser and at least 20 of which are loaded: they cannot all demand what your site demands, even though the hardware is quite high-end.

How many tabs are simultaneously visible? An animation in a non-selected tab won't get much in the way of resources, so the number of loaded tabs shouldn't be a big factor.

> What I wasn't expecting was so many tier 3 devices that aren't really what I'd consider "tier 3." I was expecting all tier 3 devices to be gaming-level GPUs.

Could be the detection of GPUs doesn't work correctly? My nVidia 1080Ti is detected as nVidia 980Ti, and a sibling comment mentions an integrated laptop GPU being detected as tier 3 with isMobile=false.

It's also horrifically slow on Chrome macOS:

    {
        "fps": 130,
        "gpu": "amd radeon pro 5300m",
        "isMobile": false,
        "tier": 3,
        "type": "BENCHMARK"
    }

Definitely wasn't 130 FPS and made the whole page stuttery.

GPU: {device: undefined, fps: 342, gpu: 'apple m1 pro', isMobile: false, tier: 3, type: "BENCHMARK"}

Despite the supposedly high FPS it's very jumpy/laggy in Firefox, though fast in Safari.

Just turn it off.

It does turn off when it detects a low-end or integrated GPU. But something may not be working correctly, or is getting miscategorized.

That's why the debug information would help.

When you emailed me about this a few weeks ago I played around a bit with the shader, and just creating fewer blobs made the problem go away (reducing "for (int i = 0; i < 15; i += 1) {" to 5 in the "void main"), but I didn't really have the time to investigate in-depth or see what kind of visual effects that would give (dealing with this minified JS isn't exactly fun and I never worked with OpenGL shaders either), but just FYI.

Good to hear it's not just me though (and the effects also aren't disabled for me either).

Or, again, turn it off and avoid the whole class of issues, wasted time and asking random HN folk for debug logs.

Don’t listen to random comments on hacker news. It looks cool OP. Don’t throw out the whole thing for a few bugs

Yeah, as long as we're focused on the really important things. Like animations that nobody actually needs or wants (apart from the person putting it there). That is, of course, until it ruins the user experience by bogging down the browser. And then, sure, let's debug that and make sure it runs on everyone's browser/os/cpu/gpu combo. That's a brilliant use of time.

Until someone turns up with a new combo where it doesn't work. Because judging by the comments, this seems to be a janky piece of code that isn't well understood.

"Turn it off" (or rather, "rip it out, and throw it away" is good advice. If there is even a slight chance this might come back to haunt you and screw the user experience, it isn't worth it. If your animation is more important than avoiding a horrible user experience, well, that's kind of useful for your customers I suppose.

How do you imagine user conversations take place, if not from "random HN folk"?

Do you want an appointment? A lab?

It's very laggy for me, and I'm on high end hardware.

{"CANVASES":2,"GPU":{"fps":209,"gpu":"apple m2","isMobile":false,"tier":3,"type":"BENCHMARK"},"RESOLUTION_RATIO":2,"BLOB_COUNT":20,"BLOB_AMPLITUDE":"52.60","BLOB_RADIUS":"2.54","POSITION_X":"4.43","POSITION_Y":"1.72","RANGE_X":"4.64","RANGE_Y":"6.51","SPEED_X":"9.60","SPEED_Y":"4.51"}

No problems here with firefox on x11 and amdgpu/mesa drivers fwiw

Works horrendously bad on Firefox, works great on Safari/Orion...

Macbook Pro M1

Interesting. I wonder if this is a retina display issue. I just pushed out a change that renders the shader at standard resolution even if the device has a retina display. I don't have a retina display on any of my devices except a 2019 MBA and it renders fine on it. I wonder why.

> I wonder if this is a retina display issue

I'm using an external monitor running at 5120x1440 (Samsung, not retina) only, and am experiencing the the same on Firefox.

At least not retina exclusive.

Oh wow. Sounds like I should put an upper bound on resolution. I wasn't even thinking of somebody opening the page full-screen on an ultra-wide.

Yeah this feels totally broken on my M1 Pro running Ventura.

Also runs terrible on my Pixel 5 with Firefox. As for your design choices, they remind me of the Mezmo landing page...

It's working fine for me on windows and firefox

device: undefined

fps: 30

gpu: "intel mesa dri intel hd graphics 400"

isMobile: false

tier: 2

type: "BENCHMARK"

I'm questioning whether or not I should continue into the realm of gamedev... the amount of "works on my igpu from 2015 in low power mode" and "stutters on my rtx 4070 ti" here is making me laugh out loud.

Tbh, games with the most problems usually run home-grown engines that try to do too much.

Janky for me even when scrolling has started. 2021 M1 MBP.

It stutters on an M1 Macbook running Chrome, for example.

M1 running Safari (specifically Orion) works 60fps... How?!

Battery vs plugged into a power outlet? Maybe Apple throttles the GPU to save battery.

Your homepage needing a shader is at least a hot-pink flag for the whole company. Pretty janky here on Vivaldi as well unless I scroll really slowly.

What do you mean by this? I wrote the shader because gamedev is an interest of mine, and I wanted to give writing a fragment shader a try for the redesign.

Because it's not bad enough to be a red flag but it does make me wary of the company's priorities. You used a complicated shader to make a scroll bar that doesn't scroll, which may as well have been a static background image, and half-visible janky blobs in the background I thought at first were eye floaters. The crushed font looks like a rendering error and the e's and s's looking identical made me stare at the word "businesses" because I swore it was misspelled. I do have to say the color scheme is gorgeous though.

+1 the website is borderline unusable on my work laptop. I have an M1 Pro in my standard MacBook Pro 2021. I am using the latest version Chrome and this animation causes a huge performance regression on my computer when it's visible.

Reply on news.ycombinator.com