React Nebula Shaders

'use client';import React, { forwardRef } from 'react';import { Shader } from 'react-shaders';import { cn } from '@/lib/utils';export interface NebulaShadersProps extends React.HTMLAttributes<HTMLDivElement> {  /**   * Cloud drift speed   * @default 1.0   */  speed?: number;  /**   * Nebula density and opacity   * @default 1.0   */  density?: number;  /**   * Star brightness and quantity   * @default 1.0   */  stars?: number;  /**   * Color temperature (cool to warm)   * @default 0.5   */  temperature?: number;  /**   * Cloud turbulence amount   * @default 1.0   */  turbulence?: number;}const nebulaShader = `// Noise function for procedural texturesfloat hash(vec2 p) {    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);}float noise(vec2 p) {    vec2 i = floor(p);    vec2 f = fract(p);    float a = hash(i);    float b = hash(i + vec2(1.0, 0.0));    float c = hash(i + vec2(0.0, 1.0));    float d = hash(i + vec2(1.0, 1.0));    vec2 u = f * f * (3.0 - 2.0 * f);    return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;}// Fractal Brownian Motion for complex cloud structuresfloat fbm(vec2 p) {    float value = 0.0;    float amplitude = 0.5;    float frequency = 1.0;    for(int i = 0; i < 6; i++) {        value += amplitude * noise(p * frequency);        amplitude *= 0.5;        frequency *= 2.0;    }    return value;}// Generate star fieldfloat stars(vec2 p) {    vec2 grid = floor(p * 200.0);    vec2 cell = fract(p * 200.0);    float starHash = hash(grid);    // Only create stars in some cells    if(starHash < 0.95) return 0.0;    // Create star position within cell    vec2 starPos = vec2(hash(grid + vec2(1.0)), hash(grid + vec2(2.0)));    float dist = length(cell - starPos);    // Create twinkling effect    float twinkle = sin(iTime * 3.0 + starHash * 10.0) * 0.5 + 0.5;    // Sharp star with distance falloff    return smoothstep(0.1, 0.0, dist) * twinkle;}void mainImage( out vec4 fragColor, in vec2 fragCoord ){    // Normalize coordinates    vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.y;    // Time with speed control    float time = iTime * u_speed * 0.1;    // Create slowly drifting coordinates for nebula clouds    vec2 cloudUV = uv + vec2(time * 0.3, time * 0.2);    // Generate multiple noise layers for complex cloud structure    float cloud1 = fbm(cloudUV * 2.0 * u_turbulence);    float cloud2 = fbm(cloudUV * 4.0 * u_turbulence + vec2(1000.0));    float cloud3 = fbm(cloudUV * 8.0 * u_turbulence + vec2(2000.0));    // Combine clouds with different weights    float clouds = cloud1 * 0.5 + cloud2 * 0.3 + cloud3 * 0.2;    // Apply density control    clouds = pow(clouds, 2.0 - u_density);    // Create color temperature gradient    vec3 coolColor = vec3(0.4, 0.6, 1.0);  // Blue    vec3 warmColor = vec3(1.0, 0.4, 0.2);  // Orange-red    vec3 nebulaColor = mix(coolColor, warmColor, u_temperature);    // Add depth variation with different colors    vec3 deepColor = nebulaColor * 0.3;    vec3 brightColor = nebulaColor * 1.2;    // Create color variation based on cloud density    vec3 finalNebulaColor = mix(deepColor, brightColor, clouds);    // Add subtle purple/pink highlights in dense areas    vec3 highlight = vec3(0.8, 0.3, 0.7);    finalNebulaColor = mix(finalNebulaColor, highlight, clouds * clouds * 0.3);    // Generate star field    float starField = stars(uv) * u_stars;    // Add brighter stars with different sizes    float bigStars = stars(uv * 0.5) * 0.8 * u_stars;    starField += bigStars;    // Combine nebula and stars    vec3 finalColor = finalNebulaColor * clouds;    finalColor += vec3(1.0, 0.9, 0.8) * starField;    // Add distant background glow    float centerGlow = exp(-length(uv) * 0.8) * 0.1;    finalColor += nebulaColor * centerGlow;    // Create subtle animation of brightness    float breathe = sin(time * 0.5) * 0.1 + 0.9;    finalColor *= breathe;    // Enhance contrast for more dramatic space effect    finalColor = pow(finalColor, vec3(0.8));    // Ensure colors stay in valid range    finalColor = clamp(finalColor, 0.0, 1.0);    fragColor = vec4(finalColor, 1.0);}`;export const NebulaShaders = forwardRef<HTMLDivElement, NebulaShadersProps>(({  className,  speed = 1.0,  density = 1.0,  stars = 1.0,  temperature = 0.5,  turbulence = 1.0,  ...props}, ref) => {  return (    <div      ref={ref}      className={cn('w-full h-full', className)}      {...props}    >      <Shader        fs={nebulaShader}        uniforms={{          u_speed: { type: '1f', value: speed },          u_density: { type: '1f', value: density },          u_stars: { type: '1f', value: stars },          u_temperature: { type: '1f', value: temperature },          u_turbulence: { type: '1f', value: turbulence },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});NebulaShaders.displayName = 'NebulaShaders';export default NebulaShaders;