1
npm i @react-three/fiber @react-three/drei three

1
import React, { JSX, useRef } from 'react';
2
import { Canvas, useFrame, extend } from '@react-three/fiber';
3
import { shaderMaterial } from '@react-three/drei';
4

5
const IridescentShaderMaterial = shaderMaterial(
6
  { uTime: 0 },
7
  `
8
    varying vec2 vUv;
9
    void main() {
10
      vUv = uv;
11
      // Standard vertex transformation
12
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
13
    }
14
  `,
15
  `
16
    precision mediump float;
17
    
18
    varying vec2 vUv;
19
    uniform float uTime;
20

21
    // Pseudo-random function based on a 2D input
22
    float random (in vec2 st) {
23
      return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
24
    }
25

26
    // Simple 2D noise function using smooth interpolation
27
    float noise (in vec2 st) {
28
      vec2 i = floor(st);
29
      vec2 f = fract(st);
30
      
31
      float a = random(i);
32
      float b = random(i + vec2(1.0, 0.0));
33
      float c = random(i + vec2(0.0, 1.0));
34
      float d = random(i + vec2(1.0, 1.0));
35
      
36
      vec2 u = f * f * (3.0 - 2.0 * f);
37
      
38
      return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
39
    }
40
    
41
    // Function for generating an iridescent color effect with noise.
42
    vec3 iridescentColor(vec2 uv, float time) {
43
      // Offset the UV coordinates over time for movement.
44
      uv.x += 0.1 * sin(time * 0.5);
45
      uv.y += 0.1 * cos(time * 0.5);
46

47
      // Blend sinusoidal waves in different color channels.
48
      float r = 0.5 + 0.5 * sin(uv.x * 6.0 + time);
49
      float g = 0.5 + 0.5 * sin(uv.y * 6.0 + time + 2.0);
50
      float b = 0.5 + 0.5 * sin((uv.x + uv.y) * 6.0 + time + 4.0);  
51
      
52
      // Generate a noise value for organic variation.
53
      float n = noise(uv * 10.0 + time);
54
      
55
      // Add a subtle noise offset to each channel.
56
      r += 0.1 * n;
57
      g += 0.1 * n;
58
      b += 0.1 * n;
59
      
60
      return vec3(r, g, b);
61
    }
62

63
    void main() {
64
      // Center the UV coordinates for symmetrical effects.
65
      vec2 centeredUV = vUv * 2.0 - 1.0;
66
      float time = uTime * 0.5; // Slow down the time factor.
67
      
68
      // Get the fluid iridescent color.
69
      vec3 color = iridescentColor(centeredUV, time);
70

71
      // Add a grain effect based on the fragment coordinates.
72
      float grain = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123);
73
      // Center and scale the grain: adjust 0.2 to increase/decrease intensity.
74
      grain = (grain - 0.5) * 0.2;
75
      
76
      // Add the grain to the final color.
77
      color += vec3(grain);
78

79
      gl_FragColor = vec4(color, 1.0);
80
    }
81
  `
82
);
83

84
extend({ IridescentShaderMaterial });
85

86
declare module '@react-three/fiber' {
87
  interface ThreeElements {
88
    iridescentShaderMaterial: JSX.IntrinsicElements['shaderMaterial'];
89
  }
90
}
91

92
function PrismaticHazePlane() {
93
  const materialRef = useRef<any>(null);
94

95
  useFrame(({ clock }) => {
96
    if (materialRef.current) {
97
      materialRef.current.uTime = clock.getElapsedTime();
98
    }
99
  });
100

101
  return (
102
    <mesh scale={[2, 2, 1]}>
103
      <planeGeometry args={[1, 1, 32, 32]} />
104
      <iridescentShaderMaterial ref={materialRef} />
105
    </mesh>
106
  );
107
}
108

109
type PrismaticHazeBackgroundProps = {
110
  children?: React.ReactNode;
111
  className?: string;
112
};
113

114
const PrismaticHazeBackground = ({ children, className }: PrismaticHazeBackgroundProps) => {
115
  return (
116
    <div className="relative w-full h-full">
117
      <Canvas className="w-full h-full" camera={{ position: [0, 0, 1], fov: 40 }}>
118
        <PrismaticHazePlane />
119
      </Canvas>
120

121
      <div className={`absolute inset-0 ${className}`}>{children}</div>
122
    </div>
123
  );
124
};
125

126
export default PrismaticHazeBackground;