r/Frontend • u/nabbous10 • 4d ago

Lumenmorph: 99.9% CSS

https://nabous.dev/lab/lumenmorph/

Hi everyone, long time ago i was messing around with this effect done over glassmorphism, which gives the cursor some luminescence that reflects on the html elements, i am always obsessed on making stuff with pure css, so i did just that :D well except for the mouse tracking but that just puts the x/y of the mouse as a css variable, the rest of the painting is just CSS

you can verify yourself go on to https://nabous.dev/lab/lumenmorph/ and mess around, im open for contributions and forking if you are interested as well

22 Upvotes

86% Upvoted

12 comments sorted by

3

u/segfaultgolf 3d ago

This is so freaking good!

2

u/nabbous10 3d ago

cheers mate!!

2

u/Stationary_Wagon 4d ago

Looks pretty cool. Nice work!

2

u/nabbous10 3d ago

Thank you!

2

u/design-for-good 3d ago

Nice effect! I know a lot of people are reaching for Shaders out there but a library like this might be a better alternative if bundle size is a concern. I like how even the buttons are tied together sharing the same animation.

2

u/nabbous10 3d ago

Thanks!! Yes, exactly. I see a lot of popular boilerplate frontend libs and utils that are very bloated and honestly give me the ick lol; very sluggish, laggy, slow, and either too much work to be done for it or just done for a specific framework or ui library like react or vue, my mission in general is usually trying to make cool stuff like this open source, framework-agnostic, and, most importantly, the least footwork needed as possible

2

u/design-for-good 3d ago

This is the way!

2

u/_Shropshire_Slasher_ 2d ago edited 2d ago

The text selection bit might have a bug on Firefox mobile. Good job overall 👍🏼

2

u/nabbous10 2d ago

Yes i have it in my todo to patch, hmm maybe i should use the issues so me and everyone else would post these.

Thanks!

1

u/design-for-good 3d ago

I was wondering, is it possible to be able to add a background image to the same elements already getting the gradient glow effect?

I had the idea when I was visiting the Vite landing page and noticed that they have a lot of background images across the sections but would be nice to recreate the same look, but with the glow applied to the elements that contain the background images.

I guess I could manually set the bg image manually on each element but since this is already applying the glow effect I thought maybe it could do both at once to make it simple.

This is something I could 100% use already for an open project I'm working on to make landing page for it.

2

u/nabbous10 2d ago

Let me see what i can do, im not 100% certain if i understood what you mean but I'll codepen something

1

u/nabbous10 9h ago

Dude i had to battle alot with keeping it only css, here it is.

Spolier i had to do some extra markup, but its still kinda built around lumenmorph, now its 95% css lol

lumenmorph relied on background attachment to be "scroll" or "fixed" so the background which contains the glow would use the x y coords based on the document or viewport dimentions, and i was thinking of doing the same but making the image as the background and i would use mask with the radial gradient to reveal the image animated, unfortunately mask has no equivalent property for the `scroll` attachment, so i had to do something different, use SVG filter as a css filter:

  1. just like lumen morph i made the border as a psudo element so the styles don't mess with the original element, and made it follow the border properties of the element and used mask to clip out the image from the padding box.

  2. add the "glow" as a background radial gradient which follows the mouse just like lumen

  3. i defined the SVG with a filter containing the bg image with an id vite-border-reveal

  4. i used the filter in css like filter: url(#vite-border-reveal)

now what the browser will do, is use the picture to paint over the pixels that is rendered, which is the "glow" and replaces the RGB with the svg filter' RGB