login page update
This commit is contained in:
153
src/components/TreeAnimation.tsx
Normal file
153
src/components/TreeAnimation.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
const LEAVES = [
|
||||
// Left low cluster (b1 tip ~40,308)
|
||||
{ cx: 34, cy: 302, r: 18, fill: '#22c55e', delay: '1.65s' },
|
||||
{ cx: 14, cy: 295, r: 15, fill: '#16a34a', delay: '1.70s' },
|
||||
{ cx: 26, cy: 280, r: 16, fill: '#4ade80', delay: '1.68s' },
|
||||
{ cx: 48, cy: 290, r: 13, fill: '#15803d', delay: '1.72s' },
|
||||
{ cx: 8, cy: 312, r: 12, fill: '#22c55e', delay: '1.75s' },
|
||||
// Right low cluster (b2 tip ~240,302)
|
||||
{ cx: 246, cy: 296, r: 18, fill: '#22c55e', delay: '1.75s' },
|
||||
{ cx: 266, cy: 290, r: 15, fill: '#16a34a', delay: '1.80s' },
|
||||
{ cx: 254, cy: 275, r: 16, fill: '#4ade80', delay: '1.78s' },
|
||||
{ cx: 234, cy: 286, r: 13, fill: '#15803d', delay: '1.82s' },
|
||||
{ cx: 270, cy: 308, r: 12, fill: '#22c55e', delay: '1.85s' },
|
||||
// sb3/sb4 mid-tips
|
||||
{ cx: 50, cy: 270, r: 13, fill: '#4ade80', delay: '1.80s' },
|
||||
{ cx: 228, cy: 267, r: 13, fill: '#4ade80', delay: '1.85s' },
|
||||
// sb1/sb2 outer tips
|
||||
{ cx: 8, cy: 255, r: 14, fill: '#4ade80', delay: '1.90s' },
|
||||
{ cx: 270, cy: 251, r: 14, fill: '#4ade80', delay: '1.90s' },
|
||||
// Left mid cluster (b3 tip ~44,258)
|
||||
{ cx: 38, cy: 252, r: 16, fill: '#22c55e', delay: '2.05s' },
|
||||
{ cx: 18, cy: 246, r: 13, fill: '#4ade80', delay: '2.10s' },
|
||||
{ cx: 30, cy: 232, r: 14, fill: '#16a34a', delay: '2.08s' },
|
||||
{ cx: 52, cy: 240, r: 11, fill: '#86efac', delay: '2.12s' },
|
||||
{ cx: 12, cy: 264, r: 10, fill: '#22c55e', delay: '2.15s' },
|
||||
// Right mid cluster (b4 tip ~236,255)
|
||||
{ cx: 242, cy: 248, r: 16, fill: '#22c55e', delay: '2.10s' },
|
||||
{ cx: 262, cy: 242, r: 13, fill: '#4ade80', delay: '2.15s' },
|
||||
{ cx: 250, cy: 228, r: 14, fill: '#16a34a', delay: '2.12s' },
|
||||
{ cx: 230, cy: 238, r: 11, fill: '#86efac', delay: '2.18s' },
|
||||
{ cx: 266, cy: 260, r: 10, fill: '#22c55e', delay: '2.20s' },
|
||||
// sb5/sb6 outer tips (~16,214 and ~262,210)
|
||||
{ cx: 12, cy: 208, r: 13, fill: '#86efac', delay: '2.30s' },
|
||||
{ cx: 266, cy: 206, r: 13, fill: '#86efac', delay: '2.30s' },
|
||||
// Left upper cluster (b5 tip ~86,218)
|
||||
{ cx: 80, cy: 212, r: 17, fill: '#4ade80', delay: '2.45s' },
|
||||
{ cx: 62, cy: 202, r: 14, fill: '#22c55e', delay: '2.50s' },
|
||||
{ cx: 90, cy: 196, r: 12, fill: '#86efac', delay: '2.48s' },
|
||||
{ cx: 68, cy: 188, r: 13, fill: '#4ade80', delay: '2.52s' },
|
||||
// Right upper cluster (b6 tip ~194,214)
|
||||
{ cx: 200, cy: 208, r: 17, fill: '#4ade80', delay: '2.48s' },
|
||||
{ cx: 218, cy: 198, r: 14, fill: '#22c55e', delay: '2.52s' },
|
||||
{ cx: 192, cy: 193, r: 12, fill: '#86efac', delay: '2.50s' },
|
||||
{ cx: 210, cy: 185, r: 13, fill: '#4ade80', delay: '2.55s' },
|
||||
// Top center canopy (b7 tip ~128,196)
|
||||
{ cx: 120, cy: 188, r: 16, fill: '#4ade80', delay: '2.60s' },
|
||||
{ cx: 140, cy: 176, r: 21, fill: '#22c55e', delay: '2.65s' },
|
||||
{ cx: 160, cy: 188, r: 16, fill: '#4ade80', delay: '2.62s' },
|
||||
{ cx: 126, cy: 166, r: 13, fill: '#16a34a', delay: '2.68s' },
|
||||
{ cx: 154, cy: 164, r: 14, fill: '#86efac', delay: '2.72s' },
|
||||
{ cx: 140, cy: 154, r: 18, fill: '#22c55e', delay: '2.75s' },
|
||||
{ cx: 134, cy: 142, r: 12, fill: '#4ade80', delay: '2.78s' },
|
||||
{ cx: 148, cy: 140, r: 11, fill: '#86efac', delay: '2.80s' },
|
||||
]
|
||||
|
||||
const PARTICLES = [
|
||||
{ cx: 45, cy: 420, r: 5, fill: '#4ade80', delay: '3.5s', dur: '7s' },
|
||||
{ cx: 235, cy: 415, r: 3, fill: '#86efac', delay: '5.0s', dur: '9s' },
|
||||
{ cx: 88, cy: 425, r: 4, fill: '#22c55e', delay: '4.0s', dur: '8s' },
|
||||
{ cx: 192, cy: 418, r: 5, fill: '#4ade80', delay: '6.0s', dur: '10s' },
|
||||
{ cx: 140, cy: 422, r: 3, fill: '#86efac', delay: '3.8s', dur: '6s' },
|
||||
{ cx: 115, cy: 416, r: 4, fill: '#22c55e', delay: '7.0s', dur: '8s' },
|
||||
{ cx: 165, cy: 424, r: 3, fill: '#4ade80', delay: '4.5s', dur: '7s' },
|
||||
]
|
||||
|
||||
export function TreeAnimation() {
|
||||
return (
|
||||
<div className="tree-wrap">
|
||||
<svg
|
||||
className="tree-svg"
|
||||
viewBox="0 115 280 325"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{/* Floating leaf particles */}
|
||||
{PARTICLES.map((p, i) => (
|
||||
<circle
|
||||
key={i}
|
||||
className="t-particle"
|
||||
cx={p.cx} cy={p.cy} r={p.r} fill={p.fill}
|
||||
style={{ animationDelay: p.delay, animationDuration: p.dur }}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Roots */}
|
||||
<path className="t-root" style={{ animationDelay: '1.00s' }}
|
||||
d="M 134 408 C 108 414 80 412 56 418" stroke="#C4954A" strokeWidth="5" strokeLinecap="round" />
|
||||
<path className="t-root" style={{ animationDelay: '1.05s' }}
|
||||
d="M 146 408 C 172 414 200 412 224 418" stroke="#C4954A" strokeWidth="5" strokeLinecap="round" />
|
||||
<path className="t-root" style={{ animationDelay: '1.02s' }}
|
||||
d="M 140 410 C 138 422 134 430 128 436" stroke="#C4954A" strokeWidth="4" strokeLinecap="round" />
|
||||
<path className="t-root" style={{ animationDelay: '1.08s' }}
|
||||
d="M 140 410 C 142 422 146 430 152 436" stroke="#C4954A" strokeWidth="4" strokeLinecap="round" />
|
||||
|
||||
{/* Trunk — two overlapping strokes for depth */}
|
||||
<path className="t-trunk" style={{ animationDelay: '0.20s' }}
|
||||
d="M 133 410 L 133 265" stroke="#8B6120" strokeWidth="17" strokeLinecap="round" />
|
||||
<path className="t-trunk" style={{ animationDelay: '0.28s' }}
|
||||
d="M 147 410 L 147 265" stroke="#C4954A" strokeWidth="7" strokeLinecap="round" />
|
||||
|
||||
{/* Level-1 branches */}
|
||||
<path className="t-branch" style={{ animationDelay: '1.00s' }}
|
||||
d="M 136 356 C 104 336 70 322 40 308" stroke="#A0732A" strokeWidth="8" strokeLinecap="round" />
|
||||
<path className="t-branch" style={{ animationDelay: '1.10s' }}
|
||||
d="M 144 348 C 176 328 210 314 240 302" stroke="#A0732A" strokeWidth="8" strokeLinecap="round" />
|
||||
|
||||
{/* Level-2 branches */}
|
||||
<path className="t-branch" style={{ animationDelay: '1.50s' }}
|
||||
d="M 136 310 C 104 292 70 276 44 258" stroke="#9B6D28" strokeWidth="6" strokeLinecap="round" />
|
||||
<path className="t-branch" style={{ animationDelay: '1.60s' }}
|
||||
d="M 144 304 C 176 286 210 270 236 255" stroke="#9B6D28" strokeWidth="6" strokeLinecap="round" />
|
||||
|
||||
{/* Level-3 branches */}
|
||||
<path className="t-branch" style={{ animationDelay: '1.90s' }}
|
||||
d="M 136 272 C 115 253 100 237 86 218" stroke="#9B6D28" strokeWidth="5" strokeLinecap="round" />
|
||||
<path className="t-branch" style={{ animationDelay: '2.00s' }}
|
||||
d="M 144 268 C 165 249 180 233 194 214" stroke="#9B6D28" strokeWidth="5" strokeLinecap="round" />
|
||||
<path className="t-branch" style={{ animationDelay: '2.10s' }}
|
||||
d="M 140 252 C 136 232 132 215 128 196" stroke="#9B6D28" strokeWidth="4" strokeLinecap="round" />
|
||||
|
||||
{/* Sub-branches off level-1 */}
|
||||
<path className="t-branch" style={{ animationDelay: '1.55s' }}
|
||||
d="M 40 308 C 24 292 16 276 12 260" stroke="#8B6520" strokeWidth="4" strokeLinecap="round" />
|
||||
<path className="t-branch" style={{ animationDelay: '1.65s' }}
|
||||
d="M 240 302 C 256 286 262 270 266 255" stroke="#8B6520" strokeWidth="4" strokeLinecap="round" />
|
||||
<path className="t-branch" style={{ animationDelay: '1.45s' }}
|
||||
d="M 74 326 C 60 308 54 292 52 276" stroke="#8B6520" strokeWidth="3" strokeLinecap="round" />
|
||||
<path className="t-branch" style={{ animationDelay: '1.55s' }}
|
||||
d="M 206 320 C 220 302 224 286 224 271" stroke="#8B6520" strokeWidth="3" strokeLinecap="round" />
|
||||
|
||||
{/* Sub-branches off level-2 */}
|
||||
<path className="t-branch" style={{ animationDelay: '2.05s' }}
|
||||
d="M 44 258 C 28 242 20 228 16 214" stroke="#8B6520" strokeWidth="3" strokeLinecap="round" />
|
||||
<path className="t-branch" style={{ animationDelay: '2.15s' }}
|
||||
d="M 236 255 C 252 239 258 225 262 210" stroke="#8B6520" strokeWidth="3" strokeLinecap="round" />
|
||||
|
||||
{/* Leaves — inside a group so the whole canopy can sway */}
|
||||
<g className="t-canopy">
|
||||
{LEAVES.map((l, i) => (
|
||||
<circle
|
||||
key={i}
|
||||
className="t-leaf"
|
||||
cx={l.cx} cy={l.cy} r={l.r}
|
||||
fill={l.fill}
|
||||
style={{ animationDelay: l.delay }}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user