fluted glass
An image filter that streaks the source image into ribbed, prismatic distortions — somewhere between a privacy panel and a beam splitter.
Preview
live Click the preview to load a random sample image. Install
npm npm i @devmischief/shaders-svelte Code
import { FlutedGlass } from '@devmischief/shaders-svelte';
<FlutedGlass
width={1280}
height={720}
image="/assets/flowers.webp"
colorBack="#00000000"
colorShadow="#000000"
colorHighlight="#ffffff"
shadows={0.25}
highlights={0.1}
size={0.5}
shape="lines"
angle={0}
distortionShape="prism"
distortion={0.5}
shift={0}
stretch={0}
blur={0}
edges={0.25}
margin={0}
grainMixer={0}
grainOverlay={0}
scale={1}
rotation={0}
offsetX={0}
offsetY={0}
fit="cover"
/>
Shader Props
19 | name | description | type | values |
|---|
| image | Source image filtered by the fluted-glass effect. | string | url |
| colorBack | Background color visible through transparent regions. | string | hex / rgba |
| colorShadow | Shadow color blended along the distortion shape. | string | hex / rgb |
| colorHighlight | Highlight color picked out along grid edges. | string | hex / rgb |
| shadows | Strength of the shadow gradient over the image. | number | 0 → 1 |
| highlights | Strength of the bright strokes along grid edges. | number | 0 → 1 |
| size | Size of the distortion grid cells. | number | 0 → 1 |
| shape | Grid pattern that drives the distortion. | string | lines · linesIrregular · wave · zigzag · pattern |
| angle | Direction of the grid relative to the image. | number | 0 → 180° |
| distortionShape | Shape of the distortion within each grid cell. | string | prism · lens · contour · cascade · flat |
| distortion | Power of the distortion applied within each stripe. | number | 0 → 1 |
| shift | Texture shift opposite to the grid direction. | number | −1 → 1 |
| stretch | Extra distortion along the grid lines. | number | 0 → 1 |
| blur | One-directional blur over the image and edges. | number | 0 → 1 |
| edges | Glass distortion and softness on the image edges. | number | 0 → 1 |
| margin | Distance from each canvas edge to the effect. | number | 0 → 1 |
| grainMixer | Grain distortion applied to shape edges. | number | 0 → 1 |
| grainOverlay | Post-process black/white grain overlay. | number | 0 → 1 |
| fit | How the source image is fit into the canvas. | string | cover · contain |
Common Props
9 | name | description | type | values |
|---|
| scale | Overall zoom level of the graphics. | number | 0.01 → 4 |
| rotation | Overall rotation angle of the graphics. | number | 0 → 360 |
| offsetX | Horizontal offset of the graphics. | number | −1 → 1 |
| offsetY | Vertical offset of the graphics. | number | −1 → 1 |
| originX | Reference point for positioning width in the canvas. | number | 0 → 1 |
| originY | Reference point for positioning height in the canvas. | number | 0 → 1 |
| speed | Animation speed for time-based motion. | number | — |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |