Lumadrift

1"use client";
2 
3import { useEffect, useMemo, useRef } from "react";
4import { cn } from "@/lib/utils";
5 
6const vertexShaderGLSL = `
7attribute vec2 position;
8varying vec2 vUv;
9 
10void main() {
11  gl_Position = vec4(position, 0.0, 1.0);
12  vUv = (position.xy + 1.0) * 0.5;
13}
14`;
15 
16const fragmentShaderGLSL = `
17precision highp float;
18 
19uniform vec2 u_resolution;
20uniform float u_time;
21 
22varying vec2 vUv;
23 
24vec2 hash(vec2 p) {
25  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
26  return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
27}
28 
29float noise(vec2 p) {
30  vec2 i = floor(p);
31  vec2 f = fract(p);
32  vec2 u = f * f * (3.0 - 2.0 * f);
33  return mix(mix(dot(hash(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
34                 dot(hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
35             mix(dot(hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
36                 dot(hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
37}
38 
39float fbm(vec2 p) {
40  float value = 0.0;
41  float amplitude = 0.5;
42  for (int i = 0; i < 4; i++) {
43    value += amplitude * noise(p);
44    p *= 2.0;
45    amplitude *= 0.5;
46  }
47  return value;
48}
49 
50void main() {
51  vec2 uv = vUv;
52  float t = u_time * 0.0004;
53 
54  float warp = noise(vec2(uv.x * 1.2 + t, t * 0.2));
55  vec2 uvWarped = uv;
56  uvWarped.x += warp * 0.1;
57 
58  float n1 = noise(vec2(uvWarped.x * 2.0 + t * 0.5, uvWarped.y * 0.2 - t * 0.1));
59  float n2 = noise(vec2(uvWarped.x * 4.0 - t * 0.8, uvWarped.y * 0.5 + t * 0.2));
60  
61  float aurora = abs(n1 + n2);
62  aurora = pow(1.0 - smoothstep(0.0, 0.4, aurora), 4.0);
63  
64  float mask = smoothstep(0.0, 0.4, uv.y) * smoothstep(1.0, 0.5, uv.y);
65  aurora *= mask;
66 
67  vec3 darkBlue = vec3(0.02, 0.04, 0.08);
68  vec3 oceanBlue = vec3(0.05, 0.15, 0.35);
69  vec3 skyBlue = vec3(0.1, 0.3, 0.6);
70  vec3 cyan = vec3(0.2, 0.6, 0.9);
71  vec3 brightGlow = vec3(0.4, 0.8, 1.0);
72 
73  vec3 col = darkBlue;
74  col = mix(col, oceanBlue, aurora * 0.8);
75  col = mix(col, skyBlue, pow(aurora, 2.0));
76  col = mix(col, cyan, pow(aurora, 3.0));
77  col += brightGlow * pow(aurora, 5.0) * 0.5;
78 
79  float grain = fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453);
80  col += grain * 0.02;
81 
82  gl_FragColor = vec4(col, 1.0);
83}
84`;
85 
86interface LumaDriftProps extends React.HTMLAttributes<HTMLDivElement> {
87  speed?: number;
88  height?: string;
89}
90 
91const LumaDrift = ({
92  speed = 1,
93  height = "100vh",
94  className,
95  style,
96  ...props
97}: LumaDriftProps) => {
98  const canvasRef = useRef<HTMLCanvasElement | null>(null);
99// … truncated