Mesh Gradient

Installation

npm i @paper-design/shaders-react

Code

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

<MeshGradient
  style={{ height: 500 }}
  distortion={0.8}
  swirl={0.1}
  offsetX={0}
  offsetY={0}
  scale={1}
  rotation={0}
  speed={1}
  colors={[
    "hsl(221, 100%, 94%)",
    "hsl(243, 68%, 36%)",
    "hsl(336, 91%, 64%)",
    "hsl(276, 60%, 57%)"
  ]}
/>

Props

distortion

Warp distortion.

swirl

Vortex distortion.

offsetX, offsetY

Position of the center.

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

Description

A composition of N color spots (one per color) with 2 types of distortions applied to the coordinate space.