3D Prism Sphere

Transform your layouts with high-end, GPU-accelerated digital art. Prism Sphere is a lightweight, pure WebGL background component for Framer that renders a real 3D prism orb with realistic PBR glass materials. It dynamically shatters and recombines based on user scroll—with zero external libraries and zero performance lag.

🔥 KEY FEATURES:

• 1-Click Remix Ready: Copy the component straight into your project and go live in seconds.

• Scroll-Reactive Magic: Watch the triangular prisms explode smoothly on scroll and seamlessly merge back. Works perfectly on static pages too!

• Zero Dependencies: Raw WebGL code. No Three.js, no heavy iframes, no performance drops.

• Smart Performance: Built-in IntersectionObserver automatically pauses the animation when off-screen to save user battery and CPU.

• 29 Custom Properties: Total control over 3D depth, studio lighting, rotation speeds, roughness, and custom two-tone gradients directly from the Framer sidebar.

🎭 PRESETS INCLUDED: Instantly switch between 4 Styles (Hologram, Blueprint, Aurora, Custom) and 6 Materials (Glass, Metal, Chrome, Crystal, Matte, Neon Wire).

💡 PERFECT FOR: Premium B2B SaaS landing pages, AI startup portfolios, tech dashboards, and futuristic dark-mode web designs.