Chroma Shader

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.