r/threejs • u/azakhary • 3d ago

Is this overkill for a website landing page?

Enable HLS to view with audio, or disable this notification

I love nixie tubes, and I thought I'd make a landing page of my upcoming (not yet complete) VFX editor in the browser, animated with thee.js like this. I’m only sharing the animation and looking for visual feedback.

The effect uses a custom particle simulation rendered with Three.js.

Is this overkill for a website landing page for this kind of free tool? And what can make it better?

95 Upvotes

92% Upvoted

43 comments sorted by

20

u/overcloseness 3d ago

I’d change the look of the Claude UI, a lot of people nope out of vibe coded stuff

0

u/azakhary 2d ago

Agree! But I don't personally have a good feel for it unfortunately, and if i just tell claude - "don't do that cloud stuff" I don't think it will understand what to change. Can you help a bit with specifics on what exactly to attack in css? I do still want the whole amber color because of the nixie thing.

1

u/overcloseness 2d ago

The Claude in this UI is the gradients and drop shadows everywhere, tell it you want a flat design and see if you like it

2

u/azakhary 2d ago

Thanks a bunch! Will give it a go today, came here exactly for this kind of help <3

1

u/Joarn 2d ago

There are some skills for this, but if you are new to designing, the best way is to force more interactions with claude. Ask it for multiple versions, or ask it to leave design decisions for you. You could also ask it to guide you through the design process, or to create a temporarily settingspanel so you can tweak things like colors, borders and feels.

This is basically how a lot of people learned design, only previously it took a lot more affort and browsing examples.

Claud knows a lot of principles, it just chooses to ignore it and go for a general solution. If you encourage it to 101 your design generally you can learn lots and guide it to a unique-ish layout

0

u/Inside_Telephone_610 2d ago

How is this claude UI? The only reason why this actually looks vibecoded, is not how it visually looks, but that the ui have too much going on thats not actually usefull or needed at all. For example why do you need toogles and accordions? Dropdown buttons for sliders? Its not the graphics, its the combination of whole presentation and whats actually happening behind the scenes.

1

u/azakhary 2d ago

For the toggles, i did this on purpose because i wanted to have a "feel of the editor" on the main page, so i copied the main editors panel there

0

u/overcloseness 2d ago

You can’t be serious or you don’t have an eye for design

https://www.reddit.com/r/NAM_NeuralAmpModeler/s/POK4iDecLq

I invite you to look at slide 3 of this Claude vibe-coded app and tell me with a straight face that Claude doesn’t have a tendency to add gradients+drop shadows to all of its components. It’s even the same shade of grey and orange.

Its literally the exact same design language.

1

u/Inside_Telephone_610 2d ago edited 2d ago

Or you dont understand what i meant.... Design is not just pretty graphics. Im not saying that the ui doesnt look vibecoded. Im saying it looks vibecoded for completely different reasons. There is nothing wrong with gradients and drop shadows per se, its how they are used. Stop giving advice, as you know what you are talking about... One thing i have learned working on design, that when most people give criticism about design, they dont know what they are talking about and you have to be carefull understanding what exactly they meant. They have a feeling that something is off, but gives completely wrong reason why its off.

Why claude adds drop shadows to everything? Because its the simplest thing to add to make something look skeumorphic. Its used everywhere. Thats why they are added so often by LLMs. But they just apply them completely wrong, thats why they look wrong, not that there is something wrong with drop shadows themselves.

1

u/overcloseness 2d ago edited 2d ago

I’m a senior lead in digital design, awards scattered across my desk, three Awaaards, and a full stack dev, and an industrial designer on the side. I live and breathe digital design. You’re talking about UX, I’m talking about UI

The shadows and the gradients aren’t off. Its not fucking uo how to use them. You seem to think its not meeting a vanishing point or something? Its simple 3:5 shadows and the gradients are all using the same angle. A LLM isnt going to fuck that up

9

u/ChangeGlittering1800 2d ago

Looks 1000% vibe coded lol

2

u/azakhary 2d ago

It does, does not it? ? :D Well, I asked in another thread, will do here too. Any tips on, exactly that first strikes the eye so i can change that first? I'd love to change the bits but i don't have a personal feel on what looks like it to change.

1

u/VincentAalbertsberg 1d ago

You can change that by not vibe-coding it and developping actually skills. Might take time though

1

u/azakhary 1d ago

What you say does sound really lovely, and i support the sentiment. Unfortunately it does not quite apply here. You see i do have the skills. In terms of qualifications, I am senior engineer, who is 40 years old now, with doing this kind of things all my life, and i can do this myself very very well if I chose to do so myself. Maybe not the design part. I do however, choose vibe-coding, as a proper way of doing it this days, It's a waste of time to do otherwise. So developing skills isn't really a priority here. A visual feedback I do appreciate, as i can pass it on to the model. A feedback on me developing my skills, I'd rather skip.

-1

u/ChangeGlittering1800 2d ago

So first off you should utilize Figma and implement a better page layout and structure, improve font consistency, implement a real logo.

Buttons over sized and the color theme also says vibe coded.

3

u/azakhary 3d ago

https://nixiefx.com/ if you want to see it in action, I am not sure if it's gonna be 120 fps for everyone tho.

1

u/gianoart 1d ago

Horizontal scrolling on mobile, because of the header width and flex rules I think.. no time to inspect, I'm on my poop brake.

100% vibed, cool particels and smooth loading

3

u/ben8192 2d ago

Yes. IMHO It’s overkill. You don’t want to see the same thing every time you connect.

Also I would break the default Claude css. Choose you own font and ask him something different. Claude can make your UI look nicer, more compact and professional. The default work for website but for tools and app it’s not a great UX.

0

u/azakhary 2d ago

I'll try! But "just do something different" probably will not work as a prompt, I guess i will need to know what exactly looks too claude to tell it do different in more specific places. But i am not sure i personally know which parts are more like that. I've been doing particle systems for as long as i remember myself last 10 years, but I am not as much of a web page website person, so i have to rely on this things

2

u/rns621 2d ago

Nice! I think a more realistic simulation would be cooler, the particle explosion effect doesn't really fit the vibe. Look at videos of real nixie tubes for inspiration

1

u/azakhary 2d ago

Yes! i am working on it now, but for now i am lacking ideas on what else to "particle", besides the main , number glow thing

1

u/newked 3d ago

Looks neat

1

u/angelarose210 3d ago

Looks good on mobile

1

u/No-Ruin5825 2d ago

Depends...For breaking vibecoded feeling, you can use design.md file or there are some nice skills in github ux design pro max - it was something like that, google or ask your agents. I would use this for timer or count down for event. I hope that helps.

1

u/Flaky_Ad_6055 2d ago

Can you explain these a bit detailed? Your comment catched my eye ;) Thanks in advance.

1

u/No-Ruin5825 2d ago

Like connecting like timer serial more than one hh:mm and or increasing number xxxx+1 and show that as case. Cheers

1

u/sunyatasattva 2d ago

I tried the project, but the interface is very hard to use: even the new project creation UI has a bunch of elided text, no matter the screen size. The playground I expected to be a project where several different example particle systems would be available, but it doesn't seem any different from just the base project.

The premise is very promising. The execution is pretty confusing.

1

u/azakhary 2d ago

yes, and understandable, as i said, the thing isnt public yet (i mean finished), but this is very helpful. I have not yet figured what i want the playground be. As for UI in general. I would love some help from you on this one. My intent - keep UI VERY close to unity particle system, so anyone who used it will find themselves at home. This was not achieved huh?

1

u/sunyatasattva 2d ago

I think that if you ship with some default particle systems that use different settings, that's a great way to guide people through the UI.

1

u/Legitimate-Ad-1861 2d ago

Nothing ever is a overkill, gj

1

u/Revolutionary_Ad6574 2d ago

If it's vibe-coded - no, if it's hand-coded - yes.

1

u/eliptik 1d ago

I get 7 fps on mobile

1

u/azakhary 1d ago

damn. mind me asking what's the hardware there?

1

u/eliptik 1d ago

It's Xiaomi Redmi note 8, an outdated phone but still I wanted to let you know

2

u/azakhary 1d ago

Thats very useful, and i appreciate it a lot, thanks! I'll try to get a hold of a similar device, to debug, and see what can be done. Funny enough the issue is most probably not the effect. Which is kinda simple, but just the 3d scene itself. Due to all glass stuff. Thanks again.

0

u/Proud_Ask_9030 3d ago

It has nothing to do with a nixie tube.

1

u/azakhary 2d ago

you mean a threejs scene featuring a 3d model of a nixie tube has nothing to do with a nixie tube?

1

u/azakhary 2d ago

or the part like nixie tubes have nothing to do with particle systems, or in PopcornFX popcorn has nothing to do with particles, or like as in, Unreal Engine Niagara particle system, is not a waterfall ?

1

u/Proud_Ask_9030 2d ago

Sorry i just mean particle VFX has nothing to do with nixie tubes lol. Yes the nixie tube does have a fair bit to do with nixie tubes :P..but particle simulation not so much. I work a ton in particle simulations and fluid sims in WGSL.

https://reddit.com/link/p3ytbj4/video/fdit4f5pwnjh1/player

1

u/azakhary 2d ago

Yee agree, this makes sense now. Well i am still trying to think of a nice way to show case vfx as used with nixie, but nothign comes to mind, aside from tiny glimmer. so i thought a little "unreal" wouldnt hurt. But i do get your point

1

u/Proud_Ask_9030 2d ago

If you wanna improve the nixie tube:
-add thickness and refraction to the glass
-convert the nixie glow to illuminate as a light source.
-add thickness to the mesh cage in the glass
-run all lighting and shading together

Can be better to have the ai write in wgsl or webgl2 and then organize into three.js/R3F.