-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDigitalLeaves.jsx
More file actions
141 lines (135 loc) · 3.61 KB
/
DigitalLeaves.jsx
File metadata and controls
141 lines (135 loc) · 3.61 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
const LEAF_TYPES = [
// Type 1: Maple Leafish
(color) => (
<svg
viewBox="0 0 100 100"
width="100%"
height="100%"
className="overflow-visible"
>
<path
d="M50 10 Q60 30 80 30 Q70 50 90 60 Q60 60 50 90 Q40 60 10 60 Q30 50 20 30 Q40 30 50 10 Z"
fill={color}
/>
<path
d="M50 20 L50 80"
stroke={color}
strokeWidth="2"
strokeOpacity="0.5"
/>
</svg>
),
// Type 2: Oak Leafish
(color) => (
<svg
viewBox="0 0 100 100"
width="100%"
height="100%"
className="overflow-visible"
>
<path
d="M50 10 Q70 10 70 30 Q80 30 80 50 Q70 50 70 70 Q60 90 50 90 Q40 90 30 70 Q30 50 20 50 Q20 30 30 30 Q30 10 50 10 Z"
fill={color}
/>
<path
d="M50 15 L50 85"
stroke={color}
strokeWidth="2"
strokeOpacity="0.5"
/>
</svg>
),
// Type 3: Simple Ellipse Leaf
(color) => (
<svg
viewBox="0 0 100 100"
width="100%"
height="100%"
className="overflow-visible"
>
<path d="M50 10 Q90 50 50 90 Q10 50 50 10 Z" fill={color} />
<path
d="M50 10 L50 90"
stroke={color}
strokeWidth="2"
strokeOpacity="0.5"
/>
</svg>
),
];
const COLORS = ['#eab308', '#f97316', '#ef4444', '#a16207', '#d97706']; // Yellows, Oranges, Reds, Browns
const DigitalLeaves = () => {
const [leaves, setLeaves] = useState([]);
useEffect(() => {
// Generate random leaves
const newLeaves = Array.from({ length: 50 }).map((_, i) => ({
id: i,
left: Math.random() * 100, // percentage
size: 30 + Math.random() * 40, // px
delay: Math.random() * 5, // seconds
duration: 10 + Math.random() * 10, // seconds to fall
type: Math.floor(Math.random() * LEAF_TYPES.length),
color: COLORS[Math.floor(Math.random() * COLORS.length)],
rotation: Math.random() * 360,
}));
setLeaves(newLeaves);
}, []);
return (
<div className="fixed top-0 left-0 w-full h-full z-50 pointer-events-none overflow-hidden">
{leaves.map((leaf) => (
<motion.div
key={leaf.id}
initial={{
y: -100,
x: 0,
opacity: 0,
rotate: leaf.rotation,
}}
animate={{
y: '110vh', // Fall off screen
x: [0, 50, -50, 20, 0], // Swaying motion
opacity: [0, 1, 1, 0], // Fade in then out at bottom
rotate: leaf.rotation + 360, // Spin while falling
}}
transition={{
y: {
duration: leaf.duration,
repeat: Infinity,
delay: leaf.delay,
ease: 'linear',
},
x: {
duration: leaf.duration,
repeat: Infinity,
delay: leaf.delay,
ease: 'easeInOut',
},
opacity: {
duration: leaf.duration,
repeat: Infinity,
delay: leaf.delay,
times: [0, 0.1, 0.9, 1],
},
rotate: {
duration: leaf.duration,
repeat: Infinity,
delay: leaf.delay,
ease: 'linear',
},
}}
style={{
position: 'absolute',
left: `${leaf.left}%`,
width: leaf.size,
height: leaf.size,
}}
>
{LEAF_TYPES[leaf.type](leaf.color)}
</motion.div>
))}
</div>
);
};
export default DigitalLeaves;