apex-ui-kit 2.0.5

package/dist/ApexUI-Kit/templates/KineticThreadsBackground/KineticThreadBackground.jsx

@@ -0,0 +1,249 @@
+import React, { useEffect, useRef } from 'react';
+import * as THREE from 'three';
+
+// --- GLSL Shader Code ---
+// Vertex shader (simple, just positions the plane)
+const vertexShader = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+
+// Fragment shader "Kinetic Threads" ke liye
+const fragmentShader = `
+    precision highp float;
+
+    uniform float uTime;
+    uniform vec2 uResolution;
+    uniform vec3 uColor;
+    uniform float uAmplitude;
+    uniform float uDistance;
+    uniform vec2 uMouse;
+    uniform int u_line_count; // Line count ab uniform hai
+
+    #define PI 3.1415926538
+
+    const float u_line_width = 7.0;
+    const float u_line_blur = 10.0;
+
+    // Perlin Noise function for organic movement
+    float Perlin2D(vec2 P) {
+        vec2 Pi = floor(P);
+        vec4 Pf_Pfmin1 = P.xyxy - vec4(Pi, Pi + 1.0);
+        vec4 Pt = vec4(Pi.xy, Pi.xy + 1.0);
+        Pt = Pt - floor(Pt * (1.0 / 71.0)) * 71.0;
+        Pt += vec2(26.0, 161.0).xyxy;
+        Pt *= Pt;
+        Pt = Pt.xzxz * Pt.yyww;
+        vec4 hash_x = fract(Pt * (1.0 / 951.135664));
+        vec4 hash_y = fract(Pt * (1.0 / 642.949883));
+        vec4 grad_x = hash_x - 0.49999;
+        vec4 grad_y = hash_y - 0.49999;
+        vec4 grad_results = inversesqrt(grad_x * grad_x + grad_y * grad_y)
+            * (grad_x * Pf_Pfmin1.xzxz + grad_y * Pf_Pfmin1.yyww);
+        grad_results *= 1.4142135623730950;
+        vec2 blend = Pf_Pfmin1.xy * Pf_Pfmin1.xy * Pf_Pfmin1.xy
+            * (Pf_Pfmin1.xy * (Pf_Pfmin1.xy * 6.0 - 15.0) + 10.0);
+        vec4 blend2 = vec4(blend, vec2(1.0 - blend));
+        return dot(grad_results, blend2.zxzx * blend2.wwyy);
+    }
+
+    float pixel(float count, vec2 resolution) {
+        return (1.0 / max(resolution.x, resolution.y)) * count;
+    }
+
+    // Function to draw a single animated line
+    float lineFn(vec2 st, float width, float perc, float offset, vec2 mouse, float time, float amplitude, float distance) {
+        float split_offset = (perc * 0.4);
+        float split_point = 0.1 + split_offset;
+
+        float amplitude_normal = smoothstep(split_point, 0.7, st.x);
+        float amplitude_strength = 0.5;
+        float finalAmplitude = amplitude_normal * amplitude_strength
+                                * amplitude * (1.0 + (mouse.y - 0.5) * 0.2);
+
+        float time_scaled = time / 10.0 + (mouse.x - 0.5) * 1.0;
+        float blur = smoothstep(split_point, split_point + 0.05, st.x) * perc;
+
+        float xnoise = mix(
+            Perlin2D(vec2(time_scaled, st.x + perc) * 2.5),
+            Perlin2D(vec2(time_scaled, st.x + time_scaled) * 3.5) / 1.5,
+            st.x * 0.3
+        );
+
+        float y = 0.5 + (perc - 0.5) * distance + xnoise / 2.0 * finalAmplitude;
+
+        float line_start = smoothstep(
+            y + (width / 2.0) + (u_line_blur * pixel(1.0, uResolution.xy) * blur),
+            y,
+            st.y
+        );
+
+        float line_end = smoothstep(
+            y,
+            y - (width / 2.0) - (u_line_blur * pixel(1.0, uResolution.xy) * blur),
+            st.y
+        );
+
+        return clamp(
+            (line_start - line_end) * (1.0 - smoothstep(0.0, 1.0, pow(perc, 0.3))),
+            0.0,
+            1.0
+        );
+    }
+
+    void main() {
+        vec2 uv = gl_FragCoord.xy / uResolution.xy;
+        float line_strength1 = 1.0;
+        for (int i = 0; i < u_line_count; i++) {
+            float p = float(i) / float(u_line_count);
+            line_strength1 *= (1.0 - lineFn(
+                uv,
+                u_line_width * pixel(1.0, uResolution.xy) * (1.0 - p),
+                p,
+                (PI * 1.0) * p,
+                uMouse,
+                uTime,
+                uAmplitude,
+                uDistance
+            ));
+        }
+
+        float line_strength2 = 1.0;
+        vec2 mirroredUv = vec2(1.0 - uv.x, uv.y);
+        vec2 mirroredMouse = vec2(1.0 - uMouse.x, uMouse.y);
+        for (int i = 0; i < u_line_count; i++) {
+            float p = float(i) / float(u_line_count);
+            line_strength2 *= (1.0 - lineFn(
+                mirroredUv,
+                u_line_width * pixel(1.0, uResolution.xy) * (1.0 - p),
+                p,
+                (PI * 1.0) * p,
+                mirroredMouse,
+                uTime,
+                uAmplitude,
+                uDistance
+            ));
+        }
+
+        float final_strength = line_strength1 * line_strength2;
+        float colorVal = 1.0 - final_strength;
+        gl_FragColor = vec4(uColor * colorVal, colorVal);
+    }
+`;
+
+
+// --- KineticThreadsBackground Component ---
+const KineticThreadsBackground = ({
+    color = "#a3e635", // lime
+    amplitude = 1.0,
+    distance = 0.5,
+    speed = 1.0,
+    mouseInteraction = true,
+}) => {
+    const mountRef = useRef(null);
+    const mouseRef = useRef({ x: 0.5, y: 0.5 });
+    const targetMouseRef = useRef({ x: 0.5, y: 0.5 });
+
+    useEffect(() => {
+        const mountNode = mountRef.current;
+
+        // Scene, Camera, Renderer
+        const scene = new THREE.Scene();
+        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        mountNode.appendChild(renderer.domElement);
+
+        // Shader Material
+        const uniforms = {
+            uTime: { value: 0 },
+            uResolution: { value: new THREE.Vector2() },
+            uMouse: { value: new THREE.Vector2(0.5, 0.5) },
+            uColor: { value: new THREE.Color(color) },
+            uAmplitude: { value: amplitude },
+            uDistance: { value: distance },
+            u_line_count: { value: 40 } // Default line count
+        };
+        const material = new THREE.ShaderMaterial({
+            vertexShader,
+            fragmentShader,
+            uniforms,
+            transparent: true,
+        });
+
+        // Fullscreen Plane
+        const geometry = new THREE.PlaneGeometry(2, 2);
+        const plane = new THREE.Mesh(geometry, material);
+        scene.add(plane);
+
+        // Mouse move handler
+        const handleMouseMove = (event) => {
+            if (!mouseInteraction) return;
+            const rect = mountNode.getBoundingClientRect();
+            targetMouseRef.current.x = (event.clientX - rect.left) / rect.width;
+            targetMouseRef.current.y = 1.0 - (event.clientY - rect.top) / rect.height;
+        };
+        const handleMouseLeave = () => {
+            targetMouseRef.current.x = 0.5;
+            targetMouseRef.current.y = 0.5;
+        };
+        if (mouseInteraction) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseleave', handleMouseLeave);
+        }
+
+        // Resize handler with mobile optimization
+        const handleResize = () => {
+            const { clientWidth, clientHeight } = mountNode;
+            renderer.setSize(clientWidth, clientHeight);
+
+            // --- Mobile Optimization ---
+            const isMobile = clientWidth < 768;
+
+            // 1. Adjust pixel ratio for performance on small screens
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, isMobile ? 1.5 : 2));
+
+            // 2. Reduce shader complexity (line count) on mobile
+            uniforms.u_line_count.value = isMobile ? 20 : 40;
+
+            uniforms.uResolution.value.set(clientWidth, clientHeight);
+        };
+        window.addEventListener('resize', handleResize);
+        handleResize(); // Initial call
+
+        // Animation loop
+        const clock = new THREE.Clock();
+        let animationFrameId;
+        const animate = () => {
+            uniforms.uTime.value = clock.getElapsedTime() * speed;
+
+            // Smoothly update mouse position (lerping)
+            mouseRef.current.x += (targetMouseRef.current.x - mouseRef.current.x) * 0.05;
+            mouseRef.current.y += (targetMouseRef.current.y - mouseRef.current.y) * 0.05;
+            uniforms.uMouse.value.set(mouseRef.current.x, mouseRef.current.y);
+
+            renderer.render(scene, camera);
+            animationFrameId = requestAnimationFrame(animate);
+        };
+        animate();
+
+        // Cleanup function
+        return () => {
+            cancelAnimationFrame(animationFrameId);
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseleave', handleMouseLeave);
+            if (mountNode && renderer.domElement) {
+                mountNode.removeChild(renderer.domElement);
+            }
+            geometry.dispose();
+            material.dispose();
+            renderer.dispose();
+        };
+    }, [color, amplitude, distance, speed, mouseInteraction]);
+
+    return <div ref={mountRef} className="absolute inset-0 z-0 w-full h-full -translate-y-20"/>;
+};
+export default KineticThreadsBackground;

package/dist/ApexUI-Kit/templates/LensFlareBackground/LensFlareBackground.jsx

@@ -0,0 +1,268 @@
+/* eslint-disable no-unused-vars */
+import { react, useRef, useEffect } from "react";
+import * as THREE from "three";
+const hexToRgb = (hex) => {
+    const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return m
+        ? [
+              parseInt(m[1], 16) / 255,
+              parseInt(m[2], 16) / 255,
+              parseInt(m[3], 16) / 255,
+          ]
+        : [1, 1, 1];
+};
+
+const getAnchorAndDir = (w, h) => {
+    // Always center for this effect
+    return { anchor: [0.5 * w, 0.2 * h], dir: [0, 3] };
+};
+
+// Only add the selected props for lens flare effect, no other changes
+const LensFlareBackground = ({
+    flareColor = "#fbbf24", // Main color of the lens flare
+    intensity = 1.0,        // Intensity of the flare
+    animationSpeed = 1.0,   // Animation speed
+    rayLengthValue = 1,
+}) => {
+    const mountRef = useRef();
+    const uniformsRef = useRef();
+    const mouseRef = useRef({ x: 0.5, y: 0.5 });
+    const smoothMouseRef = useRef({ x: 0.5, y: 0.5 });
+
+    useEffect(() => {
+        if (!mountRef.current) return;
+        let renderer, scene, camera, material, mesh, frameId;
+        let dpr = Math.min(window.devicePixelRatio, 2);
+
+        const getDims = () => {
+            if (!mountRef.current) return [0, 0];
+            return [mountRef.current.clientWidth * dpr, mountRef.current.clientHeight * dpr];
+        };
+
+        const setupRenderer = () => {
+            renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+            renderer.setClearColor(0x000000, 0);
+            if (mountRef.current) {
+                renderer.setSize(mountRef.current.clientWidth, mountRef.current.clientHeight, false);
+                mountRef.current.appendChild(renderer.domElement);
+            }
+        };
+
+        const setupScene = () => {
+            camera = new THREE.OrthographicCamera(0, 1, 1, 0, -1, 1);
+            scene = new THREE.Scene();
+            const geometry = new THREE.PlaneGeometry(1, 2);
+            const [w, h] = getDims();
+            const uniforms = {
+                iTime: { value: 0 },
+                iResolution: { value: new THREE.Vector2(w, h) },
+                rayPos: { value: new THREE.Vector2(0, 0) },
+                rayDir: { value: new THREE.Vector2(0, 1) },
+                raysColor: { value: new THREE.Color(...hexToRgb(flareColor)) },
+                raysSpeed: { value: animationSpeed },
+                lightSpread: { value: 4 },
+                rayLength: { value: 1 },
+                pulsating: { value: 0.0 },
+                fadeDistance: { value: 1.0 },
+                saturation: { value: 1.0 },
+                mousePos: { value: new THREE.Vector2(0.5, 0.5) },
+                mouseInfluence: { value: 0.1 },
+                noiseAmount: { value: 0.0 },
+                distortion: { value: 0.0 },
+                intensity: { value: intensity },
+            };
+            uniformsRef.current = uniforms;
+
+            const vertexShader = `
+                varying vec2 vUv;
+                void main() {
+                    vUv = uv;
+                    gl_Position = vec4(position, 1.0);
+                }
+            `;
+
+            const fragmentShader = `
+                precision highp float;
+                uniform float iTime;
+                uniform vec2  iResolution;
+                uniform vec2  rayPos;
+                uniform vec2  rayDir;
+                uniform vec3  raysColor;
+                uniform float raysSpeed;
+                uniform float lightSpread;
+                uniform float rayLength;
+                uniform float pulsating;
+                uniform float fadeDistance;
+                uniform float saturation;
+                uniform vec2  mousePos;
+                uniform float mouseInfluence;
+                uniform float noiseAmount;
+                uniform float distortion;
+                uniform float intensity;
+                varying vec2 vUv;
+
+                float noise(vec2 st) {
+                    return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+                }
+
+                float rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord,
+                                    float seedA, float seedB, float speed) {
+                    vec2 sourceToCoord = coord - raySource;
+                    vec2 dirNorm = normalize(sourceToCoord);
+                    float cosAngle = dot(dirNorm, rayRefDirection);
+                    float distortedAngle = cosAngle + distortion * sin(iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2;
+                    float spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / max(lightSpread, 0.001));
+                    float distance = length(sourceToCoord);
+                    float maxDistance = iResolution.x * rayLength;
+                    float lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0);
+                    float fadeFalloff = clamp((iResolution.x * fadeDistance - distance) / (iResolution.x * fadeDistance), 0.5, 1.0);
+                    float pulse = pulsating > 0.5 ? (0.8 + 0.2 * sin(iTime * speed * 3.0)) : 1.0;
+                    float baseStrength = clamp(
+                        (0.45 + 0.15 * sin(distortedAngle * seedA + iTime * speed)) +
+                        (0.3 + 0.2 * cos(-distortedAngle * seedB + iTime * speed)),
+                        0.0, 1.0
+                    );
+                    return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse;
+                }
+
+                float dotGlow(vec2 uv, vec2 pos, float size) {
+                    float d = length(uv - pos);
+                    return exp(-pow(d / size, 2.5));
+                }
+
+                void main() {
+                    vec2 fragCoord = vUv * iResolution.xy;
+                    vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y);
+                    vec2 finalRayDir = rayDir;
+
+                    if (mouseInfluence > 0.0) {
+                        vec2 mouseScreenPos = mousePos * iResolution.xy;
+                        vec2 mouseDirection = normalize(mouseScreenPos - rayPos);
+                        finalRayDir = normalize(mix(rayDir, mouseDirection, mouseInfluence));
+                    }
+
+                    vec4 rays1 = vec4(1.0) * rayStrength(rayPos, finalRayDir, coord, 36.2214, 21.11349, 1.5 * raysSpeed);
+                    vec4 rays2 = vec4(1.0) * rayStrength(rayPos, finalRayDir, coord, 22.3991, 18.0234, 1.1 * raysSpeed);
+                    vec4 fragColor = (rays1 * 0.7 + rays2 * 0.6) * 1.5;
+
+                    if (noiseAmount > 0.0) {
+                        float n = noise(coord * 0.01 + iTime * 0.1);
+                        fragColor.rgb *= (1.0 - noiseAmount + noiseAmount * n);
+                    }
+
+                    float brightness = 1.0 - (coord.y / iResolution.y);
+                    fragColor.x *= 0.1 + brightness * 0.8;
+                    fragColor.y *= 0.3 + brightness * 0.6;
+                    fragColor.z *= 0.5 + brightness * 0.5;
+
+                    if (saturation != 1.0) {
+                        float gray = dot(fragColor.rgb, vec3(0.299, 0.587, 0.114));
+                        fragColor.rgb = mix(vec3(gray), fragColor.rgb, saturation);
+                    }
+
+                    fragColor.rgb *= raysColor;
+                    fragColor.rgb *= intensity;
+
+                    float t = iTime;
+                    vec2 uvNorm = fragCoord / iResolution.xy;
+                    float dots = 0.0;
+                    dots += dotGlow(uvNorm, vec2(0.3 + 0.1 * sin(t), 0.4 + 0.1 * cos(t)), 0.04 + 0.01 * sin(t * 1.2));
+                    dots += dotGlow(uvNorm, vec2(0.7 + 0.08 * cos(t * 1.1), 0.6 + 0.09 * sin(t * 0.9)), 0.035 + 0.01 * cos(t * 1.3));
+                    dots += dotGlow(uvNorm, vec2(0.5 + 0.12 * sin(t * 0.7), 0.7 + 0.07 * cos(t * 1.5)), 0.03 + 0.01 * sin(t * 1.7));
+                    dots += dotGlow(uvNorm, vec2(0.4 + 0.09 * cos(t * 1.4), 0.3 + 0.08 * sin(t * 1.1)), 0.025 + 0.01 * cos(t * 1.9));
+                    dots += dotGlow(uvNorm, vec2(0.6 + 0.07 * sin(t * 1.6), 0.5 + 0.1 * cos(t * 1.2)), 0.03 + 0.01 * sin(t * 1.5));
+                    vec3 dotColor = vec3(1.0, 0.95, 0.8);
+                    fragColor.rgb += dots * dotColor * 0.7 * intensity;
+
+                    gl_FragColor = fragColor;
+                }
+            `;
+
+            material = new THREE.ShaderMaterial({
+                uniforms,
+                vertexShader,
+                fragmentShader,
+                transparent: true,
+                depthWrite: false,
+            });
+            mesh = new THREE.Mesh(geometry, material);
+            scene.add(mesh);
+            return { uniforms };
+        };
+
+        let uniforms;
+        setupRenderer();
+        ({ uniforms } = setupScene());
+
+        const updatePlacement = () => {
+            dpr = Math.min(window.devicePixelRatio, 2);
+            if (!mountRef.current) return;
+            const w = mountRef.current.clientWidth * dpr;
+            const h = mountRef.current.clientHeight * dpr;
+            renderer.setSize(mountRef.current.clientWidth, mountRef.current.clientHeight, false);
+            uniforms.iResolution.value.set(w, h);
+            const { anchor, dir } = getAnchorAndDir(w, h);
+            uniforms.rayPos.value.set(anchor[0], anchor[1]);
+            uniforms.rayDir.value.set(dir[0], dir[1]);
+        };
+        updatePlacement();
+        window.addEventListener("resize", updatePlacement);
+
+        const handleMouseMove = (e) => {
+            if (!mountRef.current) return;
+            const rect = mountRef.current.getBoundingClientRect();
+            const x = (e.clientX - rect.left) / rect.width;
+            const y = (e.clientY - rect.top) / rect.height;
+            mouseRef.current = { x, y };
+        };
+        window.addEventListener("mousemove", handleMouseMove);
+
+        const animate = (now) => {
+            uniforms.iTime.value = now * 0.001;
+            const smoothing = 0.92;
+            smoothMouseRef.current.x =
+                smoothMouseRef.current.x * smoothing + mouseRef.current.x * (1 - smoothing);
+            smoothMouseRef.current.y =
+                smoothMouseRef.current.y * smoothing + mouseRef.current.y * (1 - smoothing);
+            uniforms.mousePos.value.set(smoothMouseRef.current.x, smoothMouseRef.current.y);
+            renderer.render(scene, camera);
+            frameId = requestAnimationFrame(animate);
+        };
+        frameId = requestAnimationFrame(animate);
+
+        return () => {
+            if (frameId) cancelAnimationFrame(frameId);
+            window.removeEventListener("resize", updatePlacement);
+            window.removeEventListener("mousemove", handleMouseMove);
+            renderer.dispose();
+            if (mountRef.current && renderer.domElement.parentNode === mountRef.current) {
+                mountRef.current.removeChild(renderer.domElement);
+            }
+        };
+    }, [flareColor, intensity, animationSpeed]);
+
+    useEffect(() => {
+        if (!uniformsRef.current) return;
+        uniformsRef.current.raysColor.value.set(...hexToRgb(flareColor));
+        uniformsRef.current.raysSpeed.value = animationSpeed;
+        uniformsRef.current.intensity.value = intensity;
+    }, [flareColor, animationSpeed, intensity]);
+
+    return (
+        <div
+            ref={mountRef}
+            // Corrected the className and ensured overflow is hidden
+            className="pointer-events-none w-[135vw] overflow-hidden"
+            style={{
+                position: "absolute",
+                bottom: 0,
+                height: "100vh",
+                // Add these two lines to center the element horizontally
+                left: "50%",
+                transform: "translateX(-50%)",
+            }}
+        />
+    );
+};
+
+export default LensFlareBackground;

package/dist/ApexUI-Kit/templates/LuminousParticleOcean/LuminousParticleOcean.jsx

@@ -0,0 +1,155 @@
+import React, { useRef, useMemo } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+// Helper function to convert hex color to rgba for CSS
+function hexToRgba(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`; 
+}
+
+// Internal component to create and animate the flowing spheres
+function FlowingSpheres({ count, sep, color, pushStrength }) {
+    const instancedMeshRef = useRef();
+
+    // A dummy object to reuse for matrix calculations for performance
+    const dummy = useMemo(() => new THREE.Object3D(), []);
+
+    // Generate the initial positions and data for each instance
+    const particles = useMemo(() => {
+        const temp = [];
+        for (let xi = 0; xi < count; xi++) {
+            for (let zi = 0; zi < count; zi++) {
+                const x = sep * (xi - count / 2);
+                const z = sep * (zi - count / 2);
+                temp.push({ x, y: 0, z });
+            }
+        }
+        return temp;
+    }, [count, sep]);
+
+    // useFrame runs on every rendered frame
+    useFrame(({ clock, mouse }) => {
+        if (!instancedMeshRef.current) return;
+        const elapsedTime = clock.getElapsedTime();
+
+        // Map mouse position (-1 to 1) to the grid's world coordinates
+        const mouseXWorld = mouse.x * (count * sep / 4);
+        const mouseZWorld = -mouse.y * (count * sep / 4);
+
+        // Animate each sphere's y-position and update its matrix
+        particles.forEach((particle, i) => {
+            const { x, z } = particle;
+
+            // --- 1. Wave Animation ---
+            const timeFactor = Math.sin(elapsedTime * 0.5);
+            const wave1 = Math.sin(x * 0.15 + timeFactor * Math.PI);
+            const wave2 = Math.sin(z * 1 + timeFactor * Math.PI);
+            let y = (wave1 + wave2) * 7;
+
+            // --- 2. Mouse Movement Interaction ---
+            const dx = x - mouseXWorld;
+            const dz = z - mouseZWorld;
+            const distance = Math.sqrt(dx * dx + dz * dz);
+
+            const maxDist = 50; // The radius of the interaction effect
+
+            const pushFactor = Math.max(0, 1 - distance / maxDist);
+            const smoothPush = Math.pow(pushFactor, 3);
+
+            y -= smoothPush * pushStrength;
+
+            dummy.position.set(x, y, z);
+            dummy.updateMatrix();
+
+            instancedMeshRef.current.setMatrixAt(i, dummy.matrix);
+        });
+
+        instancedMeshRef.current.instanceMatrix.needsUpdate = true;
+    });
+
+    return (
+        <group rotation={[0, 0, 0]}>
+            <instancedMesh
+                ref={instancedMeshRef}
+                args={[null, null, count * count]}
+            >
+                <sphereGeometry args={[0.2, 19, 19]} />
+                <meshStandardMaterial
+                    color={color}
+                    emissive={color}
+                    emissiveIntensity={1.5}
+                    roughness={0.4}
+                    metalness={0.1}
+                />
+            </instancedMesh>
+        </group>
+    );
+}
+
+// The main component, now named LuminousParticleOcean
+// You can pass props to this component to customize the background
+const LuminousParticleOcean = ({
+    sphereCount = 100,
+    sphereColor = "#00aaff",
+    interactionStrength = 15,
+    separation = 4,
+    bgColor1 = "#010a2d",
+    bgColor2 = "#001133",
+    
+}) => {
+
+    const lightColorRgba = useMemo(() => hexToRgba(sphereColor, 0.5), [sphereColor]);
+
+    return (
+        <div
+            className="relative w-screen h-[60vh] lg:h-[80vh] overflow-hidden"
+            style={{
+                background: `linear-gradient(to bottom, ${bgColor1}, ${bgColor2})`
+            }}
+        >
+            {/* Sunlight Effect: Now uses the sphereColor prop */}
+            <div
+                className="absolute -top-10 left-0 w-full h-1/2 z-[999]"
+                style={{
+                    background: `radial-gradient(circle at top center, ${lightColorRgba} 0%, transparent 90%)`,
+                    filter: 'blur(40px)',
+                    pointerEvents: 'none',
+                }}
+            />
+
+            {/* Vignette Effect */}
+            <div
+                className="absolute inset-0"
+                style={{
+                    boxShadow: 'inset 0 0 150px rgba(0,0,0,0.7)',
+                    pointerEvents: 'none',
+                }}
+            />
+
+            <Canvas
+                camera={{ position: [0, 60, 150], fov: 55 }}
+            >
+                {/* Sunlight: Also uses the sphereColor prop */}
+                <pointLight
+                    color={sphereColor}
+                    intensity={4000}
+                    distance={300}
+                    position={[-150, 100, -100]}
+                />
+                <ambientLight intensity={0.2} />
+
+                {/* Render the animated flowing spheres component with the passed props */}
+                <FlowingSpheres
+                    count={sphereCount}
+                    sep={separation}
+                    color={sphereColor}
+                    pushStrength={interactionStrength}
+                />
+            </Canvas>
+        </div>
+    );
+}
+
+export default LuminousParticleOcean;