disable WebGL effect

Author: Austin1serb

app/components/SplashCursor.tsx

@@ -1,6 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 "use client"
-import React, { useEffect, useRef } from "react"
+import { useEffect, useRef } from "react"
 
 interface ColorRGB {
   r: number
@@ -53,30 +52,31 @@ function pointerPrototype(): Pointer {
   }
 }
 
-export function SplashCursor({
+export default function SplashCursor({
   SIM_RESOLUTION = 128,
-  DYE_RESOLUTION = 256,
+  DYE_RESOLUTION = 1440,
   CAPTURE_RESOLUTION = 512,
-  DENSITY_DISSIPATION = 3,
-  VELOCITY_DISSIPATION = 1.5,
+  DENSITY_DISSIPATION = 3.5,
+  VELOCITY_DISSIPATION = 2,
   PRESSURE = 0.1,
   PRESSURE_ITERATIONS = 20,
   CURL = 3,
-  SPLAT_RADIUS = 0.1,
+  SPLAT_RADIUS = 0.2,
   SPLAT_FORCE = 6000,
-  SHADING = false,
-  COLOR_UPDATE_SPEED = 5,
-  BACK_COLOR = { r: 0, g: 0, b: 0 },
+  SHADING = true,
+  COLOR_UPDATE_SPEED = 10,
+  BACK_COLOR = { r: 0.5, g: 0, b: 0 },
   TRANSPARENT = true,
 }: SplashCursorProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
   useEffect(() => {
     const canvas = canvasRef.current
     if (!canvas) return
-    const pointers: Pointer[] = [pointerPrototype()]
 
-    const config = {
+    let pointers: Pointer[] = [pointerPrototype()]
+
+    let config = {
       SIM_RESOLUTION: SIM_RESOLUTION!,
       DYE_RESOLUTION: DYE_RESOLUTION!,
       CAPTURE_RESOLUTION: CAPTURE_RESOLUTION!,
@@ -233,7 +233,7 @@ export function SplashCursor({
       gl.shaderSource(shader, shaderSource)
       gl.compileShader(shader)
       if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        // console.trace(gl.getShaderInfoLog(shader))
+        console.trace(gl.getShaderInfoLog(shader))
       }
       return shader
     }
@@ -246,13 +246,13 @@ export function SplashCursor({
       gl.attachShader(program, fragmentShader)
       gl.linkProgram(program)
       if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-        // console.trace(gl.getProgramInfoLog(program))
+        console.trace(gl.getProgramInfoLog(program))
       }
       return program
     }
 
     function getUniforms(program: WebGLProgram) {
-      const uniforms: Record<string, WebGLUniformLocation | null> = {}
+      let uniforms: Record<string, WebGLUniformLocation | null> = {}
       const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS)
       for (let i = 0; i < uniformCount; i++) {
         const uniformInfo = gl.getActiveUniform(program, i)
@@ -784,7 +784,7 @@ export function SplashCursor({
       const w = gl.drawingBufferWidth
       const h = gl.drawingBufferHeight
       const aspectRatio = w / h
-      const aspect = aspectRatio < 1 ? 1 / aspectRatio : aspectRatio
+      let aspect = aspectRatio < 1 ? 1 / aspectRatio : aspectRatio
       const min = Math.round(resolution)
       const max = Math.round(resolution * aspect)
       if (w > h) {
@@ -1139,24 +1139,24 @@ export function SplashCursor({
       return ((value - min) % range) + min
     }
 
-    window.addEventListener("pointerdown", (e) => {
+    window.addEventListener("mousedown", (e) => {
       const pointer = pointers[0]
       const posX = scaleByPixelRatio(e.clientX)
       const posY = scaleByPixelRatio(e.clientY)
       updatePointerDownData(pointer, -1, posX, posY)
       clickSplat(pointer)
     })
 
-    function handleFirstMouseMove(e: PointerEvent) {
+    function handleFirstMouseMove(e: MouseEvent) {
       const pointer = pointers[0]
       const posX = scaleByPixelRatio(e.clientX)
       const posY = scaleByPixelRatio(e.clientY)
       const color = generateColor()
       updateFrame()
       updatePointerMoveData(pointer, posX, posY, color)
-      document.body.removeEventListener("pointermove", handleFirstMouseMove)
+      document.body.removeEventListener("mousemove", handleFirstMouseMove)
     }
-    document.body.addEventListener("pointermove", handleFirstMouseMove)
+    document.body.addEventListener("mousemove", handleFirstMouseMove)
 
     window.addEventListener("mousemove", (e) => {
       const pointer = pointers[0]
@@ -1231,5 +1231,9 @@ export function SplashCursor({
     TRANSPARENT,
   ])
 
-  return <canvas ref={canvasRef} id="fluid" className="pointer-events-none fixed top-0 left-0 z-50 h-full w-full opacity-20" />
+  return (
+    <div className="pointer-events-none fixed top-0 left-0 z-50 h-full w-full">
+      <canvas ref={canvasRef} id="fluid" className="block h-screen w-screen"></canvas>
+    </div>
+  )
 }

app/layout.tsx

@@ -9,7 +9,7 @@ import { Analytics } from "@vercel/analytics/next"
 import { bodyAttributes } from "@zero-ui/attributes"
 import { ViewTransitions } from "./utils/ViewTransition"
 import { BottomBlurOverlay } from "./ui/BlurBottomOverlay"
-import { LazySplashCursor } from "./utils/lazy-splash-cursor"
+// import { LazySplashCursor } from "./utils/lazy-splash-cursor"
 import { DesktopCursor } from "./utils/lazy-dot-cursor"
 import { siteGraph } from "@/config/schemas"
 import Script from "next/script"
@@ -36,7 +36,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
         <MotionWrapper>
           <DesktopCursor />
           <ViewTransitions />
-          <LazySplashCursor />
+
           <div className="custom:mx-auto xxs:mx-3.5 pointer-events-none absolute inset-0 z-1 max-w-6xl [background-image:url('/assets/framer-noise.png')] [background-size:128px] bg-repeat opacity-6 md:mx-5 lg:mx-8" />
           <div className={`${switzer.variable} font-switzer subpixel-antialiased`}>
             <div className="custom:mx-auto xxs:border-x pointer-events-none absolute inset-0 z-0 mx-3.5 max-w-6xl border-gray-200 md:mx-5 lg:mx-8" />

app/utils/lazy-splash-cursor.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react"
 import { TiltedWrapperProps } from "../ui/TiltedWrapper"
 
 // hoist this to module scope (not inside the component)
-export const SplashCursor = /*#__PURE__*/ dynamic(() => import("../components/SplashCursor").then((m) => m.SplashCursor), {
+export const SplashCursor = /*#__PURE__*/ dynamic(() => import("../components/SplashCursor").then((m) => m.default), {
   ssr: false,
   loading: () => null,
 })