fix: restore missing SVG animations in HeroIllustration
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 7s
Build & Deploy / 🧪 QA (push) Successful in 1m35s
Build & Deploy / 🏗️ Build (push) Failing after 17s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Smoke Test (push) Has been skipped
Build & Deploy / ⚡ Lighthouse (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 7s
Build & Deploy / 🧪 QA (push) Successful in 1m35s
Build & Deploy / 🏗️ Build (push) Failing after 17s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Smoke Test (push) Has been skipped
Build & Deploy / ⚡ Lighthouse (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
This commit is contained in:
@@ -125,9 +125,9 @@ export default function HeroIllustration() {
|
||||
}, []);
|
||||
|
||||
const viewBox = isMobile ? '400 0 1000 1100' : '-400 -200 1800 1100';
|
||||
const scale = isMobile ? 1.44 : 1;
|
||||
const opacity = isMobile ? 0.6 : 0.85;
|
||||
const strokeMultiplier = isMobile ? 2.5 : 1;
|
||||
// Increase scale slightly and opacity significantly on mobile to fix the "thin" appearance
|
||||
const scale = isMobile ? 1.6 : 1;
|
||||
const opacity = isMobile ? 0.9 : 0.85;
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 z-0 overflow-visible bg-primary w-full h-full">
|
||||
@@ -155,15 +155,15 @@ export default function HeroIllustration() {
|
||||
<stop offset="70%" stopColor="white" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="white" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="blur" />
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="blur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="soft-glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1" result="blur" />
|
||||
<filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="blur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
@@ -185,7 +185,7 @@ export default function HeroIllustration() {
|
||||
x2={end.x}
|
||||
y2={end.y}
|
||||
stroke="white"
|
||||
strokeWidth={1 * strokeMultiplier}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
@@ -200,14 +200,14 @@ export default function HeroIllustration() {
|
||||
x2={end.x}
|
||||
y2={end.y}
|
||||
stroke="white"
|
||||
strokeWidth={1 * strokeMultiplier}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</g>
|
||||
|
||||
{/* POWER LINES */}
|
||||
<g stroke="white" strokeWidth={2 * strokeMultiplier} strokeOpacity="0.2">
|
||||
<g stroke="white" strokeWidth="2" strokeOpacity="0.2">
|
||||
{POWER_LINES.map((line, i) => {
|
||||
const from = gridToScreen(line.from.col, line.from.row);
|
||||
const to = gridToScreen(line.to.col, line.to.row);
|
||||
@@ -216,10 +216,10 @@ export default function HeroIllustration() {
|
||||
</g>
|
||||
|
||||
{/* ANIMATED ENERGY FLOW */}
|
||||
<g>
|
||||
<g filter="url(#glow)">
|
||||
{POWER_LINES.map((line, i) => {
|
||||
// Only animate a small subset of lines to reduce main-thread work significantly
|
||||
if (i % 5 !== 0) return null;
|
||||
// Only animate a subset of lines to reduce main-thread work
|
||||
if (i % 2 !== 0) return null;
|
||||
const from = gridToScreen(line.from.col, line.from.row);
|
||||
const to = gridToScreen(line.to.col, line.to.row);
|
||||
const length = Math.sqrt(Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2));
|
||||
@@ -231,14 +231,18 @@ export default function HeroIllustration() {
|
||||
x2={to.x}
|
||||
y2={to.y}
|
||||
stroke="url(#energy-pulse)"
|
||||
strokeWidth={3 * strokeMultiplier}
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
style={{
|
||||
strokeDasharray: `${length * 0.2} ${length * 0.8}`,
|
||||
strokeDashoffset: length,
|
||||
animation: `flow ${1.5 + (i % 3) * 0.5}s linear infinite`,
|
||||
}}
|
||||
/>
|
||||
strokeDasharray={`${length * 0.2} ${length * 0.8}`}
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dashoffset"
|
||||
from={length}
|
||||
to={0}
|
||||
dur={`${1.5 + (i % 3) * 0.5}s`}
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</line>
|
||||
);
|
||||
})}
|
||||
</g>
|
||||
@@ -253,7 +257,7 @@ export default function HeroIllustration() {
|
||||
fill="white"
|
||||
fillOpacity="0.05"
|
||||
stroke="white"
|
||||
strokeWidth={1 * strokeMultiplier}
|
||||
strokeWidth="1"
|
||||
strokeOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
@@ -261,16 +265,17 @@ export default function HeroIllustration() {
|
||||
fill="white"
|
||||
fillOpacity="0.1"
|
||||
stroke="white"
|
||||
strokeWidth={1 * strokeMultiplier}
|
||||
strokeWidth="1"
|
||||
strokeOpacity="0.3"
|
||||
/>
|
||||
<circle
|
||||
r="3"
|
||||
fill="#82ed20"
|
||||
fillOpacity="0.3"
|
||||
filter="url(#soft-glow)"
|
||||
style={{ animation: 'solar-pulse 2s ease-in-out infinite' }}
|
||||
/>
|
||||
<circle r="3" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
|
||||
<animate
|
||||
attributeName="fillOpacity"
|
||||
values="0.2;0.5;0.2"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
@@ -286,30 +291,32 @@ export default function HeroIllustration() {
|
||||
x2="0"
|
||||
y2="-60"
|
||||
stroke="white"
|
||||
strokeWidth={2 * strokeMultiplier}
|
||||
strokeWidth="2"
|
||||
strokeOpacity="0.3"
|
||||
/>
|
||||
<g transform="translate(0, -60)">
|
||||
<g
|
||||
style={{
|
||||
transformOrigin: '0px 0px',
|
||||
animation: `spin-slow ${3 + i}s linear infinite`,
|
||||
}}
|
||||
>
|
||||
{[0, 120, 240].map((angle, j) => (
|
||||
<line
|
||||
key={`blade-${i}-${j}`}
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="-30"
|
||||
stroke="white"
|
||||
strokeWidth={1.5 * strokeMultiplier}
|
||||
strokeOpacity="0.4"
|
||||
transform={`rotate(${angle})`}
|
||||
{[0, 120, 240].map((angle, j) => (
|
||||
<line
|
||||
key={`blade-${i}-${j}`}
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="-30"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeOpacity="0.4"
|
||||
transform={`rotate(${angle})`}
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from={`${angle} 0 0`}
|
||||
to={`${angle + 360} 0 0`}
|
||||
dur={`${3 + i}s`}
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
</line>
|
||||
))}
|
||||
</g>
|
||||
</g>
|
||||
);
|
||||
@@ -326,7 +333,7 @@ export default function HeroIllustration() {
|
||||
fill="white"
|
||||
fillOpacity="0.05"
|
||||
stroke="white"
|
||||
strokeWidth={1 * strokeMultiplier}
|
||||
strokeWidth="1"
|
||||
strokeOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
@@ -338,7 +345,7 @@ export default function HeroIllustration() {
|
||||
fill="white"
|
||||
fillOpacity="0.08"
|
||||
stroke="white"
|
||||
strokeWidth={1 * strokeMultiplier}
|
||||
strokeWidth="1"
|
||||
strokeOpacity="0.3"
|
||||
/>
|
||||
</g>
|
||||
@@ -353,7 +360,7 @@ export default function HeroIllustration() {
|
||||
<path
|
||||
d="M -6 0 L -3 -45 M 6 0 L 3 -45"
|
||||
stroke="white"
|
||||
strokeWidth={1.5 * strokeMultiplier}
|
||||
strokeWidth="1.5"
|
||||
strokeOpacity="0.3"
|
||||
/>
|
||||
<line
|
||||
@@ -362,7 +369,7 @@ export default function HeroIllustration() {
|
||||
x2="12"
|
||||
y2="-40"
|
||||
stroke="white"
|
||||
strokeWidth={1 * strokeMultiplier}
|
||||
strokeWidth="1"
|
||||
strokeOpacity="0.2"
|
||||
/>
|
||||
</g>
|
||||
@@ -381,7 +388,7 @@ export default function HeroIllustration() {
|
||||
fill="white"
|
||||
fillOpacity="0.08"
|
||||
stroke="white"
|
||||
strokeWidth={1 * strokeMultiplier}
|
||||
strokeWidth="1"
|
||||
strokeOpacity="0.2"
|
||||
/>
|
||||
<path
|
||||
@@ -389,7 +396,7 @@ export default function HeroIllustration() {
|
||||
fill="white"
|
||||
fillOpacity="0.05"
|
||||
stroke="white"
|
||||
strokeWidth={1 * strokeMultiplier}
|
||||
strokeWidth="1"
|
||||
strokeOpacity="0.15"
|
||||
/>
|
||||
</g>
|
||||
|
||||
Reference in New Issue
Block a user