diff --git a/src/app/globals.css b/src/app/globals.css index 1729c05..5f708b7 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -15,6 +15,10 @@ /* `Globe` components */ .globe-container { + display: flex; + flex-direction: column; + height: 100lvh; + & > div { position: absolute; top: 0; diff --git a/src/lib/fx/noise.tsx b/src/lib/fx/noise.tsx index 9d07c76..b5d2611 100644 --- a/src/lib/fx/noise.tsx +++ b/src/lib/fx/noise.tsx @@ -19,11 +19,14 @@ function Noise() { currentCanvas.width, currentCanvas.height ); - const buffer = new Uint32Array(imageData.data.buffer); - for (let i = 0; i < buffer.length; i++) { + const data = imageData.data; // `Uint8ClampedArray` + for (let i = 0; i < data.length; i += 4) { const gray = 230 + Math.random() * 25; // Gray values closer to white const alpha = 0.25 * 255; // Adjust opacity - buffer[i] = ((alpha << 24) | (gray << 16) | (gray << 8) | gray) >>> 0; + data[i] = gray; // Red + data[i + 1] = gray; // Green + data[i + 2] = gray; // Blue + data[i + 3] = alpha; // Alpha } context.putImageData(imageData, 0, 0); } @@ -38,7 +41,7 @@ function Noise() {