Mesh Gradient

The MeshGradient component is designed to render a Apple-like mesh gradient for React apps. It offers flexible customization options through various props.

Live examples

Features

- Supports both horizontal and vertical orientations.
- Provides smooth animations for track movement and stretch effects.
- Fully unstyled and customizable.
- RTL support.
- Keyboard support.

Installation

``bash
npm install @blur-ui/mesh-gradient
`

or

`bash
yarn add @blur-ui/mesh-gradient
`

Usage

`tsx

`

Props

$3

- Type: Ref | null
- Description: A reference to the element used for rendering the gradient.

$3

- Type: GradientPalette
- Description: An object containing four colors for the gradient. If not specified, the color palette defined by the color prop is used.

$3

- Type: GradientColors
- Description: The name of a predefined color palette.

$3

- Type: boolean
- Description: If true, the gradient will be darkened.

$3

- Type: boolean
- Description: If true, the gradient animation will be paused.

$3

- Type: number
- Description: The opacity level of the gradient. Default: 1.

$3

- Type: number
- Description: The duration of the opacity transition animation in milliseconds. Default: 150.

$3

- Type: ComponentPropsWithoutRef<'canvas'>
- Description: Any other props that can be passed to a element.

$3

- Type: { color1: string; color2: string; color3: string; color4: string }
- Description: An object defining four colors used in the gradient.

Example

`tsx

`

This example creates a gradient with the sky color palette, darkened, with continuous animation and an opacity of 0.8. The opacity transition animation lasts 300 milliseconds.

$3

`tsx
const colors: GradientPalette = {
color1: '#FF5733',
color2: '#33FF57',
color3: '#3357FF',
color4: '#F3FF33'
}

colors={colors}
animationDuration={200}
/>
`

This example uses a custom color palette defined by the colors` prop, with no darkening, continuous animation, full opacity, and an opacity transition animation lasting 200 milliseconds.

Credits

This component was inspired by Stripe's mesh gradient.