Living Prizma Shader

Bring your Framer websites to life with Living Prizma a premium procedural WebGL terrain effect inspired by real-world elevation maps.

Animated contour lines continuously evolve across the surface, creating a cinematic sense of depth and movement. Move your cursor across the canvas to bend the terrain with a dynamic gravity-well effect, or click to send waves across the landscape.

Preview::https://livingprizmashaderbgwebgl.framer.website/

Great For

Living Topography is great for:

• Creative portfolios

• Product and agency websites

• Architecture and 3D websites

• Technology and AI landing pages

• Experimental and futuristic websites

• Hero sections

• Full-screen backgrounds

• Interactive storytelling

• Editorial and art-directed websites

• Premium Framer experiences

Features

• 🌐 Procedural WebGL2 terrain

• 🗺 Animated topographic contour lines

• ✨ Continuous terrain morphing

• 🖱 Interactive cursor gravity well

• 💥 Click-triggered expanding waves

• 🎨 Multiple built-in color presets

• 🌈 Custom primary, secondary, and background colors

• ⚫ Monochrome mode

• 🔍 Adjustable terrain zoom

• 🏔 Adjustable terrain depth

• 📐 Adjustable contour density

• 💡 Adjustable glow intensity

• ⚡ Adjustable animation speed

• 🌊 Adjustable wave speed, strength, and decay

• 🎯 Adjustable cursor radius and strength

• 📱 Responsive rendering

• 🚀 Quality control for performance

• 👁 Viewport-aware rendering

• ♻ WebGL context recovery

• 🖼 Static-renderer support for Framer

The component is designed to render efficiently by adapting its canvas resolution to the selected quality setting and pausing animation when it is outside the viewport.

Support

Need help setting up Living Topography or have a question about the component?

I'm happy to help.

Email: karimsaif010@gmail.com

X: @Karim Saif