closing-plasma

1"use client";
2 
3import { useEffect, useMemo, useRef } from "react";
4import { cn } from "@/lib/utils";
5 
6const VERTEX_SHADER = `
7attribute vec2 position;
8void main() {
9  gl_Position = vec4(position, 0.0, 1.0);
10}
11`;
12 
13const FRAGMENT_SHADER = `
14precision highp float;
15 
16uniform vec2 u_res;
17uniform float u_time;
18uniform vec2 u_mouse;
19uniform float u_isDark;
20uniform float u_speed;
21uniform float u_turbulence;
22uniform float u_mouseInfluence;
23uniform float u_grain;
24uniform float u_sparkle;
25uniform float u_vignette;
26uniform float u_opacity;
27 
28uniform vec3 u_darkA;
29uniform vec3 u_darkB;
30uniform vec3 u_darkC;
31uniform vec3 u_lightA;
32uniform vec3 u_lightB;
33uniform vec3 u_lightC;
34 
35vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
36vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
37vec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }
38 
39float snoise(vec2 v) {
40  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
41                     -0.577350269189626, 0.024390243902439);
42  vec2 i = floor(v + dot(v, C.yy));
43  vec2 x0 = v - i + dot(i, C.xx);
44  vec2 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 = mod289(i);
48  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
49  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
50  m = m * m;
51  m = m * m;
52  vec3 x = 2.0 * fract(p * C.www) - 1.0;
53  vec3 h = abs(x) - 0.5;
54  vec3 ox = floor(x + 0.5);
55  vec3 a0 = x - ox;
56  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
57  vec3 g;
58  g.x = a0.x * x0.x + h.x * x0.y;
59  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
60  return 130.0 * dot(m, g);
61}
62 
63float fbm(vec2 p, float turbulence) {
64  float total = 0.0;
65  float amp = 0.5;
66  float freq = 1.0;
67  mat2 rot = mat2(cos(0.45), sin(0.45), -sin(0.45), cos(0.45));
68  for (int i = 0; i < 5; i++) {
69    total += snoise(p * freq) * amp;
70    p = rot * p;
71    freq *= mix(1.85, 2.35, clamp(turbulence, 0.0, 2.0) * 0.5);
72    amp *= 0.5;
73  }
74  return total;
75}
76 
77void main() {
78  vec2 uv = gl_FragCoord.xy / u_res;
79  float aspect = u_res.x / max(u_res.y, 1.0);
80  vec2 p = (uv - 0.5) * vec2(aspect, 1.0);
81  float t = u_time * (0.15 * u_speed);
82 
83  vec2 mouse = (u_mouse - 0.5) * vec2(aspect, 1.0);
84  float dMouse = length(p - mouse);
85  p += (mouse - p) * 0.02 * u_mouseInfluence * smoothstep(0.45, 0.0, dMouse);
86 
87  vec2 flow = vec2(
88    fbm(p + vec2(t * 0.2, t * 0.1), u_turbulence),
89// … truncated