Add visible prop to toggle components and simplify conditional rendering

This commit is contained in:
geoffsee
2025-07-01 15:43:17 -04:00
committed by Geoff Seemueller
parent e72198628c
commit 6cc5e038a7
4 changed files with 57 additions and 49 deletions

View File

@@ -8,12 +8,14 @@ interface MatrixRainProps {
speed?: number;
glow?: boolean;
intensity?: number;
visible?: boolean;
}
export const MatrixRain: React.FC<MatrixRainProps> = ({
speed = 1,
glow = false,
intensity = 1,
visible,
}) => {
const fontSize = useBreakpointValue({ base: 14, md: 18, lg: 22 }) ?? 14;
const theme = useTheme();
@@ -111,7 +113,12 @@ export const MatrixRain: React.FC<MatrixRainProps> = ({
cancelAnimationFrame(animationRef.current);
}
};
}, [fontSize, speed, glow, intensity]);
}, [fontSize, speed, glow, intensity, visible]);
return <canvas ref={canvasRef} style={{ display: 'block' }} />;
return (
<canvas
ref={canvasRef}
style={{ display: visible ? 'block' : 'none', pointerEvents: 'none' }}
/>
);
};