Chromatic Fluid

1"use client";
2 
3import { useEffect, useMemo, useRef } from "react";
4import { cn } from "@/lib/utils";
5 
6const vertexShaderGLSL = `
7attribute vec2 position;
8varying vec2 vUv;
9void main() {
10  vUv = (position + 1.0) * 0.5;
11  gl_Position = vec4(position, 0.0, 1.0);
12}
13`;
14 
15const fragmentShaderGLSL = `
16precision highp float;
17 
18uniform vec2 u_resolution;
19uniform float u_time;
20uniform float u_flowStrength;
21uniform float u_grain;
22uniform float u_contrast;
23uniform float u_speed;
24 
25varying vec2 vUv;
26 
27float hash(vec2 p) {
28  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
29}
30 
31float noise(vec2 p) {
32  vec2 i = floor(p);
33  vec2 f = fract(p);
34  vec2 u = f * f * (3.0 - 2.0 * f);
35  return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
36             mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y);
37}
38 
39float fbm(vec2 p) {
40  float v = 0.0;
41  float a = 0.5;
42  mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.5));
43  for (int i = 0; i < 4; i++) { 
44    v += a * noise(p);
45    p = rot * p * 2.0;
46    a *= 0.5;
47  }
48  return v;
49}
50 
51void main() {
52  vec2 uv = vUv;
53  float t = u_time * u_speed;
54  vec2 p = (uv - 0.5) * vec2(u_resolution.x / u_resolution.y, 1.0) * 2.0;
55 
56  float baseNoise = fbm(p * 0.8 + t * 0.2);
57  float fluid = fbm(p * 1.2 + baseNoise * u_flowStrength + t * 0.3);
58  
59  float eps = 0.01;
60  float nx = fbm(p + vec2(eps, 0.0) + baseNoise * u_flowStrength + t * 0.3) - fluid;
61  float ny = fbm(p + vec2(0.0, eps) + baseNoise * u_flowStrength + t * 0.3) - fluid;
62  vec3 normal = normalize(vec3(nx, ny, eps * 1.5));
63  
64  vec3 lightDir = normalize(vec3(1.0, 1.0, 0.8)); 
65  vec3 viewDir = vec3(0.0, 0.0, 1.0);
66  vec3 halfVector = normalize(lightDir + viewDir);
67  
68  vec3 color = vec3(0.0); 
69  
70  float glintIntensity = 64.0; 
71  
72  float specR = pow(max(dot(normalize(vec3(nx + 0.005, ny, eps*1.5)), halfVector), 0.0), glintIntensity);
73  float specG = pow(max(dot(normal, halfVector), 0.0), glintIntensity);
74  float specB = pow(max(dot(normalize(vec3(nx - 0.005, ny, eps*1.5)), halfVector), 0.0), glintIntensity);
75  
76  vec3 specular = vec3(specR, specG, specB) * 1.5; 
77  
78  color += specular;
79 
80  color = mix(vec3(0.5), color, u_contrast);
81  
82  float vig = smoothstep(1.8, 0.2, length(uv - 0.5));
83  color *= vig;
84 
85  float grainAmount = (hash(uv + t) - 0.5) * u_grain;
86  color += grainAmount;
87 
88  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
89}
90`;
91 
92interface ChromaticFluidProps extends React.HTMLAttributes<HTMLDivElement> {
93  flowStrength?: number;
94  grain?: number;
95// … truncated