Fluted Glass
Click to change the sample image
Installation
npm i @paper-design/shaders-react
Code
import { FlutedGlass } from '@paper-design/shaders-react';
<FlutedGlass
height={500}
count={80}
shape="lines"
angle={0}
distortionShape="lens"
distortion={0.5}
shift={0}
blur={3}
highlights={0}
scale={1}
fit="cover"
marginLeft={0}
marginRight={0}
marginTop={0}
marginBottom={0}
/>
Props
| Name | Description | Type | Values |
|---|---|---|---|
| count | Number of grid lines | number | 4 to 200 (integer) |
| shape | The shape of the grid | enum | | "pattern" | "wave" | "lines" | "linesIrregular" | "zigzag" |
| angle | Direction of the grid relative to the image | number | 0 to 180 |
| distortionShape | The shape of the distortion | enum | | "prism" | "lens" | "contour" | "cascade" | "facete" |
| distortion | The power of distortion applied within each stripe | number | 0 to 1 |
| shift | Texture shift in direction opposite to the grid | number | -1 to 1 |
| blur | One-directional blur | number | 0 to 50 |
| highlights | Thin highlights along the grid lines | number | 0 to 1 |
| width | CSS width style of the shader element | number | string | — |
| height | CSS height style of the shader element | number | string | — |
| scale | Overall zoom level of the graphics | number | 0.5 to 10 |
| fit | How the image fits the canvas | enum | | "contain" | "cover" |
| marginLeft | Showing original image on the left | number | 0 to 1 |
| marginRight | Showing original image on the right | number | 0 to 1 |
| marginTop | Showing original image on the top | number | 0 to 1 |
| marginBottom | Showing original image on the bottom | number | 0 to 1 |
Description
Fluted glass image filter transforms an image into streaked, ribbed distortions, giving a mix of clarity and obscurity.