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

A premium animated GLSL shader for Framer that creates flowing strands of colour, sculpted waves, and dynamic abstract motion. Chroma Shader transforms your canvas into an immersive visual field with layered lines, glowing gradients, and continuously evolving movement.

Choose from 10 curated colour palettes including Electric Iris, Arctic Tide, Solar Ember, Rose Voltage, Jade Current, Amber Silk, Glacier Silver, Coral Bloom, Ultraviolet, and Cobalt Paper. You can also create your own custom three-colour palette to match your brand or project.

Shape the visual with six unique wave styles, then adjust animation speed, zoom, rotation, position, line width, strand count, and rendering quality directly through Framer Property Controls. The interactive palette menu lets visitors switch between colour presets directly on the canvas.

Features

Premium animated GLSL shader
Flowing abstract colour strands
Six unique wave shapes
10 curated colour palettes
Interactive palette selector
Custom three-colour palettes
Adjustable speed, zoom, and rotation
Line width and strand controls
Low to Ultra quality settings
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

Why You’ll Love It

Chroma Shader adds a bold layer of movement and colour without distracting from your content. Its flowing strands can feel soft and atmospheric or energetic and expressive, depending on the selected shape, palette, and settings. With extensive controls and built-in performance handling, you can create a distinctive WebGL visual that fits almost any modern Framer project without writing any code.

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

5a:[["$","$L5d",null,{"post":{"id":"01a0aa0e-a96a-74c5-82fe-f802b14aca63","title":null,"body":"

Chroma Shader

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Chroma 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":"j6aztWnFzEefdkMGmZs9","resolved":true,"title":"Chroma Shader","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A premium animated GLSL shader for Framer that creates flowing strands of colour, sculpted waves, and dynamic abstract motion. Chroma Shader transforms your canvas into an immersive visual field with layered lines, glowing gradients, and continuously evolving movement."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from 10 curated colour palettes including Electric Iris, Arctic Tide, Solar Ember, Rose Voltage, Jade Current, Amber Silk, Glacier Silver, Coral Bloom, Ultraviolet, and Cobalt Paper. You can also create your own custom three-colour palette to match your brand or project."}]},{"type":"paragraph","content":[{"type":"text","text":"Shape the visual with six unique wave styles, then adjust animation speed, zoom, rotation, position, line width, strand count, and rendering quality directly through Framer Property Controls. The interactive palette menu lets visitors switch between colour presets 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 shader"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flowing abstract colour strands"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Six unique wave shapes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"10 curated colour palettes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive palette selector"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom three-colour palettes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable speed, zoom, and rotation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Line width and strand controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Low to Ultra quality settings"}]}]},{"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":"customHeading","content":[{"type":"text","text":"Why You’ll Love It"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Chroma Shader adds a bold layer of movement and colour without distracting from your content. Its flowing strands can feel soft and atmospheric or energetic and expressive, depending on the selected shape, palette, and settings. With extensive controls and built-in performance handling, you can create a distinctive WebGL visual that fits almost any modern Framer project 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":"Premium Animated Flowing Shader","slug":"chroma-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/01a0aa0e-8864-76b8-825e-36eceb3de85e.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-16T11:51:22.089Z","updatedAt":"2026-10-02T09:49:18.444Z","publishedAt":"2026-09-16T11:51:22.077Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://chromashader.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_xEqXiUc6cA65wCwtye2NSfVwdDQ4zIiHFfa3N2tIDs3","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"ZjKItV6uD7Vcb2yigATx","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-16T11:51:22.730Z","updatedAt":"2026-09-16T11:51:22.730Z","reported":false}}],"$L5f"]

Suggested for you