5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T955,

A premium WebGL terrain shader for Framer that creates an immersive journey through glowing procedural landscapes. Ridge Flow Shader combines dynamic terrain, atmospheric depth, flowing colour, and cinematic movement to create a constantly evolving 3D environment for your website.

Choose from five curated colourways including Lagoon, Solstice, Verdant, Amethyst, and Frostbite, or create your own custom four-colour palette. Adjust flight speed, altitude, pitch, brightness, terrain scale, height, roughness, ground level, and rendering resolution directly through Framer Property Controls.

Powered by custom GLSL rendering and procedural noise, Ridge Flow Shader generates an animated terrain field with layered ridges, shifting light, atmospheric depth, and smooth forward motion. The interactive colourway picker lets visitors switch between visual themes directly on the canvas.

Features

Premium animated GLSL terrain shader
Procedural 3D landscape generation
Cinematic forward flight animation
Five curated colourways
Custom four-colour palettes
Interactive colourway picker
Adjustable flight speed, altitude, and pitch
Terrain scale, height, and roughness controls
Dynamic lighting and glow controls
Fully customizable with Framer Property Controls, no code required

Use Cases

Hero backgrounds
Creative websites
Portfolio websites
Agency websites
Design studios
Digital art projects
Technology websites
Product launches
Immersive landing pages
Experimental web experiences

Why You’ll Love It

Ridge Flow Shader turns your Framer canvas into a cinematic landscape that feels alive. Procedurally generated ridges move continuously beneath the viewer while shifting colour and atmospheric lighting create a sense of depth and motion. With custom terrain, flight, lighting, and colour controls, you can create anything from subtle atmospheric scenes to bold futuristic landscapes without writing any code.

Original work by Sabo Sugi, used, developed, and commercially sold with full permission.

5a:[["$","$L5d",null,{"post":{"id":"01a0a9cc-9c7a-75c3-9255-944164e60818","title":null,"body":"

Ridge Flow Shader

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Ridge Flow Shader"}]}]},"author":{"framerUserId":"ca05e506-1465-479c-9098-193c2ad13a2b","name":"Design Foundry","slug":"designfoundry","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ca05e506-1465-479c-9098-193c2ad13a2b/xcfk0umu","followed":false,"followsYou":false},"media":[],"resources":[{"id":"yHzUnOP0wTsPYrhrecvy","resolved":true,"title":"Ridge Flow Shader","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A premium WebGL terrain shader for Framer that creates an immersive journey through glowing procedural landscapes. Ridge Flow Shader combines dynamic terrain, atmospheric depth, flowing colour, and cinematic movement to create a constantly evolving 3D environment for your website."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from five curated colourways including Lagoon, Solstice, Verdant, Amethyst, and Frostbite, or create your own custom four-colour palette. Adjust flight speed, altitude, pitch, brightness, terrain scale, height, roughness, ground level, and rendering resolution directly through Framer Property Controls."}]},{"type":"paragraph","content":[{"type":"text","text":"Powered by custom GLSL rendering and procedural noise, Ridge Flow Shader generates an animated terrain field with layered ridges, shifting light, atmospheric depth, and smooth forward motion. The interactive colourway picker lets visitors switch between visual themes directly on the canvas."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium animated GLSL terrain shader"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Procedural 3D landscape generation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cinematic forward flight animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Five curated colourways"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom four-colour palettes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive colourway picker"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable flight speed, altitude, and pitch"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Terrain scale, height, and roughness controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic lighting and glow controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable with Framer Property Controls, no code required"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design studios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital art projects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Technology websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Immersive landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental web experiences"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Why You’ll Love It"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Ridge Flow Shader turns your Framer canvas into a cinematic landscape that feels alive. Procedurally generated ridges move continuously beneath the viewer while shifting colour and atmospheric lighting create a sense of depth and motion. With custom terrain, flight, lighting, and colour controls, you can create anything from subtle atmospheric scenes to bold futuristic landscapes without writing any code."}]},{"type":"paragraph","content":[{"type":"text","text":"Original work by "},{"type":"text","text":"Sabo Sugi","marks":[{"type":"bold"}]},{"type":"text","text":", used, developed, and commercially sold with full permission."}]}]},"introduction":"Glowing Landscape Ridge Gradient","slug":"ridge-flow-shader","author":{"framerUserId":"ca05e506-1465-479c-9098-193c2ad13a2b","name":"Design Foundry","slug":"designfoundry","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ca05e506-1465-479c-9098-193c2ad13a2b/xcfk0umu","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ca05e506-1465-479c-9098-193c2ad13a2b/01a0a9cc-7dac-71cd-bac7-791f45a1630c.png","metadata":{"tint":{"h":234,"s":78,"l":30},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-16T10:39:13.341Z","updatedAt":"2026-10-02T09:46:37.868Z","publishedAt":"2026-09-16T10:39:13.332Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://ridgeflowshader.framer.website/","price":"6","paymentUrl":"https://buy.polar.sh/polar_cl_socFvFLY8wM4z0cSgyiLQIIvQif6rDRuBm0cG2srPag","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"qk9lDa5NQMJuzC9PJAos","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T10:39:14.042Z","updatedAt":"2026-09-16T10:39:14.042Z","reported":false}}],"$L5f"]

Suggested for you