Skip to main content
Fluted glass image filter that transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity like looking through textured glass.

​
Features

  • Multiple grid patterns (lines, waves, zigzag, patterns)
  • Various distortion shapes (prism, lens, contour, cascade, flat)
  • Configurable shadows and highlights
  • One-directional blur effects
  • Edge softness control
  • Grain overlay options

​
Basic Usage

import { FlutedGlass } from '@paper-design/shaders-react';

function App() {
  return (
    <FlutedGlass
      image="/path/to/image.jpg"
      size={0.5}
      shape="lines"
      distortionShape="prism"
      distortion={0.5}
      angle={0}
      shadows={0.25}
      highlights={0.1}
      blur={0}
      edges={0.25}
    />
  );
}

​
Parameters

​
Visual Parameters

​
image
string | HTMLImageElement
required
Source image to apply the fluted glass effect to
​
colorBack
string
default:"'#00000000'"
Background color in hex, rgb, or rgba format
​
colorShadow
string
default:"'#000000'"
Shadow color for darker areas in hex, rgb, or rgba format
​
colorHighlight
string
default:"'#ffffff'"
Highlight color for lighter areas in hex, rgb, or rgba format
​
size
number
default:"0.5"
Size of the distortion shape grid
​
shape
'lines' | 'linesIrregular' | 'wave' | 'zigzag' | 'pattern'
default:"'lines'"
Grid shape pattern:
  • lines: Regular parallel lines
  • linesIrregular: Lines with irregular variations
  • wave: Wavy pattern
  • zigzag: Zigzag pattern
  • pattern: Complex sine pattern
​
distortionShape
'prism' | 'lens' | 'contour' | 'cascade' | 'flat'
default:"'prism'"
Shape of distortion within each stripe:
  • prism: Sharp prismatic distortion
  • lens: Lens-like curved distortion
  • contour: Contoured distortion with depth
  • cascade: Cascading wave distortion
  • flat: Minimal flat distortion
​
distortion
number
default:"0.5"
Power of distortion applied within each stripe
​
angle
number
default:"0"
Direction of the grid relative to the image in degrees
​
shadows
number
default:"0.25"
Color gradient added over image, following distortion shape
​
highlights
number
default:"0.1"
Thin strokes along distortion shape, useful for antialiasing
​
blur
number
default:"0"
One-directional blur over the image with extra blur around edges
​
edges
number
default:"0.25"
Glass distortion and softness on the image edges
​
shift
number
default:"0"
Texture shift in direction opposite to the grid
​
stretch
number
default:"0"
Extra distortion along the grid lines
​
margin
number
default:"0"
Distance from all edges to the effect (applies to all sides)
​
marginLeft
number
default:"0"
Distance from the left edge to the effect
​
marginRight
number
default:"0"
Distance from the right edge to the effect
​
marginTop
number
default:"0"
Distance from the top edge to the effect
​
marginBottom
number
default:"0"
Distance from the bottom edge to the effect
​
grainMixer
number
default:"0"
Strength of grain distortion applied to shape edges
​
grainOverlay
number
default:"0"
Post-processing black/white grain overlay

​
Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'cover'"
How to fit the shader into the canvas dimensions
​
scale
number
default:"1"
Overall zoom level of the graphics
​
rotation
number
default:"0"
Overall rotation angle in degrees
​
offsetX
number
default:"0"
Horizontal offset of the graphics center
​
offsetY
number
default:"0"
Vertical offset of the graphics center

​
Animation Parameters

​
speed
number
default:"0"
Animation speed multiplier (0 for static)
​
frame
number
default:"0"
Manual frame control for animation

​
Presets

The FlutedGlass shader comes with several built-in presets:
  • Default: Classic fluted glass with prism distortion
  • Abstract: Irregular lines with high blur and distortion
  • Waves: Wave pattern with stretch and contour distortion
  • Folds: Cascade distortion with margins
import { FlutedGlass, flutedGlassPresets } from '@paper-design/shaders-react';

function App() {
  return <FlutedGlass {...flutedGlassPresets[0].params} image="/image.jpg" />;
}

​
Examples

​
Wave Pattern

<FlutedGlass
  image="/image.jpg"
  size={0.9}
  shape="wave"
  distortionShape="contour"
  distortion={0.5}
  blur={0.1}
  edges={0.5}
  stretch={1}
  grainOverlay={0.05}
/>

​
Abstract Effect

<FlutedGlass
  image="/image.jpg"
  scale={4}
  size={0.7}
  shape="linesIrregular"
  distortionShape="flat"
  distortion={1}
  angle={30}
  blur={1}
  edges={0.5}
  stretch={1}
  grainMixer={0.1}
  grainOverlay={0.1}
/>

​
Subtle Folds

<FlutedGlass
  image="/image.jpg"
  size={0.4}
  shape="lines"
  distortionShape="cascade"
  distortion={0.75}
  shadows={0.4}
  blur={0.25}
  edges={0.5}
  margin={0.1}
/>

​
Technical Details

​
Shader Uniforms (Vanilla JS)

When using the vanilla JavaScript API: 
import { GlassGridShapes, GlassDistortionShapes } from '@paper-design/shaders';

{
  u_shape: GlassGridShapes.lines, // or 1
  u_distortionShape: GlassDistortionShapes.prism, // or 1
  u_colorBack: [r, g, b, a],
  u_colorShadow: [r, g, b, a],
  u_colorHighlight: [r, g, b, a],
  // ... other parameters
}

​
Grid Shapes

  • lines (1): Regular parallel lines
  • linesIrregular (2): Irregular line patterns
  • wave (3): Sine wave pattern
  • zigzag (4): Zigzag pattern
  • pattern (5): Complex 2D pattern

​
Distortion Shapes

  • prism (1): Sharp prismatic effect
  • lens (2): Curved lens effect
  • contour (3): Depth contour effect
  • cascade (4): Cascading waves
  • flat (5): Minimal distortion

​
Performance Notes

  • Static shader (no animation by default)
  • Blur parameter can impact performance at high values
  • Grain effects are relatively lightweight
  • Works best with high-resolution source images