Velaris

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[4];
23uniform vec3  u_bg;
24 
25vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
26 
27float snoise(vec2 v){
28  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
29           -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 = mod(i, 289.0);
36  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
37  + i.x + vec3(0.0, i1.x, 1.0 ));
38  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
39    dot(x12.zw,x12.zw)), 0.0);
40  m = m*m ;
41  m = m*m ;
42  vec3 x = 2.0 * fract(p * C.www) - 1.0;
43  vec3 h = abs(x) - 0.5;
44  vec3 ox = floor(x + 0.5);
45  vec3 a0 = x - ox;
46  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
47  vec3 g;
48  g.x  = a0.x  * x0.x  + h.x  * x0.y;
49  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
50  return 130.0 * dot(m, g);
51}
52 
53void main() {
54  vec2 uv = vUv;
55  float ratio = u_resolution.x / u_resolution.y;
56  vec2 p = uv - 0.5;
57  p.x *= ratio;
58 
59  float t = u_time * 0.1;
60 
61  float n1 = snoise(p * 0.4 + vec2(t * 0.2, -t * 0.3));
62  float n2 = snoise(p * 0.55 + vec2(-t * 0.15, t * 0.25) + n1 * 0.25);
63  float n3 = snoise(p * 0.75 + vec2(t * 0.1, -t * 0.2) + n2 * 0.2);
64 
65  vec3 col = u_bg;
66  
67  float dist = length(p) * 1.5;
68  float vignette = 1.0 - smoothstep(0.3, 1.2, dist);
69  
70  col = mix(col, u_colors[0], smoothstep(-0.2, 0.5, n1) * 0.85);
71  col = mix(col, u_colors[1], smoothstep(-0.1, 0.6, n2) * 0.7);
72  col = mix(col, u_colors[2], smoothstep(-0.3, 0.4, n3) * 0.6);
73  col = mix(col, u_colors[3], smoothstep(0.0, 0.7, n1 * n2) * 0.5);
74 
75  float glow = smoothstep(0.8, 0.0, dist) * 0.3;
76  col += u_colors[1] * glow;
77 
78  col = mix(col * 0.2, col, vignette);
79 
80  float grain = fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453 + u_time);
81  col += (grain - 0.5) * u_grain * 0.1;
82 
83  gl_FragColor = vec4(col, 1.0);
84}
85`;
86 
87export interface VelarisProps {
88  bg?: string;
89  colors?: string[];
90  speed?: number;
91  grain?: number;
92  height?: string;
93  className?: string;
94// … truncated