react-digital-rain

This implementation of digital rain uses a gif, converted to a blob, and instanced based on the container dimensions (w,h) or provided dimensions.

They are positioned statically in columns and rows and each row gets a 2450ms delay, leading to a seemless animation that fits on all screens. This works because the animation travels downward at 150pixels/second.

If the components dimensions become larger than the screen dimensions, gifs will pause and lose timing. This is a browser feature and not a bug. It's strongly recommended not to make this component larger than screen dimensions.

When switching between tabs and scrolling it in and out of view, it will simply restart the animation.

You can click on the animation for fullscreen and click again to remove fullscreen.

npm install react-digital-rain

Can pass explicit height or width. Otherwise it will render its size according to its parent container. If the parent container has a height or width of 0, then it will define its height / width to fill up the screen.

@param height?: number; width?: number

@returns JSX.Element

import { DigitalRain } from "react-digital-rain";

const App = props => {

  return <DigitalRain />
}

export default App;