A Shader is an animated fluted-glass effect: vertical ribs distort a moving field of light. Use it as a glass-like backdrop for a product presentation or a section transition. Tune flute width, refraction and speed in the editor, then compare the effect at the intended display size. Its default neutral palette lets the glass structure carry the composition. Keep strong text contrast when placing content above the bright and dark bands.
How this shader works
A Shader is an animated fluted-glass effect: vertical ribs distort a moving field of light, like reeded glass in front of a lamp. It works as a glass-like backdrop for a product presentation or a section transition. Flute width sets the ribs, Refraction sets how strongly they bend the light, and Speed / direction sets the motion. The Look section also has colour, framing and grain controls.
Tips
- Flute width sets the width of each rib. Wider ribs read as reeded glass, narrow ones as fine fluting.
- Refraction at 0 flattens the effect. Raise it for a stronger glass distortion.
- Rotation turns the ribs, for example to run horizontally.
- Keep strong text contrast over the bright and dark bands.
Questions
How do I make a fluted or reeded glass effect for a website?
Open A Shader and set Flute width and Refraction. Check it at the size it will be shown, then export it as an HTML file or a React or Svelte component.
Can I change the colours?
Yes. Ink, Graphite, Silver and White are editable, and Hue and Saturation shift the whole palette.
Preview and customize in the browser. Exports require membership.