Add background wavy canvas

Tietokilta · Dec 5, 2024 · 033c53c · 033c53c
1 parent 5a6404b
commit 033c53c
Show file tree

Hide file tree

Showing 4 changed files with 360 additions and 16 deletions.
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -11,7 +11,6 @@ import { StrapiBaseType, StrapiImage, StrapiResponse } from "@/utils/models";
 import AppProvider from "../context/AppContext";
 import "../styles/global.css";
 import React from 'react'
-import { ShaderGradientCanvas, ShaderGradient } from '@shadergradient/react'
 
 type PropType = {
   children: React.ReactNode;
@@ -27,8 +26,8 @@ const RootLayout = async ({ children }: PropType) => {
     <html lang="fi" className="dark w-full h-full">
       <head />
       <body className="bg-secondary-200 dark:bg-secondary-900 p-2 text-secondary-700 dark:text-secondary-100'">
-        <BackgroundCanvas />
-        <AppProvider>
+      <BackgroundCanvas />
+      <AppProvider>
           <Header locale="">
             <Locale />
             <Timer />

diff --git a/web/components/BackgroundCanvas.tsx b/web/components/BackgroundCanvas.tsx
@@ -1,20 +1,24 @@
 "use client"
 
 import { ShaderGradientCanvas, ShaderGradient } from '@shadergradient/react';
+import {Suspense} from "react";
 
 const BackGroundCanvas = () => {
   return (
-    <ShaderGradientCanvas
-      style={{
-        position: 'fixed',
-        top: 0,
-      }}
-    >
-      <ShaderGradient
-        control='query'
-        urlString='https://www.shadergradient.co/customize?animate=on&axesHelper=off&bgColor1=%23000000&bgColor2=%23000000&brightness=1&cAzimuthAngle=180&cDistance=2.8&cPolarAngle=80&cameraZoom=9.1&color1=%23801832&color2=%23ca5377&color3=%23a85973&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=45&frameRate=10&gizmoHelper=hide&grain=off&lightType=env&pixelDensity=3&positionX=0&positionY=0&positionZ=0&range=enabled&rangeEnd=40&rangeStart=0&reflection=0&rotationX=50&rotationY=0&rotationZ=-60&shader=defaults&type=waterPlane&uAmplitude=0&uDensity=1.7&uFrequency=0&uSpeed=0.5&uStrength=0.8&uTime=8&wireframe=false'
-      />
-    </ShaderGradientCanvas>
+    <Suspense>
+      <ShaderGradientCanvas
+        style={{
+          position: 'fixed',
+          bottom: 0,
+          right: 0,
+          pointerEvents: 'none',
+        }}
+      >
+        <ShaderGradient
+          control='query'
+          urlString='https://www.shadergradient.co/customize?animate=on&axesHelper=off&bgColor1=%23000000&bgColor2=%23000000&brightness=1&cAzimuthAngle=180&cDistance=2.8&cPolarAngle=80&cameraZoom=9.1&color1=%23000000&color2=%23801832&color3=%2380631f&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=45&frameRate=10&gizmoHelper=hide&grain=off&lightType=env&pixelDensity=3&positionX=0&positionY=0&positionZ=0&range=enabled&rangeEnd=40&rangeStart=0&reflection=0&rotationX=50&rotationY=0&rotationZ=-60&shader=defaults&type=waterPlane&uAmplitude=0&uDensity=1.7&uFrequency=0&uSpeed=0.5&uStrength=0.8&uTime=8&wireframe=false'/>
+      </ShaderGradientCanvas>
+    </Suspense>
   );
 };