nucleus-core-ts 0.9.751 → 0.9.753

package/dist/fe/components/AbstractAnimatedBackground/index.d.ts

@@ -1,6 +1,32 @@
-import type { ReactElement } from 'react';
-type AbstractAnimatedBackgroundProps = {
+import { type ReactElement } from 'react';
+/**
+ * A GPU-cheap animated FOG background for auth / landing screens — a single full-screen WebGL
+ * fragment shader (Vanta-FOG-style domain-warped fractal noise). It replaces the previous
+ * three.js / @react-three/fiber "marble" implementation, which paid heavy React-reconciliation +
+ * multi-mesh overhead; this version runs one draw call per frame at a capped device-pixel-ratio, so
+ * it holds 60fps far more cheaply.
+ *
+ * Backward compatible: the only previously-supported prop was `className`, and the default colors keep
+ * the old indigo→blue→purple→pink feel, so existing `<AbstractAnimatedBackground className="…" />`
+ * call-sites render unchanged. Every visual is now customizable via the optional props below.
+ */
+export type AbstractAnimatedBackgroundProps = {
     className?: string;
+    /** Darkest fog color (background). Hex, e.g. "#0b1020". */
+    baseColor?: string;
+    /** Low-midtone fog color. */
+    lowlightColor?: string;
+    /** Mid fog color. */
+    midtoneColor?: string;
+    /** Brightest fog wisps. */
+    highlightColor?: string;
+    /** Animation speed multiplier (0 = frozen). Default 0.7. */
+    speed?: number;
+    /** Fog scale — larger = more zoomed-in / bigger cloud shapes. Default 1.0. */
+    zoom?: number;
+    /** Softness of the highlight wisps, 0-1 (higher = softer). Default 0.6. */
+    blur?: number;
+    /** Cap the render device-pixel-ratio (fog is soft, so 1–1.5 looks identical and is much cheaper). Default 1.5. */
+    maxDpr?: number;
 };
-export declare function AbstractAnimatedBackground({ className, }: AbstractAnimatedBackgroundProps): ReactElement;
-export {};
+export declare function AbstractAnimatedBackground(props: AbstractAnimatedBackgroundProps): ReactElement;

package/dist/fe/components/AbstractAnimatedBackground/index.js

@@ -1,437 +1,214 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Canvas, useFrame } from '@react-three/fiber';
-import { Suspense, useRef } from 'react';
-import { DoubleSide, ShaderMaterial, Vector2 } from 'three';
-const BUBBLE_SPECS = [
-    {
-        size: 32,
-        left: '12%',
-        top: '18%',
-        delay: '0s',
-        duration: '8s',
-        opacity: 0.55
-    },
-    {
-        size: 20,
-        left: '28%',
-        top: '72%',
-        delay: '2s',
-        duration: '7s',
-        opacity: 0.4
-    },
-    {
-        size: 26,
-        left: '46%',
-        top: '36%',
-        delay: '1s',
-        duration: '6.5s',
-        opacity: 0.48
-    },
-    {
-        size: 18,
-        left: '64%',
-        top: '58%',
-        delay: '3s',
-        duration: '7.4s',
-        opacity: 0.35
-    },
-    {
-        size: 24,
-        left: '78%',
-        top: '28%',
-        delay: '1.8s',
-        duration: '8.5s',
-        opacity: 0.5
-    },
-    {
-        size: 16,
-        left: '86%',
-        top: '62%',
-        delay: '4.1s',
-        duration: '6.8s',
-        opacity: 0.38
-    },
-    {
-        size: 28,
-        left: '32%',
-        top: '52%',
-        delay: '2.6s',
-        duration: '7.2s',
-        opacity: 0.44
-    },
-    {
-        size: 14,
-        left: '58%',
-        top: '22%',
-        delay: '0.8s',
-        duration: '6.2s',
-        opacity: 0.32
-    }
-];
-const MARBLE_VERTEX_SHADER = /* glsl */ `
-  varying vec2 vUv;
-  void main() {
-    vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-  }
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+const DEFAULTS = {
+    baseColor: '#0b1020',
+    lowlightColor: '#3b4fd6',
+    midtoneColor: '#8b5cf6',
+    highlightColor: '#ec4899',
+    speed: 0.7,
+    zoom: 1.0,
+    blur: 0.6,
+    maxDpr: 1.5
+};
+const VERTEX_SHADER = /* glsl */ `
+attribute vec2 a_pos;
+varying vec2 vUv;
+void main() { vUv = a_pos * 0.5 + 0.5; gl_Position = vec4(a_pos, 0.0, 1.0); }
 `;
-const MARBLE_FRAGMENT_SHADER = /* glsl */ `
-  precision highp float;
-
-  varying vec2 vUv;
-
-  uniform float uTime;
-  uniform vec2 uPointer;
-  uniform float uBaseShift;
-  uniform float uAccentShift;
-  uniform float uFlashIntensity;
-
-  float hash(vec2 p) {
-    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
-  }
-
-  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;
-  }
-
-  float fbm(vec2 p) {
-    float total = 0.0;
-    float amplitude = 0.5;
-    for (int i = 0; i < 5; i++) {
-      total += noise(p) * amplitude;
-      p *= 2.0;
-      amplitude *= 0.5;
-    }
-    return total;
-  }
-
-  vec3 palette(float t, float timeShift) {
-    float cycle = sin(timeShift * 0.08) * 0.5 + 0.5;
-    
-    vec3 blue = vec3(0.345, 0.486, 0.968);
-    vec3 purple = vec3(0.639, 0.451, 0.937);
-    vec3 pink = vec3(0.925, 0.337, 0.745);
-    vec3 teal = vec3(0.2, 0.8, 0.7);
-    vec3 orange = vec3(0.95, 0.6, 0.25);
-    vec3 whiteHighlight = vec3(0.98, 0.96, 0.99);
-    
-    vec3 primaryA = mix(blue, teal, cycle);
-    vec3 primaryB = mix(purple, orange, cycle);
-    vec3 accentA = mix(pink, vec3(0.4, 0.9, 0.6), cycle);
-    vec3 accentB = mix(whiteHighlight, vec3(1.0, 0.9, 0.7), cycle);
-    
-    vec3 base = mix(primaryA, primaryB, smoothstep(0.2, 0.8, t));
-    vec3 accent = mix(accentA, accentB, smoothstep(0.5, 1.0, t));
-    return mix(base, accent, 0.45 + 0.35 * sin(t * 3.14159));
-  }
-
-  void main() {
-    vec2 uv = vUv * 2.6 - 1.3;
-    vec2 flowUv = uv;
-    flowUv.x += uPointer.x * 0.18;
-    flowUv.y += uPointer.y * 0.12;
-
-    float t = uTime * 0.12;
-    float basePattern = fbm(flowUv * 2.6 + t);
-    float swirl = fbm(vec2(flowUv.y + basePattern * 0.6 + t * 0.5, flowUv.x + t));
-    float marble = sin((flowUv.x + swirl * 1.6) * 6.0 + basePattern * 2.4 + t * 2.4);
-    float accent = fbm(flowUv * 4.2 + uBaseShift + t * 1.2);
-    float highlight = smoothstep(0.55, 0.9, fbm(flowUv * 6.0 + uAccentShift + t * 0.8));
-
-    float finalPattern = (marble * 0.35 + basePattern * 0.4 + accent * 0.25);
-    finalPattern = 0.5 + 0.5 * finalPattern;
-    vec3 color = palette(finalPattern, uTime);
-
-    float depth = smoothstep(0.0, 0.6, basePattern) * 0.4;
-    float sheen = highlight * 0.6;
-
-    color += vec3(0.08, 0.06, 0.12) * depth;
-    color += vec3(0.25, 0.28, 0.35) * sheen;
+const FRAGMENT_SHADER = /* glsl */ `
+precision highp float;
+varying vec2 vUv;
+uniform float u_time;
+uniform vec2 u_res;
+uniform vec3 u_base, u_low, u_mid, u_high;
+uniform float u_speed, u_zoom, u_blur;
 
-    color += vec3(0.82, 0.86, 1.0) * uFlashIntensity * 0.15;
-
-    gl_FragColor = vec4(color, 0.95 + uFlashIntensity * 0.012);
-  }
-`;
-function combineClassNames(baseClassName, extraClassName) {
-    if (!extraClassName) {
-        return baseClassName;
-    }
-    return `${baseClassName} ${extraClassName}`;
+float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); }
+float noise(vec2 p) {
+  vec2 i = floor(p), f = fract(p);
+  float a = hash(i), b = hash(i + vec2(1.0, 0.0)), c = hash(i + vec2(0.0, 1.0)), 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;
 }
-function useMarbleMaterial() {
-    const materialRef = useRef(null);
-    const uniforms = {
-        uTime: {
-            value: 0
-        },
-        uPointer: {
-            value: new Vector2(0, 0)
-        },
-        uBaseShift: {
-            value: Math.random() * 10
-        },
-        uAccentShift: {
-            value: Math.random() * 20
-        },
-        uFlashIntensity: {
-            value: 0
-        }
-    };
-    function handleFrame(state, delta) {
-        if (!materialRef.current) {
-            return;
-        }
-        uniforms.uTime.value += delta;
-        uniforms.uPointer.value.set(state.pointer.x, state.pointer.y);
-        const { uniforms: activeUniforms } = materialRef.current;
-        if (activeUniforms.uTime) {
-            activeUniforms.uTime.value = uniforms.uTime.value;
-        }
-        if (activeUniforms.uPointer) {
-            activeUniforms.uPointer.value.copy(uniforms.uPointer.value);
-        }
-        if (activeUniforms.uFlashIntensity) {
-            activeUniforms.uFlashIntensity.value = uniforms.uFlashIntensity.value;
-        }
-    }
-    useFrame(handleFrame);
-    if (materialRef.current === null) {
-        materialRef.current = new ShaderMaterial({
-            vertexShader: MARBLE_VERTEX_SHADER,
-            fragmentShader: MARBLE_FRAGMENT_SHADER,
-            transparent: true,
-            depthWrite: false,
-            side: DoubleSide,
-            uniforms: {
-                uTime: uniforms.uTime,
-                uPointer: uniforms.uPointer,
-                uBaseShift: uniforms.uBaseShift,
-                uAccentShift: uniforms.uAccentShift,
-                uFlashIntensity: uniforms.uFlashIntensity
-            }
-        });
-        materialRef.current.needsUpdate = true;
-    }
-    return materialRef;
+float fbm(vec2 p) {
+  float v = 0.0, a = 0.5;
+  for (int i = 0; i < 6; i++) { v += a * noise(p); p = p * 2.0 + vec2(3.1, 1.7); a *= 0.5; }
+  return v;
 }
-function MarblePlane({ lightningValue }) {
-    const materialRef = useMarbleMaterial();
-    const meshRef = useRef(null);
-    function handleFrame(state, delta) {
-        if (!meshRef.current) {
-            return;
-        }
-        if (materialRef.current?.uniforms.uFlashIntensity) {
-            materialRef.current.uniforms.uFlashIntensity.value = lightningValue.current;
-        }
-        meshRef.current.rotation.z += delta * 0.02;
-        meshRef.current.position.x = state.pointer.x * 0.08;
-        meshRef.current.position.y = state.pointer.y * 0.04;
-        const scalePulse = 1.04 + Math.sin(state.clock.elapsedTime * 0.45) * 0.02;
-        meshRef.current.scale.set(scalePulse, scalePulse, scalePulse);
+void main() {
+  float aspect = u_res.x / max(u_res.y, 1.0);
+  vec2 p = (vUv - 0.5); p.x *= aspect; p /= max(u_zoom, 0.05);
+  float t = u_time * u_speed;
+  vec2 q = vec2(fbm(p + vec2(0.0, t * 0.15)), fbm(p + vec2(5.2, t * 0.13)));
+  vec2 r = vec2(fbm(p + 2.0 * q + vec2(1.7, 9.2) + t * 0.10), fbm(p + 2.0 * q + vec2(8.3, 2.8) - t * 0.12));
+  float f = clamp(fbm(p + 2.0 * r + t * 0.05) * 1.12, 0.0, 1.0);
+  vec3 col = u_base;
+  col = mix(col, u_low, smoothstep(0.15, 0.50, f));
+  col = mix(col, u_mid, smoothstep(0.40, 0.75, f));
+  col = mix(col, u_high, smoothstep(0.70, 0.96, f + length(r) * (1.0 - clamp(u_blur, 0.0, 1.0)) * 0.30));
+  gl_FragColor = vec4(col, 1.0);
+}
+`;
+function hexToRgb(hex) {
+    const normalized = hex.replace('#', '');
+    const value = Number.parseInt(normalized.length === 3 ? normalized.split('').map((c)=>c + c).join('') : normalized, 16);
+    if (!Number.isFinite(value)) return [
+        0,
+        0,
+        0
+    ];
+    return [
+        (value >> 16 & 255) / 255,
+        (value >> 8 & 255) / 255,
+        (value & 255) / 255
+    ];
+}
+function compile(gl, type, src) {
+    const shader = gl.createShader(type);
+    if (!shader) return null;
+    gl.shaderSource(shader, src);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        gl.deleteShader(shader);
+        return null;
     }
-    useFrame(handleFrame);
-    return /*#__PURE__*/ _jsxs("mesh", {
-        ref: meshRef,
-        position: [
-            0,
-            0,
-            0
-        ],
-        children: [
-            /*#__PURE__*/ _jsx("planeGeometry", {
-                args: [
-                    4.4,
-                    3.2,
-                    64,
-                    64
-                ]
-            }),
-            /*#__PURE__*/ _jsx("primitive", {
-                object: materialRef.current,
-                attach: "material"
-            })
-        ]
-    });
+    return shader;
 }
-function FlowHalo({ lightningValue }) {
-    const materialRef = useRef(null);
-    const meshRef = useRef(null);
-    if (materialRef.current === null) {
-        const radialShader = new ShaderMaterial({
-            vertexShader: MARBLE_VERTEX_SHADER,
-            fragmentShader: /* glsl */ `
-        precision mediump float;
-        varying vec2 vUv;
-        uniform float uTime;
-        uniform float uFlash;
-        void main() {
-          vec2 uv = vUv - 0.5;
-          float radius = length(uv);
-          float angle = atan(uv.y, uv.x);
-          float glow = smoothstep(0.45, 0.05, radius);
-          float ripple = sin(angle * 6.0 + uTime * 1.5) * 0.12;
-          float highlight = smoothstep(0.25 + ripple, 0.12, radius);
-          vec3 inner = vec3(0.32, 0.45, 0.98);
-          vec3 outer = vec3(0.93, 0.48, 0.78);
-          vec3 color = mix(outer, inner, glow);
-          color += highlight * 0.28 + vec3(0.82, 0.88, 1.0) * uFlash * 0.22;
-          gl_FragColor = vec4(color, glow * (0.48 + uFlash * 0.12));
+export function AbstractAnimatedBackground(props) {
+    const { className } = props;
+    const canvasRef = useRef(null);
+    // Resolve config here so the effect deps capture value changes and re-init the uniforms.
+    const baseColor = props.baseColor ?? DEFAULTS.baseColor;
+    const lowlightColor = props.lowlightColor ?? DEFAULTS.lowlightColor;
+    const midtoneColor = props.midtoneColor ?? DEFAULTS.midtoneColor;
+    const highlightColor = props.highlightColor ?? DEFAULTS.highlightColor;
+    const speed = props.speed ?? DEFAULTS.speed;
+    const zoom = props.zoom ?? DEFAULTS.zoom;
+    const blur = props.blur ?? DEFAULTS.blur;
+    const maxDpr = props.maxDpr ?? DEFAULTS.maxDpr;
+    useEffect(()=>{
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const gl = canvas.getContext('webgl', {
+            antialias: false,
+            alpha: true,
+            premultipliedAlpha: false
+        }) ?? canvas.getContext('experimental-webgl');
+        if (!gl) return; // No WebGL → the CSS gradient fallback (rendered below) remains visible.
+        const program = gl.createProgram();
+        const vs = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+        const fs = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+        if (!program || !vs || !fs) return;
+        gl.attachShader(program, vs);
+        gl.attachShader(program, fs);
+        gl.linkProgram(program);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
+        gl.useProgram(program);
+        const buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        // One oversized triangle covering the clip space — a fullscreen draw with no index buffer.
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+            -1,
+            -1,
+            3,
+            -1,
+            -1,
+            3
+        ]), gl.STATIC_DRAW);
+        const posLoc = gl.getAttribLocation(program, 'a_pos');
+        gl.enableVertexAttribArray(posLoc);
+        gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+        const u = (name)=>gl.getUniformLocation(program, name);
+        gl.uniform3fv(u('u_base'), hexToRgb(baseColor));
+        gl.uniform3fv(u('u_low'), hexToRgb(lowlightColor));
+        gl.uniform3fv(u('u_mid'), hexToRgb(midtoneColor));
+        gl.uniform3fv(u('u_high'), hexToRgb(highlightColor));
+        gl.uniform1f(u('u_speed'), speed);
+        gl.uniform1f(u('u_zoom'), zoom);
+        gl.uniform1f(u('u_blur'), blur);
+        const timeLoc = u('u_time');
+        const resLoc = u('u_res');
+        const dpr = Math.min(typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1, maxDpr);
+        const resize = ()=>{
+            const w = Math.max(1, Math.floor(canvas.clientWidth * dpr));
+            const h = Math.max(1, Math.floor(canvas.clientHeight * dpr));
+            if (canvas.width !== w || canvas.height !== h) {
+                canvas.width = w;
+                canvas.height = h;
+                gl.viewport(0, 0, w, h);
+            }
+            gl.uniform2f(resLoc, canvas.width, canvas.height);
+        };
+        const resizeObserver = new ResizeObserver(resize);
+        resizeObserver.observe(canvas);
+        resize();
+        const reduceMotion = typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
+        let raf = 0;
+        let visible = true;
+        const start = performance.now();
+        const draw = (now)=>{
+            gl.uniform1f(timeLoc, (now - start) / 1000);
+            gl.drawArrays(gl.TRIANGLES, 0, 3);
+        };
+        const loop = (now)=>{
+            draw(now);
+            raf = requestAnimationFrame(loop);
+        };
+        if (reduceMotion) {
+            // Respect reduced-motion: render one static frame, no animation loop.
+            draw(start);
+        } else {
+            raf = requestAnimationFrame(loop);
         }
-      `,
-            uniforms: {
-                uTime: {
-                    value: 0
-                },
-                uFlash: {
-                    value: 0
-                }
-            },
-            transparent: true,
-            depthWrite: false
+        // Pause the loop while off-screen (scrolled away / tab hidden) to save GPU.
+        const io = new IntersectionObserver((entries)=>{
+            const nowVisible = entries[0]?.isIntersecting ?? true;
+            if (nowVisible === visible) return;
+            visible = nowVisible;
+            if (reduceMotion) return;
+            if (visible && raf === 0) raf = requestAnimationFrame(loop);
+            else if (!visible && raf !== 0) {
+                cancelAnimationFrame(raf);
+                raf = 0;
+            }
         });
-        materialRef.current = radialShader;
-    }
-    function handleFrame(state, delta) {
-        if (!materialRef.current || !meshRef.current) {
-            return;
-        }
-        if (materialRef.current.uniforms.uTime) {
-            materialRef.current.uniforms.uTime.value += delta;
-        }
-        if (materialRef.current.uniforms.uFlash) {
-            materialRef.current.uniforms.uFlash.value = lightningValue.current;
-        }
-        meshRef.current.rotation.z += delta * 0.08;
-        meshRef.current.position.x = state.pointer.x * 0.05;
-        meshRef.current.position.y = state.pointer.y * 0.03;
-    }
-    useFrame(handleFrame);
-    return /*#__PURE__*/ _jsxs("mesh", {
-        ref: meshRef,
-        position: [
-            0,
-            0,
-            -0.4
-        ],
-        children: [
-            /*#__PURE__*/ _jsx("planeGeometry", {
-                args: [
-                    5.4,
-                    3.8,
-                    2,
-                    2
-                ]
-            }),
-            /*#__PURE__*/ _jsx("primitive", {
-                object: materialRef.current,
-                attach: "material"
-            })
-        ]
-    });
-}
-function MarbleScene({ lightningValue }) {
-    return /*#__PURE__*/ _jsxs("group", {
-        children: [
-            /*#__PURE__*/ _jsx(MarblePlane, {
-                lightningValue: lightningValue
-            }),
-            /*#__PURE__*/ _jsx(FlowHalo, {
-                lightningValue: lightningValue
-            })
-        ]
-    });
-}
-function BubbleOverlay() {
+        io.observe(canvas);
+        return ()=>{
+            if (raf !== 0) cancelAnimationFrame(raf);
+            resizeObserver.disconnect();
+            io.disconnect();
+            gl.deleteBuffer(buffer);
+            gl.deleteProgram(program);
+            gl.deleteShader(vs);
+            gl.deleteShader(fs);
+            gl.getExtension('WEBGL_lose_context')?.loseContext();
+        };
+    }, [
+        baseColor,
+        lowlightColor,
+        midtoneColor,
+        highlightColor,
+        speed,
+        zoom,
+        blur,
+        maxDpr
+    ]);
+    const rootClassName = className ? `absolute inset-0 overflow-hidden ${className}` : 'absolute inset-0 overflow-hidden';
     return /*#__PURE__*/ _jsx("div", {
-        className: "absolute inset-0 pointer-events-none",
-        children: BUBBLE_SPECS.map(function renderBubble(spec, index) {
-            return /*#__PURE__*/ _jsx("span", {
-                className: "marble-bubble",
-                style: {
-                    width: `${spec.size}px`,
-                    height: `${spec.size}px`,
-                    left: spec.left,
-                    top: spec.top,
-                    animationDelay: spec.delay,
-                    animationDuration: spec.duration,
-                    opacity: spec.opacity
-                }
-            }, `bubble-${index}`);
-        })
-    });
-}
-export function AbstractAnimatedBackground({ className }) {
-    const baseClassName = 'absolute inset-0 overflow-hidden';
-    const rootClassName = combineClassNames(baseClassName, className);
-    const lightningValue = useRef(0);
-    return /*#__PURE__*/ _jsxs("div", {
         className: rootClassName,
         style: {
-            backgroundColor: 'transparent'
+            // CSS gradient fallback for no-WebGL / SSR-first-paint — the canvas paints over it.
+            background: `linear-gradient(135deg, ${baseColor}, ${lowlightColor} 45%, ${midtoneColor} 75%, ${highlightColor})`
         },
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: "marble-base-gradient"
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "marble-secondary-gradient"
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "marble-overlay-gradient"
-            }),
-            /*#__PURE__*/ _jsx(Suspense, {
-                fallback: null,
-                children: /*#__PURE__*/ _jsx(Canvas, {
-                    className: "marble-canvas",
-                    dpr: [
-                        1,
-                        1.5
-                    ],
-                    gl: {
-                        antialias: true,
-                        alpha: true
-                    },
-                    camera: {
-                        position: [
-                            0,
-                            0,
-                            2.5
-                        ],
-                        fov: 45
-                    },
-                    style: {
-                        position: 'absolute',
-                        top: '50%',
-                        left: '50%',
-                        width: '150%',
-                        height: '150%',
-                        transform: 'translate(-50%, -50%)'
-                    },
-                    children: /*#__PURE__*/ _jsx(MarbleScene, {
-                        lightningValue: lightningValue
-                    })
-                })
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "marble-swirl"
-            }),
-            /*#__PURE__*/ _jsx(BubbleOverlay, {}),
-            /*#__PURE__*/ _jsx("div", {
-                className: "marble-highlight"
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "marble-glass"
-            })
-        ]
+        children: /*#__PURE__*/ _jsx("canvas", {
+            ref: canvasRef,
+            style: {
+                display: 'block',
+                width: '100%',
+                height: '100%'
+            },
+            "aria-hidden": "true"
+        })
     });
 }