Noctylis

1"use client";
2 
3import { useEffect, useRef } from "react";
4import { cn } from "@/lib/utils";
5 
6const vertexShaderGLSL = `
7attribute vec2 position;
8varying vec2 vUv;
9void main() {
10  vUv = position * 0.5 + 0.5;
11  gl_Position = vec4(position, 0.0, 1.0);
12}
13`;
14 
15const fragmentShaderGLSL = `
16precision highp float;
17varying vec2 vUv;
18 
19uniform vec2 u_resolution;
20uniform float u_time;
21uniform float u_grain;
22uniform vec3 u_colors[3];
23 
24vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
25vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
26vec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }
27 
28float snoise(vec2 v) {
29  const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
30  vec2 i = floor(v + dot(v, C.yy));
31  vec2 x0 = v - i + dot(i, C.xx);
32  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
33  vec4 x12 = x0.xyxy + C.xxzz;
34  x12.xy -= i1;
35  i = mod289(i);
36  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
37  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
38  m = m * m;
39  m = m * m;
40  vec3 x = 2.0 * fract(p * C.www) - 1.0;
41  vec3 h = abs(x) - 0.5;
42  vec3 ox = floor(x + 0.5);
43  vec3 a0 = x - ox;
44  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
45  vec3 g;
46  g.x = a0.x * x0.x + h.x * x0.y;
47  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
48  return 130.0 * dot(m, g);
49}
50 
51void main() {
52  vec2 uv = vUv;
53  float ratio = u_resolution.x / u_resolution.y;
54  vec2 p = uv * vec2(ratio, 1.0);
55  float t = u_time * 0.2;
56 
57  vec2 warp = vec2(
58    snoise(p * 0.35 + t * 0.12),
59    snoise(p * 0.35 - t * 0.1 + 1.7)
60  );
61  p += warp * 0.06;
62 
63  float n1 = snoise(p * 0.5 + t);
64  float n2 = snoise(p * 0.88 - t * 0.48 + n1 * 0.75);
65 
66  float light = pow(abs(n2), 2.35) * 0.52;
67 
68  vec3 col = vec3(0.015, 0.008, 0.022);
69 
70  col += u_colors[0] * smoothstep(0.1, 1.0, n1) * 0.48;
71  col += u_colors[1] * light;
72  col += u_colors[2] * pow(max(n1 * 0.5 + n2 * 0.5, 0.0), 2.8) * 0.18;
73  col += u_colors[2] * pow(abs(n2), 4.5) * 0.1;
74 
75  float grain = fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453 + u_time);
76  col += (grain - 0.5) * u_grain * 0.22;
77 
78  float edgeX = smoothstep(0.0, 0.1, uv.x) * smoothstep(1.0, 0.9, uv.x);
79  float edgeY = smoothstep(0.0, 0.08, uv.y) * smoothstep(1.0, 0.92, uv.y);
80  col *= mix(0.9, 1.0, edgeX * edgeY);
81 
82  gl_FragColor = vec4(col, 1.0);
83}
84`;
85 
86export interface NoctylisProps {
87  colors?: string[];
88  speed?: number;
89// … truncated