-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathNaturalRain.jsx
More file actions
72 lines (68 loc) · 2.24 KB
/
NaturalRain.jsx
File metadata and controls
72 lines (68 loc) · 2.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
const NaturalRain = () => {
const [raindrops, setRaindrops] = useState([]);
useEffect(() => {
// Generate random raindrops
const newRaindrops = Array.from({ length: 100 }).map((_, i) => ({
id: i,
left: Math.random() * 100, // percentage
size: 1 + Math.random() * 2, // px (width/height of drop)
height: 10 + Math.random() * 20, // px (length of the rain streak)
delay: Math.random() * 5, // seconds
duration: 1 + Math.random() * 1.5, // seconds to fall
opacity: 0.2 + Math.random() * 0.6,
color: `rgba(173, 216, 230, ${0.3 + Math.random() * 0.7})`, // Light blue, semi-transparent
}));
setRaindrops(newRaindrops);
}, []);
return (
<div className="fixed top-0 left-0 w-full h-full z-50 pointer-events-none overflow-hidden">
{raindrops.map((drop) => (
<motion.div
key={drop.id}
initial={{
y: -drop.height, // Start above the screen
x: 0,
opacity: drop.opacity,
}}
animate={{
y: '110vh', // Fall off screen
x: Math.random() * 20 - 10, // Slight horizontal drift
opacity: [drop.opacity, drop.opacity, 0], // Fade out at bottom
}}
transition={{
y: {
duration: drop.duration,
repeat: Infinity,
delay: drop.delay,
ease: 'linear',
},
x: {
duration: drop.duration,
repeat: Infinity,
delay: drop.delay,
ease: 'easeInOut',
},
opacity: {
duration: drop.duration,
repeat: Infinity,
delay: drop.delay,
times: [0, 0.9, 1], // Fade out near the end
},
}}
style={{
position: 'absolute',
left: `${drop.left}%`,
width: drop.size,
height: drop.height,
backgroundColor: drop.color,
borderRadius: '50%', // Make them more like drops
filter: 'blur(0.5px)', // Soften the edges
}}
/>
))}
</div>
);
};
export default NaturalRain;