---
title: "Living Prizma Shader — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Effects. Premium procedural WebGL"
canonical: "https://framer.elliotli.dev/component/living-prizma-shader"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Living Prizma Shader

# Living Prizma Shader

Premium procedural WebGL

[View on Framer](https://framer.com/marketplace/components/living-prizma-shader/?via=elliot-li)

![Living Prizma Shader preview image 1](https://framer.elliotli.dev/og/component/living-prizma-shader/80c6fe0e33394ea9/1600x1059.jpg)

## Summary

Premium procedural WebGL

## Description

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/](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](mailto:karimsaif010@gmail.com)

**X:** [@Karim Saif](/community/creator/@karim-saif/)

## Rank history [How rankings work →](/terms#rankings)

-   All · #6741

## Details

- **Author**: Karim Saif
- **Published**: 2026-08-29
- **Updated**: 2026-08-29
- **Added**: 2026-08-29
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo