Utilities for Rays ("God Rays", Sunshine)

[rozsazoltan]

There was a discussion on Discord about some code related to rays, but based on TailwindCSS.

guys have any of you made this godrays effect in tailwind?

• https://v3.tailwindcss.com/
• https://codepen.io/kogo5684/pen/GRzdGyB?anon=true&view=pen

source

crswll provided a quick solution that puts the styles found on CodePen into a utility:

Tried it here tossing that jumbo code into @utility, the output looks right but maybe I'm missing something.

• https://play.tailwindcss.com/xSpkZ2XxhM?file=css

source

In the meantime, I did the same, but with functional utilities I added a bit of customization: if you only need one color, rays-{color} works, but you can also declare custom rays with the --rays-* namespace. The direction of the rays can also be set with rays-deg-{number}, and the animation can be triggered separately with rays-move. (source)

Warning

There's not much thought behind it, so unexpected bugs may occur. If you note them down in this thread, we can refine it later.

Warning

Animations come with higher system requirements, which isn't ideal for commercial products. While this code is functional and produces beautiful rays, it isn't optimized for the best possible performance. Just have fun.

• Light Rays Playground
• Dark Rays Playground

Just why not:

• Example with Light Rays
• Example with Dark Rays