Aurora Blur

1"use client";
2/* eslint-disable react/no-unknown-property */
3 
4import * as React from "react";
5import { Canvas, useFrame, useThree } from "@react-three/fiber";
6import * as THREE from "three";
7 
8import { cn } from "@/lib/utils";
9 
10export interface AuroraLayer {
11  color: string;
12  speed: number;
13  intensity: number;
14}
15 
16export interface SkyLayer {
17  color: string;
18  blend: number;
19}
20 
21export interface AuroraBlurProps extends React.ComponentProps<"div"> {
22  width?: number | string;
23  height?: number | string;
24  speed?: number;
25  layers?: AuroraLayer[];
26  noiseScale?: number;
27  movementX?: number;
28  movementY?: number;
29  verticalFade?: number;
30  bloomIntensity?: number;
31  skyLayers?: SkyLayer[];
32  brightness?: number;
33  saturation?: number;
34  opacity?: number;
35}
36 
37const DEFAULT_LAYERS: AuroraLayer[] = [
38  { color: "#22d3ee", speed: 0.35, intensity: 0.7 },
39  { color: "#3b82f6", speed: 0.18, intensity: 0.65 },
40  { color: "#60a5fa", speed: 0.12, intensity: 0.4 },
41  { color: "#1d4ed8", speed: 0.08, intensity: 0.22 },
42];
43 
44const DEFAULT_SKY_LAYERS: SkyLayer[] = [
45  { color: "#020617", blend: 0.52 },
46  { color: "#0f172a", blend: 0.78 },
47];
48 
49const vertexShader = `
50varying vec2 vUv;
51void main() {
52  vUv = uv;
53  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
54}
55`;
56 
57const fragmentShader = `
58precision highp float;
59varying vec2 vUv;
60uniform float u_time;
61uniform vec2 u_resolution;
62uniform float u_speed;
63uniform vec3 u_layer1Color;
64uniform float u_layer1Speed;
65uniform float u_layer1Intensity;
66uniform vec3 u_layer2Color;
67uniform float u_layer2Speed;
68uniform float u_layer2Intensity;
69uniform vec3 u_layer3Color;
70uniform float u_layer3Speed;
71uniform float u_layer3Intensity;
72uniform vec3 u_layer4Color;
73uniform float u_layer4Speed;
74uniform float u_layer4Intensity;
75uniform float u_noiseScale;
76uniform float u_movementX;
77uniform float u_movementY;
78uniform float u_verticalFade;
79uniform float u_bloomIntensity;
80uniform vec3 u_skyColor1;
81uniform vec3 u_skyColor2;
82uniform float u_skyBlend1;
83uniform float u_skyBlend2;
84uniform float u_brightness;
85uniform float u_saturation;
86uniform float u_opacity;
87 
88float hashNoise(float n) { return fract(sin(n) * 43758.5453123); }
89 
90float noise2d(vec2 p) {
91  vec2 i = floor(p);
92  vec2 f = fract(p);
93  vec2 u = f * f * (3.0 - 2.0 * f);
94 
95  return mix(
96    mix(hashNoise(i.x + hashNoise(i.y)), hashNoise(i.x + 1.0 + hashNoise(i.y)), u.x),
97    mix(hashNoise(i.x + hashNoise(i.y + 1.0)), hashNoise(i.x + 1.0 + hashNoise(i.y + 1.0)), u.x),
98    u.y
99// … truncated