Luma Shader

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.