Add functionality for a dynamic background

Tietokilta · Dec 5, 2024 · 5a6404b · 5a6404b
1 parent 6b6eacb
commit 5a6404b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/web/app/[locale]/page.tsx b/web/app/[locale]/page.tsx
@@ -1,3 +1,4 @@
+'use client'
 import Image from "next/image";
 import Link from "next/link";
 import ReactMarkdown from "react-markdown";
@@ -6,6 +7,8 @@ import { fetchAPI } from "../../lib/api";
 import { getTranslation } from "../../utils/translationHelper";
 import { StrapiBaseType } from "../../utils/models";
 import PageContinue from "./PageContinue";
+import React from 'react'
+import { ShaderGradientCanvas, ShaderGradient } from '@shadergradient/react'
 export const dynamic = "force-dynamic";
 type FrontPageFields = StrapiBaseType<{
   bodyText: string;
@@ -39,6 +42,7 @@ const Home = async ({ params: { locale } }: Props) => {
   return (
     <div className="container max-w-3xl bg-secondary-50 dark:bg-secondary-800 mx-auto rounded shadow-md mt-4 p-1 sm:p-8">
       <main className="container mx-auto px-4">
+
         <ReactMarkdown
           components={{
             img: (image) => {

diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -4,25 +4,30 @@ import Footer from "../components/Footer";
 import Header from "../components/Header";
 import Locale from "../components/Locale";
 import Timer from "../components/Timer";
+import BackgroundCanvas from "../components/BackgroundCanvas";
 
 import { fetchAPI } from "@/lib/api";
 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;
   params: {
     locale: string;
   };
 };
+
 export const dynamic = "force-dynamic";
 
 const RootLayout = async ({ children }: PropType) => {
   return (
     <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>
           <Header locale="">
             <Locale />

diff --git a/web/components/BackgroundCanvas.tsx b/web/components/BackgroundCanvas.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { ShaderGradientCanvas, ShaderGradient } from '@shadergradient/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>
+  );
+};
+
+export default BackGroundCanvas;
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
@@ -30,7 +30,7 @@ const configuration = {
   darkMode: "class", // class/media
   theme: {
     colors: {
-      primary: getColor(PRIMARY_COLOR, "purple"),
+      primary: getColor(PRIMARY_COLOR, "blue"),
       secondary: getColor(SECONDARY_COLOR, "neutral"),
       transparent: colors.transparent,
       success: colors.green,