Liquid Chrome

1"use client";
2 
3import { cn } from "../lib/utils";
4import { useEffect, useRef } from "react";
5 
6interface LiquidChromeProps {
7  /** Additional CSS classes for custom styling */
8  className?: string;
9  /** Base color tint for the chrome. Default is white/silver. Use hex or rgb. */
10  baseColor?: [number, number, number];
11  /** Animation speed multiplier. Default is 1.0 */
12  speed?: number;
13  /** Detail level of the fluid waves. Higher is more detailed. Default is 0.4 */
14  amplitude?: number;
15  /** Enables mouse interaction if true */
16  interactive?: boolean;
17}
18 
19const vertexShaderSource = `
20  attribute vec2 position;
21  void main() {
22    gl_Position = vec4(position, 0.0, 1.0);
23  }
24`;
25 
26const fragmentShaderSource = `
27  precision highp float;
28 
29  uniform vec2 u_resolution;
30  uniform float u_time;
31  uniform vec2 u_mouse;
32  uniform vec3 u_baseColor;
33  uniform float u_amplitude;
34 
35  // Simple 2D noise
36  const mat2 m = mat2( 0.80,  0.60, -0.60,  0.80 );
37 
38  float hash( vec2 p ) {
39      float h = dot(p,vec2(127.1,311.7));
40      return fract(sin(h)*43758.5453123);
41  }
42 
43  float noise( in vec2 p ) {
44      vec2 i = floor( p );
45      vec2 f = fract( p );
46      vec2 u = f*f*(3.0-2.0*f);
47      return mix( mix( hash( i + vec2(0.0,0.0) ), 
48                       hash( i + vec2(1.0,0.0) ), u.x),
49                  mix( hash( i + vec2(0.0,1.0) ), 
50                       hash( i + vec2(1.0,1.0) ), u.x), u.y);
51  }
52 
53  float fbm( vec2 p ) {
54      float f = 0.0;
55      f += 0.5000*noise( p ); p = m*p*2.02;
56      f += 0.2500*noise( p ); p = m*p*2.03;
57      f += 0.1250*noise( p ); p = m*p*2.01;
58      f += 0.0625*noise( p );
59      return f/0.9375;
60  }
61 
62  void main() {
63    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
64    vec2 p = -1.0 + 2.0 * uv;
65    if (u_resolution.y > 0.0) {
66        p.x *= u_resolution.x / u_resolution.y;
67    }
68 
69    // Mouse interaction
70    vec2 mouse = (u_mouse - 0.5) * 2.0;
71    if (u_resolution.y > 0.0) {
72        mouse.x *= u_resolution.x / u_resolution.y;
73    }
74    
75    // Distort based on distance to mouse
76    vec2 diff = p - mouse;
77    float dist = length(diff);
78    vec2 distortion = vec2(0.0);
79    if (dist > 0.0) {
80        distortion = (diff / dist) * exp(-dist * 3.0) * 0.1;
81    }
82    p += distortion;
83 
84    float time = u_time * 0.5;
85 
86    // Domain warping
87    vec2 q = vec2(0.0);
88    q.x = fbm(p + vec2(0.0, 0.0) + time * 0.1);
89    q.y = fbm(p + vec2(5.2, 1.3) + time * 0.15);
90 
91    vec2 r = vec2(0.0);
92    r.x = fbm(p + 4.0 * q + vec2(1.7, 9.2) + time * 0.2);
93// … truncated