Shaders
Click to change sample image

Fluted Glass

Installation

npm i @paper-design/shaders-react

Code

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

<FlutedGlass
  style={{ height: 500 }}
  count={80}
  shape="lines"
  angle={0}
  distortionShape="lens"
  distortion={0.5}
  shift={0}
  blur={3}
  highlights={0}
  scale={1}
  fit="contain"
  marginLeft={0}
  marginRight={0}
  marginTop={0}
  marginBottom={0}
/>

Props

count

Number of grid lines.

angle

Direction of the grid relative to the image.

shape

The shape of the grid.

distortionShape

The shape of the distortion.

distortion

The power of distortion applied along within each stripe.

shift

Texture shift in direction opposite to the grid.

blur

One-directional blur applied over the main distortion.

highlights

Thin color lines along the grid (independent from distortion).

scale

Overall pattern zoom.

fit

How the image fits the canvas.

marginLeft, marginRight, marginTop, marginBottom

Padding within the image to be shown without any distortion.

Description

Mimicking glass surface distortion over the image by distorting the texture coordinates within line patterns.