Velora

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 vec3 u_colorBottom;
21uniform vec3 u_colorMid;
22uniform vec3 u_colorTop;
23uniform float u_flowStrength;
24uniform float u_grain;
25uniform float u_speed;
26 
27varying vec2 vUv;
28 
29float hash(vec3 p) {
30  return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453123);
31}
32 
33float noise(vec3 p) {
34  vec3 i = floor(p);
35  vec3 f = fract(p);
36  vec3 u = f * f * (3.0 - 2.0 * f);
37  
38  return mix(
39    mix(mix(hash(i + vec3(0.0, 0.0, 0.0)), hash(i + vec3(1.0, 0.0, 0.0)), u.x),
40        mix(hash(i + vec3(0.0, 1.0, 0.0)), hash(i + vec3(1.0, 1.0, 0.0)), u.x), u.y),
41    mix(mix(hash(i + vec3(0.0, 0.0, 1.0)), hash(i + vec3(1.0, 0.0, 1.0)), u.x),
42        mix(hash(i + vec3(0.0, 1.0, 1.0)), hash(i + vec3(1.0, 1.0, 1.0)), u.x), u.y), u.z
43  );
44}
45 
46float fbm(vec3 p) {
47  float v = 0.0;
48  float a = 0.5;
49  for (int i = 0; i < 4; i++) {
50    v += a * noise(p);
51    p *= 2.0;
52    a *= 0.5;
53  }
54  return v;
55}
56 
57void main() {
58  vec2 uv = (vUv - 0.5) * vec2(u_resolution.x / u_resolution.y, 1.0);
59  
60  float radius = length(uv);
61  float angle = atan(uv.y, uv.x);
62  
63  float z = 1.0 / max(radius, 0.001);
64  float t = u_time * u_speed * 5.0;
65  
66  float streakScale = 5.0 * u_flowStrength; 
67  
68  vec3 cylPos = vec3(
69    cos(angle) * streakScale, 
70    sin(angle) * streakScale, 
71    (z - t) * 0.2 
72  );
73  
74  float twist = sin(t * 0.1 + z * 0.05) * 2.5;
75  float c = cos(twist);
76  float s = sin(twist);
77  cylPos.xy = mat2(c, -s, s, c) * cylPos.xy;
78  
79  float n = fbm(cylPos);
80  
81  float streak = smoothstep(0.4, 0.8, n);
82  
83  vec3 color = mix(u_colorBottom, u_colorMid, smoothstep(0.3, 0.6, n));
84  color = mix(color, u_colorTop, smoothstep(0.6, 1.0, n));
85  
86  float centerFade = smoothstep(0.0, 0.25, radius);
87  float edgeFade = smoothstep(1.5, 0.4, radius);
88  
89  vec3 finalColor = color * streak * centerFade * edgeFade * 3.0;
90 
91  finalColor += (fract(sin(dot(vUv + u_time, vec2(12.9898, 78.233))) * 43758.5453) - 0.5) * u_grain;
92 
93  gl_FragColor = vec4(clamp(finalColor, 0.0, 1.0), 1.0);
94}
95`;
96 
97interface VeloraProps extends React.HTMLAttributes<HTMLDivElement> {
98  colorBottom?: string;
99  colorMid?: string;
100  colorTop?: string;
101  flowStrength?: number;
102// … truncated