About WebGL Orb Hero

Turn the first screen of your website into an experience.

WebGL Orb Hero combines bold editorial typography with a real-time interactive shader orb that responds smoothly to movement, creating a premium hero section for creative studios, AI products, SaaS brands, portfolios and modern landing pages.

✦ Three visual personalities

Switch instantly between:

Liquid Chrome — reflective, metallic and dimensional Soft Glass — subtle, luminous and atmospheric Electric Plasma — energetic, fluid and alive

Then customize the colors, distortion, detail, glow, lighting, animation speed and pointer response directly inside Framer.

✦ Interactive Playground

Enable the optional built-in playground and let visitors experiment with the orb themselves.

They can switch between Chrome, Glass and Plasma, then adjust Motion, Distortion and Pointer response in real time.

Turn the playground off whenever you want a cleaner production experience.

✦ Complete hero section

WebGL Orb Hero isn't just a visual effect.

Customize your eyebrow, headline, supporting copy, CTA, typography, colors, spacing, layout proportions and mobile arrangement from the Framer properties panel.

✦ Built for real websites

• Responsive desktop and mobile layout • Pointer-responsive WebGL animation • Automatically pauses when offscreen • Reduced-motion support • Static Canvas and export fallback • Graceful fallback when WebGL is unavailable • Adjustable rendering quality and DPR • No external 3D models or textures required • Keyboard-accessible interactive controls • Sensible default dimensions — drop it in and start designing

Create a hero that doesn't just introduce the page — it gives visitors something to experience.

Support: hello@bodilum.com