3D Prism Sphere

3D Background Component

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.

3D Background Component