Pixel Rain
NewPro
Chunky pixel raindrops that fall in three depth layers and splash on an invisible floor, with a dithered glow like an old console game.
Stage 2: Rain
Press start
Customize
6px
1
0
0.82
#ff784f
When to use it
- Title screens and pause menus for pixel art games
- Landing pages for chiptune albums or game jams
- A moody band behind a sign-up form on an indie game site
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- 2D canvas
- Reduced motion
- Respected
- Lines of code
- 303
Installation
Pixel Rain is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy pixel-rain.tsx into components/ui and run npm install motion.
Usage
import { PixelRain } from "@/components/ui/pixel-rain";
<section className="relative h-[600px] bg-ink-950">
<PixelRain pixelSize={6} density={1} floor={0.82} />
</section>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ff784f" | Drop color as a hex value. |
| pixelSize | number | 6 | Size of one chunky pixel, in CSS pixels. |
| density | number | 1 | Amount of rain. 1 is a steady shower. |
| speed | number | 1 | Fall speed multiplier. |
| wind | number | 0 | Slant of the rain, from -1 (blowing left) to 1 (blowing right). |
| floor | number | 0.82 | Height of the invisible floor, from 0 (top) to 1 (bottom). |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion