Cloudscape

1"use client";
2 
3import { useEffect, useMemo, useRef } from "react";
4import { cn } from "@/lib/utils";
5 
6const vertexShaderGLSL = `
7attribute vec2 position;
8void main() {
9  gl_Position = vec4(position, 0.0, 1.0);
10}
11`;
12 
13const fragmentShaderGLSL = `
14precision highp float;
15 
16uniform vec2 u_resolution;
17uniform float u_time;
18uniform vec3 u_colorBottom;
19uniform vec3 u_colorMid;
20uniform vec3 u_colorTop;
21uniform float u_speed;
22 
23float hash(vec2 p) {
24  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
25}
26 
27float noise(vec2 p) {
28  vec2 i = floor(p);
29  vec2 f = fract(p);
30  float a = hash(i);
31  float b = hash(i + vec2(1.0, 0.0));
32  float c = hash(i + vec2(0.0, 1.0));
33  float d = hash(i + vec2(1.0, 1.0));
34  vec2 u = f * f * (3.0 - 2.0 * f);
35  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
36}
37 
38float fbm(vec2 p, float t) {
39  float v = 0.0;
40  float a = 0.5;
41  float fi = 0.0;
42  mat2 rot = mat2(0.86, 0.51, -0.51, 0.86);
43  
44  for (int i = 0; i < 6; i++) {
45    vec2 morph = vec2(sin(t * 0.5 + fi), cos(t * 0.3 - fi)) * 0.05;
46    v += a * noise(p + morph);
47    p = rot * p * 2.0;
48    a *= 0.5;
49    fi += 1.0;
50  }
51  return v;
52}
53 
54void main() {
55  vec2 uv = gl_FragCoord.xy / u_resolution;
56  float t = u_time * u_speed;
57  vec2 aspect = vec2(u_resolution.x / max(u_resolution.y, 1.0), 1.0);
58  vec2 p = (uv - 0.5) * aspect;
59 
60  vec2 wind = vec2(t * 0.1, t * 0.02);
61 
62  float pattern = fbm(p * 2.2 - wind, t);
63 
64  float bandLow = smoothstep(0.3, 0.65, pattern);
65  float bandHigh = smoothstep(0.7, 0.95, pattern); 
66  
67  vec3 color = mix(u_colorBottom, u_colorMid, bandLow);
68  color = mix(color, u_colorTop, bandHigh);
69 
70  gl_FragColor = vec4(color, 1.0);
71}
72`;
73 
74interface CloudscapeProps extends React.HTMLAttributes<HTMLDivElement> {
75  colorBottom?: string;
76  colorMid?: string;
77  colorTop?: string;
78  speed?: number;
79  height?: string;
80}
81 
82const DEFAULT_COLOR = "#0d1117";
83 
84const COLOR_HEX_PATTERN = /^#?[0-9a-fA-F]{6}$/;
85 
86function normalizeHexColor(value: string, fallback: string) {
87  const trimmed = value.trim();
88  if (!COLOR_HEX_PATTERN.test(trimmed)) {
89    return fallback;
90  }
91  return trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
92}
93 
94function hexToRgbNormalized(hex: string): [number, number, number] {
95  const normalized = normalizeHexColor(hex, DEFAULT_COLOR).replace("#", "");
96  const r = parseInt(normalized.slice(0, 2), 16) / 255;
97  const g = parseInt(normalized.slice(2, 4), 16) / 255;
98  const b = parseInt(normalized.slice(4, 6), 16) / 255;
99  return [r, g, b];
100}
101 
102// … truncated