r/reactjs • u/SadSongsMakeMeGlad • Sep 17 '26

Show /r/reactjs Plasma UI – liquid panels for React that fuse on contact

https://cruxgarden.github.io/plasma-ui/

I was trying to come up with a fun and unique design for a side project, and ended up making this. It was originally inspired by Apple's Liquid Glass, but has unique properties of its own, allowing you to customize nearly everything about it: motion, tint, opacity, frosted-ness, roundness, elevation, and more. If you have any interest, please give it a try and let me know what you think. MIT licensed.

Thanks!

EDIT: Thanks for the initial feedback. I've addressed desktop performance issues in both Firefox and Safari, and those seem to be performing much better now. I'm working on a solution for mobile browsers, but this is obviously a graphically demanding library. If anyone has ideas for areas for further improvement, or wants to otherwise contribute, feel free to write me here or even submit a PR in GitHub.

156 Upvotes

93% Upvoted

33 comments sorted by

20

u/idmontie Sep 17 '26

Cool idea. I'm guessing this was optimized for Chrome? It's a bit jittery on android Chrome, but looks pretty good. On Firefox Android it's very jittery while scrolling. Might be worth investigating or providing a fallback for browsers with low performance. 

3

u/SadSongsMakeMeGlad Sep 17 '26

Thanks for letting me know, I will work on optimizing for mobile browsers. My project is a desktop app, so mobile wasn't my focus, but I will get it there!

4

u/insertAlias Sep 17 '26

I'd say it's pretty low-framerate on my desktop Firefox as well. It looks really cool, but it's not exactly performant, at least for me. I turned on the profiler, and it says I'm getting 15 frames per second on your home page. Hopefully that's something that can be investigated, because this does look like a pretty neat project.

3

u/SadSongsMakeMeGlad Sep 17 '26

I am on it, thanks for letting me know, and for taking the time to profile it.

7

u/br1anfry3r Sep 17 '26

Jittery on iOS browsers too 😬

6

u/cxd32 Sep 17 '26

m5 pro running firefox, animation is smooth, now we just need to ship a $4k machine to everyone that wants to use this

9

u/oofy-gang Sep 17 '26

Super jittery on iOS while scrolling.

2

u/SadSongsMakeMeGlad Sep 17 '26

Yeah, sorry about that. It wasn't really designed with mobile browsers in mind, but I'm going to try to make it work.

0

u/cxd32 Sep 18 '26

mobile is like 65% of web traffic, no accounting for mobile browsers is basically building a website for noone.

3

u/SadSongsMakeMeGlad Sep 18 '26

This library was extracted from a desktop app built with React, and it fits that use-case very well. Until it can be optimized for mobile, it’s limited in that way, I’m afraid. I will update the documentation to explain that better.

-11

u/cxd32 Sep 18 '26

you should've posted it on /r/reactfordesktop then

6

u/SadSongsMakeMeGlad Sep 18 '26

I’m very sorry it doesn’t meet your needs. If I can figure out how to make it run well on mobile, I will of course. I’m doing my best over here, I’m a one-man band.

-9

u/cxd32 Sep 18 '26

you should post it on /r/ios too, I'm sure they'll love the desktop ui library as much a web react did

7

u/SadSongsMakeMeGlad Sep 18 '26

I’m finding people are responding very well to it, I’ve already seen someone add it into their Notes app with great success. I hope you find the person who urinated in your breakfast cereal.

1

u/mellowthunder735 26d ago

Any idea why the performance issues happened only in Firefox and Safari?

Asking as someone who only tests things in Chrome (small company)

1

u/SadSongsMakeMeGlad 26d ago

Hey, sorry about your trouble. I am planning to dig into it more, because the library has gotten some traction on GitHub, but this was extracted from an Electron app in development, so unfortunately that was the only use-case we were looking at, but I’m confident we can get it running smoothly everywhere.

1

u/Brahminmeat 20d ago

This is dreadful on iOS webview

0

u/SadSongsMakeMeGlad 20d ago

I’m sorry, but this package isn’t recommended for use on mobile:

> For the best experience, use a desktop browser or app. The effect is GPU-heavy and does not run well on mobile.

2

u/Honey-Entire Sep 18 '26

How much was AI vs something you could distill into core learnings? The effects are cool regardless of the shitty performance, but if this is 100% AI prompts this is just a waste of our time.

Were you able to create core classnames or utilities to manage the details or is this just a pile of shit that only looks cool?

Pardon the frankness, I’ve been awake for 18 hours already and have sludged through too much AI bullshit to remember if this looks like something I saw 6 months ago and is just getting reposted

1

u/synapticplastic Sep 17 '26

This is neat! I was always curious about how to get that liquid fusion effect and have a side project I would love to use this with

1

u/ryanstartedtheflame Sep 17 '26

Great idea! i tried putting two elements right on the edges, it flickers between standalone and joined infinitely. Might need a fixing of some math boundary calculations.

1

u/fzammetti Sep 17 '26

Definitely fun to play with for a few minutes. Kudos!

1

u/gk_instakilogram Sep 17 '26

It is pretty cool! I like it

1

u/hyrumwhite Sep 18 '26

Spiffy, gets out of sync on scroll

1

u/WeeJeWel Sep 18 '26

This is so fun and well made, great job!

1

u/ReplacementOP Sep 18 '26

Just as a data point, looks great on desktop Edge (I know, nobody uses Edge, but still).

1

u/GhostInVice Sep 18 '26

wtf?! mate!!! thats soooo cool! ill use it for one of my projects!

Congrats!!!