3 ms·

React-sky: easy animated backgrounds

• lucagez 8y ago
  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/ https://codepen.io/lucagez/full/oQoRyK/
• mr_ali3n 8y ago
  Nice, but why do you need react for this?
  • onion2k 8y ago
    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.
    • lucagez 8y ago
      Exactly that (:
• onion2k 8y ago
  Great idea. :) I'm working on something vaguely similar but for foreground effects - https://github.com/onion2k/react-neon/ 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/ https://react-neon.ooer.com/fullscreen/clouds/
• kentms 8y ago
  Nice. Would be great if I could set a background image as well :)
  • lucagez 8y ago
    You can! You can pass also the props "background" and in it you can pass a regular URL
    • kentms 8y ago
      Great. Thanks.