Dither Prism Hero

1"use client";
2 
3/* eslint-disable react/no-unknown-property */
4import { useRef, useMemo, useEffect, useState } from "react";
5import { Canvas, useFrame, ThreeElements, useThree } from "@react-three/fiber";
6import * as THREE from "three";
7import { motion } from "framer-motion";
8 
9import { cn } from "@/lib/utils";
10import { WebGLErrorBoundary, WebGLFallback } from "./webgl-error-boundary";
11 
12// Type augmentation for R3F
13declare global {
14    // eslint-disable-next-line @typescript-eslint/no-namespace
15    namespace JSX {
16        type IntrinsicElements = ThreeElements;
17    }
18}
19 
20// ═══════════════════════════════════════════════════════════════════════════════
21// VERTEX SHADER
22// ═══════════════════════════════════════════════════════════════════════════════
23const vertexShader = `
24varying vec2 vUv;
25varying vec3 vPosition;
26 
27void main() {
28  vUv = uv;
29  vPosition = position;
30  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
31}
32`;
33 
34// ═══════════════════════════════════════════════════════════════════════════════
35// FRAGMENT SHADER - The magic happens here!
36// ═══════════════════════════════════════════════════════════════════════════════
37const fragmentShader = `
38uniform float uTime;
39uniform vec2 uResolution;
40uniform vec2 uMouse;
41uniform float uMouseIntensity;
42uniform vec3 uColor1;
43uniform vec3 uColor2;
44uniform vec3 uColor3;
45uniform float uDitherIntensity;
46uniform float uPrismIntensity;
47varying vec2 vUv;
48varying vec3 vPosition;
49 
50// ─────────────────────────────────────────────────────────────────────────────
51// Hash functions for procedural noise
52// … truncated