andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

seems fine

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-05 22:29:28 +01:00
parent 48983e3b4b
commit 7a1696541f
37 changed files with 4999 additions and 1242 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/components/home/HexCanvas.tsx
View file

@ -6,6 +6,7 @@ interface HexConfig {
size: number;
opacity: number;
top: number;
left: number;
driftDuration: number;
bobDuration: number;
bobAmount: number;
@ -21,6 +22,7 @@ function generateHexes(): HexConfig[] {
size: 10 + Math.random() * 32,
opacity: 0.06 + Math.random() * 0.18,
top: Math.random() * 100,
left: Math.random() * 100,
driftDuration,
bobDuration: 6 + Math.random() * 8,
bobAmount: 8 + Math.random() * 30,
@ -31,7 +33,13 @@ function generateHexes(): HexConfig[] {
return hexes;
}
export default function HexCanvas({ isDark = false }: { isDark?: boolean }) {
export default function HexCanvas({
isDark = false,
animated = true,
}: {
isDark?: boolean;
animated?: boolean;
}) {
const hexes = useMemo(generateHexes, []);
return (
@ -42,7 +50,14 @@ export default function HexCanvas({ isDark = false }: { isDark?: boolean }) {
className="absolute"
style={{
top: `${hex.top}%`,
animation: `hex-drift ${hex.driftDuration}s linear ${hex.delay}s infinite${hex.reverse ? ' reverse' : ''}`,
...(animated
? {
animation: `hex-drift ${hex.driftDuration}s linear ${hex.delay}s infinite${hex.reverse ? ' reverse' : ''}`,
}
: {
left: `${hex.left}%`,
transform: `translate(-50%, -50%) rotate(${hex.delay * 12}deg)`,
}),
}}
>
<div
@ -51,9 +66,9 @@ export default function HexCanvas({ isDark = false }: { isDark?: boolean }) {
{
width: hex.size,
height: (hex.size * 2) / Math.sqrt(3),
opacity: hex.opacity * (isDark ? 0.6 : 1),
opacity: hex.opacity * (isDark ? 0.45 : 0.6),
clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)',
animation: `hex-bob ${hex.bobDuration}s ease-in-out infinite`,
animation: animated ? `hex-bob ${hex.bobDuration}s ease-in-out infinite` : undefined,
'--bob': `${hex.bobAmount}px`,
} as React.CSSProperties
}