Update shadergradient and fix brightness

spatie · Dec 16, 2024 · a450523 · a450523
1 parent 8d66ad0
commit a450523
Show file tree

Hide file tree

Showing 8 changed files with 3,231 additions and 776 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,10 +8,10 @@
         "build": "vite build"
     },
     "dependencies": {
-        "@react-spring/three": "^9.7.3",
-        "@react-three/fiber": "^8.16.2",
+        "@react-spring/three": "^9.7.5",
+        "@react-three/fiber": "^8.17.10",
+        "@shadergradient/react": "^2.0.15",
         "@tailwindcss/forms": "^0.5.7",
-        "@types/three": "^0.163.0",
         "@vitejs/plugin-react": "^4.2.1",
         "alpinejs": "^3.10.5",
         "autoprefixer": "^10.4.19",
@@ -22,13 +22,13 @@
         "prettier": "^1.10.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "shadergradient": "^1.2.10",
         "tailwindcss": "^3.4.3",
-        "three": "0.150.0",
+        "three": "^0.150.0",
         "three-stdlib": "^2.29.6",
         "vite": "^5.0"
     },
     "devDependencies": {
+        "@types/three": "^0.171.0",
         "postcss": "^8.2.8"
     },
     "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

diff --git a/resources/js/front/gradient.jsx b/resources/js/front/gradient.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { createRoot } from "react-dom/client";
-import { ShaderGradientCanvas, ShaderGradient } from 'shadergradient';
+import { ShaderGradientCanvas, ShaderGradient } from '@shadergradient/react'
 
 document.addEventListener('livewire:navigated', () => {
     const element = document.getElementById("gradient");

diff --git a/resources/views/front/pages/docs/index.blade.php b/resources/views/front/pages/docs/index.blade.php
@@ -11,7 +11,7 @@
             x-cloak
             class="absolute top-0 left-0 right-0 z-0 pointer-events-none"
         >
-            <div id="gradient" class="aspect-[9/16] sm:aspect-[1440/700] w-full" data-url="https://www.shadergradient.co/customize?animate=on&axesHelper=off&bgColor1=%23000000&bgColor2=%23000000&brightness=1.8&cAzimuthAngle=180&cDistance=2&cPolarAngle=80&cameraZoom=9.1&color1=%23197593&color2=%23328c7d&color3=%23EAE8E5&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=20&frameRate=10&gizmoHelper=hide&grain=off&lightType=3d&pixelDensity=1&positionX=1&positionY=-0.8&positionZ=0&range=enabled&rangeEnd=40&rangeStart=0&reflection=0.1&rotationX=50&rotationY=0&rotationZ=-60&shader=defaults&type=waterPlane&uAmplitude=0&uDensity=2&uFrequency=0&uSpeed=0.05&uStrength=0.6&uTime=8&wireframe=false"></div>
+            <div id="gradient" class="aspect-[9/16] sm:aspect-[1440/700] w-full" data-url="https://www.shadergradient.co/customize?animate=on&axesHelper=off&bgColor1=%23000000&bgColor2=%23000000&brightness=0.4&cAzimuthAngle=180&cDistance=2&cPolarAngle=80&cameraZoom=9.1&color1=%23197593&color2=%23328c7d&color3=%23EAE8E5&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=20&frameRate=10&gizmoHelper=hide&grain=off&lightType=3d&pixelDensity=1&positionX=1&positionY=-0.8&positionZ=0&range=enabled&rangeEnd=40&rangeStart=0&reflection=0.1&rotationX=50&rotationY=0&rotationZ=-60&shader=defaults&type=waterPlane&uAmplitude=0&uDensity=2&uFrequency=0&uSpeed=0.05&uStrength=0.6&uTime=8&wireframe=false"></div>
             <div class="absolute inset-0 z-10 w-full h-full aspect-[9/16] sm:aspect-[1440/700] bg-gradient-to-b from-transparent to-oss-gray"></div>
         </div>
     @endpush

diff --git a/resources/views/front/pages/open-source/index.blade.php b/resources/views/front/pages/open-source/index.blade.php
@@ -28,7 +28,7 @@
             x-cloak
             class="absolute top-0 left-0 right-0 z-0 pointer-events-none"
         >
-            <div id="gradient" class="aspect-[9/16] sm:aspect-video w-full" data-url="https://www.shadergradient.co/customize?animate=on&axesHelper=on&bgColor1=%2300da00&bgColor2=%23c90000&brightness=0.9&cAzimuthAngle=180&cDistance=2.5&cPolarAngle=115&cameraZoom=1&color1=%23B21E4E&color2=%23015389&color3=%23E0614E&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=50&frameRate=10&grain=off&lightType=3d&pixelDensity=1.5&positionX=-1.5&positionY=0.1&positionZ=0&range=disabled&rangeEnd=40&rangeStart=0&reflection=0.2&rotationX=0&rotationY=0&rotationZ=235&shader=defaults&type=waterPlane&uAmplitude=0&uDensity=1.2&uFrequency=5.5&uSpeed=0.05&uStrength=3&uTime=0.2&wireframe=false"></div>
+            <div id="gradient" class="aspect-[9/16] sm:aspect-video w-full" data-url="https://www.shadergradient.co/customize?animate=on&axesHelper=on&bgColor1=%2300da00&bgColor2=%23c90000&brightness=0.4&cAzimuthAngle=180&cDistance=2.5&cPolarAngle=115&cameraZoom=1&color1=%23B21E4E&color2=%23015389&color3=%23E0614E&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=50&frameRate=10&grain=off&lightType=3d&pixelDensity=1.5&positionX=-1.5&positionY=0.1&positionZ=0&range=disabled&rangeEnd=40&rangeStart=0&reflection=0.2&rotationX=0&rotationY=0&rotationZ=235&shader=defaults&type=waterPlane&uAmplitude=0&uDensity=1.2&uFrequency=5.5&uSpeed=0.05&uStrength=3&uTime=0.2&wireframe=false"></div>
             <div class="absolute inset-0 z-10 w-full h-full aspect-video bg-gradient-to-b from-transparent to-oss-black"></div>
         </div>
     @endpush

diff --git a/resources/views/front/pages/open-source/packages.blade.php b/resources/views/front/pages/open-source/packages.blade.php
@@ -18,7 +18,7 @@
             class="absolute top-0 left-0 right-0 z-0 pointer-events-none"
         >
             <div id="gradient" class="aspect-[9/16] sm:aspect-video w-full"
-                 data-url="https://www.shadergradient.co/customize?animate=on&axesHelper=off&bgColor1=%23000000&bgColor2=%23000000&brightness=1.4&cAzimuthAngle=250&cDistance=1.5&cPolarAngle=140&cameraZoom=12.5&color1=%239e0b68&color2=%231f0059&color3=%235b00b8&embedMode=off&envPreset=city&fov=45&gizmoHelper=hide&grain=off&lightType=3d&pixelDensity=1.1&positionX=0&positionY=0&positionZ=0&range=disabled&reflection=0.5&rotationX=0&rotationY=0&rotationZ=140&shader=defaults&type=sphere&uAmplitude=2.3&uDensity=1.4&uFrequency=5.5&uSpeed=0.05&uStrength=1.2&uTime=0&wireframe=false"></div>
+                 data-url="https://www.shadergradient.co/customize?animate=on&axesHelper=off&bgColor1=%23000000&bgColor2=%23000000&brightness=0.6&cAzimuthAngle=250&cDistance=1.5&cPolarAngle=140&cameraZoom=12.5&color1=%239e0b68&color2=%231f0059&color3=%235b00b8&embedMode=off&envPreset=city&fov=45&gizmoHelper=hide&grain=off&lightType=3d&pixelDensity=1.1&positionX=0&positionY=0&positionZ=0&range=disabled&reflection=0.5&rotationX=0&rotationY=0&rotationZ=140&shader=defaults&type=sphere&uAmplitude=2.3&uDensity=1.4&uFrequency=5.5&uSpeed=0.05&uStrength=1.2&uTime=0&wireframe=false"></div>
             <div
                 class="absolute inset-0 z-10 w-full h-full aspect-video bg-gradient-to-b from-transparent to-oss-black"></div>
         </div>

diff --git a/resources/views/front/pages/open-source/postcards.blade.php b/resources/views/front/pages/open-source/postcards.blade.php
@@ -20,7 +20,7 @@
             class="absolute top-0 left-0 right-0 z-0 pointer-events-none"
         >
             <div id="gradient" class="aspect-[9/16] sm:aspect-video w-full"
-                 data-url="https://www.shadergradient.co/customize?animate=on&axesHelper=on&bgColor1=%23000000&bgColor2=%23000000&brightness=1.1&cAzimuthAngle=180&cDistance=3.9&cPolarAngle=115&cameraZoom=1&color1=%234c00ed&color2=%234f7f76&color3=%23000000&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=45&frameRate=10&grain=off&lightType=3d&pixelDensity=1.5&positionX=-0.5&positionY=0.1&positionZ=0&range=disabled&rangeEnd=40&rangeStart=0&reflection=0.5&rotationX=0&rotationY=0&rotationZ=235&shader=defaults&toggleAxis=false&type=waterPlane&uAmplitude=0&uDensity=1&uFrequency=5.5&uSpeed=0.05&uStrength=2.3&uTime=0.2&wireframe=false"></div>
+                 data-url="https://www.shadergradient.co/customize?animate=on&axesHelper=on&bgColor1=%23000000&bgColor2=%23000000&brightness=0.6&cAzimuthAngle=180&cDistance=3.9&cPolarAngle=115&cameraZoom=1&color1=%234c00ed&color2=%234f7f76&color3=%23000000&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=45&frameRate=10&grain=off&lightType=3d&pixelDensity=1.5&positionX=-0.5&positionY=0.1&positionZ=0&range=disabled&rangeEnd=40&rangeStart=0&reflection=0.5&rotationX=0&rotationY=0&rotationZ=235&shader=defaults&toggleAxis=false&type=waterPlane&uAmplitude=0&uDensity=1&uFrequency=5.5&uSpeed=0.05&uStrength=2.3&uTime=0.2&wireframe=false"></div>
             <div
                 class="absolute inset-0 z-10 w-full h-full aspect-video bg-gradient-to-b from-transparent to-oss-black"></div>
         </div>