React-sky: easy animated backgrounds

github.com

30 points·lucagez··8 comments

Great idea. :)

I'm working on something vaguely similar but for foreground effects - https://github.com/onion2k/react-neon/ - it's a library that adds a canvas over a component with an interactive effect. It's very early, and Chrome only because it relies on ResizeObserver (but that's going to change to use Mutation Observer very soon).

I added an example that puts Inigo Quilez's WebGL raymarched clouds on a fullscreen canvas yesterday. It makes my iMac sound like a jet engine. https://react-neon.ooer.com/fullscreen/clouds/

react-sky is a react component that makes super easy the creation of animated backgrounds. Just pass some images and react-sky will do the job!

Live demo: https://codepen.io/lucagez/full/oQoRyK/

Nice, but why do you need react for this?

You don't, but it makes it easier to integrate in to some existing code. Usually these libraries are written for personal reasons (eg needing it yourself) and then open sourced. If you're making a React app at the time then it ends up being a React library.

One day I'm going to 'un-React' Neon (see my other comment), but until then it 'needs' it.

Exactly that (:

Nice. Would be great if I could set a background image as well :)

You can! You can pass also the props "background" and in it you can pass a regular URL

Great. Thanks.

Reply on news.ycombinator.com