mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: restore missing SVG animations in HeroIllustration
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 7s
Details
Build & Deploy / 🧪 QA (push) Successful in 1m35s
Details
Build & Deploy / 🏗️ Build (push) Failing after 17s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🧪 Smoke Test (push) Has been skipped
Details
Build & Deploy / ⚡ Lighthouse (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-21 01:56:09 +01:00
parent e95f7c6dd2
commit c4bc10ef76
2 changed files with 63 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
components/home/HeroIllustration.tsx
View File

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

2
next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts"; import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.