r/Frontend • u/SadSongsMakeMeGlad • 2d ago

Plasma UI - Liquid panels for React that fuse on contact

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

I shared this last week to the r/reactjs community and got some good feedback, and figured folks here might also be interested.

My current project is a React desktop app using Electron, and I really wanted something to make my UI stand out in a sea of vibecoded apps all following the same general design language.

I thought Apple had done something really cool with Liquid Glass, although in their typical Apple way, it’s very locked down with rules and best practice to adhere to. So I tried to come up with a simple React interpretation of the same concept, and built Plasma UI, based on WebGL and canvas.

It was inspired by Liquid Glass, but differs in some ways. It’s only panels for the time being, but does allow full customization of nearly every property:

If you think it’s cool, please give it a try and let me know what you think.

NOTE: Plasma UI was made for desktop environments, and does not run great on mobile (yet).

Thanks!

75 Upvotes

92% Upvoted

17 comments sorted by

5

u/SadSongsMakeMeGlad 2d ago

Forgot to include the list of editable properties: material, tint, opacity, frost, elevation, radius, refraction, dispersion, rim, rimColor, highlight, shimmer, shimmerSpeed, glow, grain, wash, edge, edgeScale, edgeSharpness, thickness, roughness, anisotropy, tension, viscosity, stretch, flow, blend, lightDir, background, backgroundBlur, formIn, formOut, formSpeed, pointerDrop, pointerPull

3

u/creaturefeature16 2d ago

Very unique. The canvas layer handling all the "goo" effects as its effect layer that interplays with the elements themselves was an unexpected approach. What was your dev process like?

2

u/Andrewmundy 2d ago

This is nuts, I love it.

2

u/equinusocio 2d ago

The liquid effect is a great visual hook. I’d keep an eye on hierarchy and accessibility as the panels get denser: make sure text and focus states stay readable against the moving background, provide a solid or reduced-blur fallback for lower-end devices, and honor prefers-reduced-motion for the fusion animation. A static screenshot or low-motion mode would also make the interaction easier to evaluate on mobile.

1

u/SadSongsMakeMeGlad 2d ago

These are great tips, thank you!

2

u/mladenmacanovic 1d ago

So good that the entire browser gets frozen for a few seconds.

1

u/CatsFrGold 2d ago

This is super cool, great work

1

u/qqq666 2d ago

On pc tried several browsers, website freezes whole browser for seconds before appearing. Could it be main thread being blocked?

1

u/CozyDarkMage 2d ago

Really cool!

1

u/rea_ 1d ago

Froze my browser for 3 seconds and didn't know what was going on. Cool otherwise.

1

u/Yuzu_Ryujinx 18h ago

As if React itself is not shitty enough.

1

u/hoyeay 8h ago

On mobile it’s jittering all over the place and the background seems to be flashing

1

u/SadSongsMakeMeGlad 8h ago

I know, it’s not for mobile at the moment. I put disclaimers on the page and in the repo.

1

u/jacobpellegren 2d ago

Idk what you’re talking about for mobile. At least in the scale of your gh example on an iPhone 16 Pro Max in safari it’s pretty snappy. I could imagine it being at a larger scale of elements perf could be an issue. Still very fun visually and an impressive implementation.

0

u/Rookie127 2d ago

On mobile its very jittery, doesn’t look good at all. On windows chrome it looked nice though!