Glass Grid Sphere is a study in depth, light, and structured interaction. It moves beyond standard backgrounds by creating a multi-layered visual stack: a fluid GLSL noise background, a high-fidelity 3D sphere with custom rim-lighting, and an architectural "Frosted Glass" grid that acts as a physical barrier between the user and the scene.

Engineered with a custom Spring-Physics Engine, the sphere doesn't just "follow" the mouse—it reacts with weight, momentum, and bounciness. It feels like a physical object caught in a magnetic field, providing a tactile experience that demands user exploration.

✨ Key Highlights

• Multi-Layered Depth Stack: Features a unique visual sandwich: (1) Liquid GLSL background noise, (2) Interactive 3D Sphere, and (3) A CSS-grid driven frosted glass overlay. This creates a "parallax-through-glass" effect that is rare in no-code environments.

• Physics-Based Spring Motion: Built with an integrated spring-mass-damping algorithm. You can control the Snappiness and Bounciness of the sphere, making it feel like a heavy metal ball or a light, energetic bubble.

• Architectural Glass Grid: The overlay is a responsive CSS grid that frosts the scene behind it. Control the Grid Density, Frost Intensity (blur), and Line Opacity to match your brand’s architectural style.

• Custom Shader Lighting: The sphere features a proprietary fragment shader with three-tone gradient mapping, Rim Lighting for that "halo" edge, and high-gloss Specular Highlights that react to the 3D space.

• Organic Pulse Engine: The sphere contains a subtle vertex shader "pulse," making it breathe and evolve even when the user isn't interacting, ensuring the scene never feels static.

⚙️ Complete Design Control

• Background DNA: Define a three-color liquid noise gradient. Control the "Noise Flow" speed to create a calm ambient environment or a high-energy storm.

• Sphere Material: Full control over the Top, Mid, and Bottom colors of the 3D sphere. Dial in the colors to create anything from a "Cyber-Sun" to a "Minimalist Pearl."

• Grid & Frost: Adjust the number of grid columns and the intensity of the backdrop blur. Fine-tune the "Glass Frost" to hide or reveal the details of the 3D sphere behind the grid.

• Interaction Physics: Adjust the "Range" of motion and the spring properties. Create a sphere that tightly follows the cursor or one that swings wildly across the screen with high momentum.