Silk Aurora

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import {
6  WebGLErrorBoundary,
7  WebGLFallback,
8} from "./webgl-error-boundary";
9 
10const VERTEX_SHADER = `
11attribute vec2 position;
12 
13void main() {
14  gl_Position = vec4(position, 0.0, 1.0);
15}
16`;
17 
18const FRAGMENT_SHADER = `
19precision highp float;
20 
21uniform vec2 u_res;
22uniform vec2 u_mouse;
23uniform float u_time;
24uniform float u_speed;
25uniform float u_intensity;
26uniform float u_grain;
27uniform float u_vignette;
28uniform float u_mouseInfluence;
29uniform vec3 u_base;
30uniform vec3 u_mid;
31uniform vec3 u_sheen;
32uniform vec3 u_accent;
33 
34float hash(vec2 p) {
35  return fract(sin(dot(p, vec2(41.93, 289.17))) * 43758.5453123);
36}
37 
38float noise(vec2 p) {
39  vec2 i = floor(p);
40  vec2 f = fract(p);
41  vec2 u = f * f * (3.0 - 2.0 * f);
42 
43  float a = hash(i);
44  float b = hash(i + vec2(1.0, 0.0));
45  float c = hash(i + vec2(0.0, 1.0));
46  float d = hash(i + vec2(1.0, 1.0));
47 
48  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
49}
50 
51float fbm(vec2 p) {
52  float value = 0.0;
53  float amp = 0.5;
54  mat2 rot = mat2(0.82, 0.57, -0.57, 0.82);
55 
56  for (int i = 0; i < 5; i++) {
57    value += amp * noise(p);
58    p = rot * p * 2.03;
59    amp *= 0.5;
60  }
61 
62  return value;
63}
64 
65float ribbon(vec2 p, float offset, float width, float softness) {
66  float y = p.y + sin(p.x * 1.8 + offset) * 0.18;
67  y += sin(p.x * 4.2 - offset * 0.7) * 0.045;
68  return smoothstep(width + softness, width, abs(y));
69}
70 
71void main() {
72  vec2 uv = gl_FragCoord.xy / u_res;
73  float aspect = u_res.x / max(u_res.y, 1.0);
74  vec2 p = (uv - 0.5) * vec2(aspect, 1.0);
75 
76  vec2 mouse = (u_mouse - 0.5) * vec2(aspect, 1.0);
77  float t = u_time * 0.12 * u_speed;
78  float pointerFalloff = smoothstep(0.72, 0.0, length(p - mouse));
79  p += (mouse - p) * pointerFalloff * 0.05 * u_mouseInfluence;
80 
81  vec2 silk = p;
82  silk.x += fbm(p * 1.6 + vec2(t * 0.8, -t * 0.35)) * 0.16;
83  silk.y += fbm(p * 2.2 + vec2(-t * 0.25, t * 0.7)) * 0.10;
84 
85  float veilA = ribbon(silk + vec2(-0.18, 0.08), t * 2.1, 0.055, 0.22);
86  float veilB = ribbon(silk * vec2(0.86, 1.18) + vec2(0.2, -0.14), -t * 2.8 + 1.7, 0.038, 0.18);
87  float veilC = ribbon(silk * vec2(1.18, 0.9) + vec2(-0.08, 0.24), t * 1.4 - 2.1, 0.03, 0.16);
88 
89  float atmosphere = fbm(p * 1.35 + vec2(t * 0.22, -t * 0.1));
90  float pearlescent = pow(max(0.0, sin((p.x - p.y) * 7.5 + atmosphere * 4.0 - t * 2.5)), 5.0);
91  float glint = pow(max(0.0, noise(gl_FragCoord.xy * 0.065 + t * 18.0) - 0.72), 5.0);
92 
93  vec3 col = u_base;
94// … truncated