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:T90c,

A premium WebGL shader for Framer that creates fluid sculptural ribbons with luminous colour, soft reflections, and cinematic movement. Prism Shader transforms your canvas into an abstract 3D composition inspired by polished glass, liquid metal, and flowing light.

Choose from five curated palettes including Violet Current, Arctic Chrome, Rose Gold, Emerald Tide, and Solar Ember. Each palette combines three carefully selected colours to create rich gradients and reflective lighting across the animated forms.

Control the character of the scene directly through Framer Property Controls. Adjust liquid movement, folds, band width, twist, zoom, exposure, reflection, softness, animation speed, and rendering quality to create anything from subtle atmospheric visuals to bold, expressive hero backgrounds.

Features

Premium animated GLSL shader
Fluid 3D sculptural ribbons
Dynamic folds and liquid deformation
Five curated colour palettes
Interactive palette selector
Adjustable liquid, folds, and twist
Band width and zoom controls
Exposure and reflection controls
Performance, Balanced, and High quality modes
Fully customizable with Framer Property Controls, no code required

Use Cases

Hero backgrounds
Creative websites
Portfolio websites
Agency websites
Design studio websites
SaaS landing pages
Modern brand websites
Digital experiences
Product launches
Framer templates

Why You’ll Love It

Prism Shader brings a tactile, dimensional quality to your Framer projects with flowing forms that feel like illuminated glass or liquid sculpture. The combination of procedural deformation, reflective lighting, and curated colour palettes creates a premium visual without relying on static images or video. Fine-tune every major aspect of the animation and appearance to create a visual that fits your project perfectly, no code required.

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

5a:[["$","$L5d",null,{"post":{"id":"01a0aa17-e9ef-703d-b3ab-2f7b9f78f3a8","title":null,"body":"

Prism Shader

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Prism 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":"J73DTXo91tBcG2yBIavD","resolved":true,"title":"Prism Shader","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A premium WebGL shader for Framer that creates fluid sculptural ribbons with luminous colour, soft reflections, and cinematic movement. Prism Shader transforms your canvas into an abstract 3D composition inspired by polished glass, liquid metal, and flowing light."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from five curated palettes including Violet Current, Arctic Chrome, Rose Gold, Emerald Tide, and Solar Ember. Each palette combines three carefully selected colours to create rich gradients and reflective lighting across the animated forms."}]},{"type":"paragraph","content":[{"type":"text","text":"Control the character of the scene directly through Framer Property Controls. Adjust liquid movement, folds, band width, twist, zoom, exposure, reflection, softness, animation speed, and rendering quality to create anything from subtle atmospheric visuals to bold, expressive hero backgrounds."}]},{"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 shader"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fluid 3D sculptural ribbons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic folds and liquid deformation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Five curated colour palettes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive palette selector"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable liquid, folds, and twist"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Band width and zoom controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Exposure and reflection controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance, Balanced, and High quality modes"}]}]},{"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 studio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern brand websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer templates"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Why You’ll Love It"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Prism Shader brings a tactile, dimensional quality to your Framer projects with flowing forms that feel like illuminated glass or liquid sculpture. The combination of procedural deformation, reflective lighting, and curated colour palettes creates a premium visual without relying on static images or video. Fine-tune every major aspect of the animation and appearance to create a visual that fits your project perfectly, no code required."}]},{"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":"Sculptural WebGL Motion Shader","slug":"prism-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/01a0aa17-c45f-75ea-a5a1-f92f2cd43ec9.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":2400,"height":1800}}],"post":null,"createdAt":"2026-09-16T12:01:28.172Z","updatedAt":"2026-10-02T09:51:49.304Z","publishedAt":"2026-09-16T12:01:28.170Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://prismshader.framer.website/","price":"6","paymentUrl":"https://buy.polar.sh/polar_cl_KFRrivD1k3KiLBLg4wDSOZvTuB0RKLbC63qQr24NdOb","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"5B26rrYKkbYj6Ss91Wp7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T12:01:29.071Z","updatedAt":"2026-09-16T12:01:29.071Z","reported":false}}],"$L5f"]

Suggested for you