-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDigitalFlowers.jsx
More file actions
117 lines (111 loc) · 3.54 KB
/
DigitalFlowers.jsx
File metadata and controls
117 lines (111 loc) · 3.54 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
import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
const FLOWER_TYPES = [
// Type 1: Simple Daisy-like
(color) => (
<svg
viewBox="0 0 100 100"
width="100%"
height="100%"
className="overflow-visible"
>
<path d="M50 50 Q50 20 50 10 Q50 20 60 40 Z" fill={color} />
<path d="M50 50 Q80 50 90 50 Q80 50 60 60 Z" fill={color} />
<path d="M50 50 Q50 80 50 90 Q50 80 40 60 Z" fill={color} />
<path d="M50 50 Q20 50 10 50 Q20 50 40 40 Z" fill={color} />
<path d="M50 50 Q30 30 20 20 Q30 30 45 45 Z" fill={color} />
<path d="M50 50 Q70 30 80 20 Q70 30 55 45 Z" fill={color} />
<path d="M50 50 Q70 70 80 80 Q70 70 55 55 Z" fill={color} />
<path d="M50 50 Q30 70 20 80 Q30 70 45 55 Z" fill={color} />
<circle cx="50" cy="50" r="10" fill="#fbbf24" />
</svg>
),
// Type 2: Tulip-like
(color) => (
<svg
viewBox="0 0 100 100"
width="100%"
height="100%"
className="overflow-visible"
>
<path d="M30 40 Q30 80 50 90 Q70 80 70 40 Q50 50 30 40 Z" fill={color} />
<path d="M30 40 Q40 20 50 40 Q60 20 70 40" fill={color} />
<path d="M50 90 L50 150" stroke="#166534" strokeWidth="4" />
</svg>
),
// Type 3: Round
(color) => (
<svg
viewBox="0 0 100 100"
width="100%"
height="100%"
className="overflow-visible"
>
<circle cx="50" cy="50" r="30" fill={color} opacity="0.8" />
<circle cx="50" cy="50" r="20" fill="#fff" opacity="0.3" />
<path d="M50 80 L50 150" stroke="#166534" strokeWidth="4" />
</svg>
),
];
const COLORS = ['#f472b6', '#c084fc', '#60a5fa', '#f87171', '#fbbf24'];
const DigitalFlowers = () => {
const [flowers, setFlowers] = useState([]);
useEffect(() => {
// Generate random flowers
const newFlowers = Array.from({ length: 40 }).map((_, i) => ({
id: i,
left: Math.random() * 100, // percentage
size: 60 + Math.random() * 80, // px (Increased size from 40-100 to 60-140)
delay: Math.random() * 2, // seconds
type: Math.floor(Math.random() * FLOWER_TYPES.length),
color: COLORS[Math.floor(Math.random() * COLORS.length)],
rotation: Math.random() * 30 - 15, // degrees
}));
setFlowers(newFlowers);
}, []);
return (
<div className="fixed bottom-0 left-0 w-full h-0 z-50 pointer-events-none">
{flowers.map((flower) => (
<motion.div
key={flower.id}
initial={{ y: 200, opacity: 0, rotate: flower.rotation }}
animate={{
y: 0,
opacity: 1,
rotate: [
flower.rotation - 5,
flower.rotation + 5,
flower.rotation - 5,
],
}}
transition={{
y: {
duration: 1.5,
delay: flower.delay,
type: 'spring',
stiffness: 50,
},
opacity: { duration: 1.5, delay: flower.delay },
rotate: {
duration: 3 + Math.random() * 2,
repeat: Infinity,
ease: 'easeInOut',
delay: flower.delay + 0.5,
},
}}
style={{
position: 'absolute',
left: `${flower.left}%`,
bottom: -20,
width: flower.size,
height: flower.size * 1.5, // Make them taller
transformOrigin: 'bottom center',
}}
>
{FLOWER_TYPES[flower.type](flower.color)}
</motion.div>
))}
</div>
);
};
export default DigitalFlowers;