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

A premium WebGL shader component designed to bring flowing light, glowing waves, and atmospheric motion to your Framer projects. Luma Shader creates a cinematic visual background using custom GLSL rendering, layered gradients, and dynamic light patterns.

Choose from multiple built-in colour palettes including Violet Tide, Rose Ember, Jade Lagoon, Blue Hour, and Amber Silk, or create your own custom colour combination. Adjust animation speed, wave spread, thickness, glow intensity, camera position, background lighting, and rendering resolution directly through Framer Property Controls.

The shader runs with WebGL and automatically manages rendering based on visibility, reduced-motion preferences, browser tab visibility, and WebGL context changes for a smoother and more efficient experience.

Features

Premium animated GLSL shader
WebGL powered rendering
Flowing luminous wave effect
Multiple colour palettes
Custom colour controls
Violet, Rose, Jade, Blue, and Amber presets
Adjustable animation speed
Adjustable wave spread
Adjustable wave thickness
Custom glow intensity
Adjustable camera position
Background light control
Resolution control
Optional animation
Interactive palette selector
Responsive canvas rendering
Reduced-motion support
Visibility-aware rendering
WebGL context recovery

Use Cases

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

Why You’ll Love It

Luma Shader adds a sophisticated layer of motion and atmosphere to any Framer project. Its glowing wave visuals, curated palettes, and flexible controls make it easy to create a premium animated background without writing any code.

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

5a:[["$","$L5d",null,{"post":{"id":"01a0a9a0-06c4-7363-ad30-ef85a0f4e404","title":null,"body":"

Luma Shader

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Luma 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":"qbTB0b5UtPrjkJo7O2S4","resolved":true,"title":"Luma Shader","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A premium WebGL shader component designed to bring flowing light, glowing waves, and atmospheric motion to your Framer projects. Luma Shader creates a cinematic visual background using custom GLSL rendering, layered gradients, and dynamic light patterns."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from multiple built-in colour palettes including Violet Tide, Rose Ember, Jade Lagoon, Blue Hour, and Amber Silk, or create your own custom colour combination. Adjust animation speed, wave spread, thickness, glow intensity, camera position, background lighting, and rendering resolution directly through Framer Property Controls."}]},{"type":"paragraph","content":[{"type":"text","text":"The shader runs with WebGL and automatically manages rendering based on visibility, reduced-motion preferences, browser tab visibility, and WebGL context changes for a smoother and more efficient experience."}]},{"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":"WebGL powered rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flowing luminous wave effect"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple colour palettes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom colour controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Violet, Rose, Jade, Blue, and Amber presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable wave spread"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable wave thickness"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom glow intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable camera position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background light control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Resolution control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive palette selector"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive canvas rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visibility-aware rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGL context recovery"}]}]}]},{"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":"Agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital art projects"}]}]},{"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":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern brand websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive experiences"}]}]},{"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":"Luma Shader adds a sophisticated layer of motion and atmosphere to any Framer project. Its glowing wave visuals, curated palettes, and flexible controls make it easy to create a premium animated background 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":"Animated Luminous WebGL Shader","slug":"luma-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/01a0a99f-d754-7001-8b4b-13947a15b544.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2400,"height":1800}}],"post":null,"createdAt":"2026-09-16T09:50:31.370Z","updatedAt":"2026-10-02T09:36:26.556Z","publishedAt":"2026-09-16T09:50:31.366Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://lumashader.framer.website/","price":"6","paymentUrl":"https://buy.polar.sh/polar_cl_B8ERH9DlR4w3uFrowa1Pbaj02C8CerdWuwJGp2NMVc9","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"Dm7t3COL7McVMWHz1TzD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T09:50:32.132Z","updatedAt":"2026-09-16T09:50:32.132Z","reported":false}}],"$L5f"]

Suggested for you