hero-geometric

1"use client";
2 
3/* eslint-disable react/no-unknown-property */
4import { useRef, useMemo } from "react";
5import { Canvas, useFrame, ThreeElements } from "@react-three/fiber";
6import * as THREE from "three";
7import { motion } from "framer-motion";
8 
9import { cn } from "../lib/utils";
10 
11/* eslint-disable @typescript-eslint/no-namespace */
12declare module "react" {
13    namespace JSX {
14        // eslint-disable-next-line @typescript-eslint/no-empty-interface
15        interface IntrinsicElements extends ThreeElements { }
16    }
17}
18/* eslint-enable @typescript-eslint/no-namespace */
19 
20// --- Shader Code ---
21const vertexShader = `
22varying vec2 vUv;
23void main() {
24  vUv = uv;
25  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
26}
27`;
28 
29const fragmentShader = `
30uniform float uTime;
31uniform vec2 uResolution;
32uniform vec3 uColor1;
33uniform vec3 uColor2;
34varying vec2 vUv;
35 
36vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
37 
38float snoise(vec2 v){
39  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
40           -0.577350269189626, 0.024390243902439);
41  vec2 i  = floor(v + dot(v, C.yy) );
42  vec2 x0 = v -   i + dot(i, C.xx);
43  vec2 i1;
44  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
45  vec4 x12 = x0.xyxy + C.xxzz;
46  x12.xy -= i1;
47  i = mod(i, 289.0);
48  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
49  + i.x + vec3(0.0, i1.x, 1.0 ));
50  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
51  m = m*m ;
52  m = m*m ;
53  vec3 x = 2.0 * fract(p * C.www) - 1.0;
54  vec3 h = abs(x) - 0.5;
55  vec3 ox = floor(x + 0.5);
56  vec3 a0 = x - ox;
57  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
58  vec3 g;
59  g.x  = a0.x  * x0.x  + h.x  * x0.y;
60  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
61  return 130.0 * dot(m, g);
62}
63 
64float bayerDither4x4(vec2 uv) {
65    int x = int(mod(uv.x, 4.0));
66    int y = int(mod(uv.y, 4.0));
67    
68    int matrix[16];
69    matrix[0] = 0; matrix[1] = 8; matrix[2] = 2; matrix[3] = 10;
70    matrix[4] = 12; matrix[5] = 4; matrix[6] = 14; matrix[7] = 6;
71    matrix[8] = 3; matrix[9] = 11; matrix[10] = 1; matrix[11] = 9;
72    matrix[12] = 15; matrix[13] = 7; matrix[14] = 13; matrix[15] = 5;
73    
74    return float(matrix[y * 4 + x]) / 16.0;
75}
76 
77void main() {
78    vec2 uv = vUv;
79    vec2 coord = gl_FragCoord.xy;
80    
81    // Enhanced noise with time
82    float noise = snoise(uv * 1.5 + vec2(uTime * 0.05, uTime * 0.03)) * 0.25;
83    
84    // Diagonal gradient from bottom-left to top-right
85// … truncated