Color Panels

Installation

npm i @paper-design/shaders-react

Code

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

<ColorPanels
  style={{ height: 500 }}
  colorBack="hsl(0, 0%, 3%)"
  density={3}
  angle1={0}
  angle2={0}
  length={1.1}
  edges
  blur={0}
  fadeIn={1}
  fadeOut={0.3}
  gradient={0}
  offsetX={0}
  offsetY={0}
  scale={1}
  rotation={0}
  speed={0.5}
  colors={[
    "hsl(37, 100%, 50%)",
    "hsl(9, 98%, 59%)",
    "hsl(227, 100%, 75%)",
    "hsl(258, 100%, 59%)",
    "hsl(238, 100%, 60%)",
    "hsl(295, 100%, 68%)",
    "hsl(45, 100%, 67%)"
  ]}
/>

Props

colors

Up to 5 colors.

colorBack

Background color.

density

Angle between every 2 panels.

angle1, angle2

Skew angle applied to all panes.

length

Panel length (relative to total height).

edges

Faking edges effect.

blur

Side blur (0 for sharp edges).

fadeIn

Transparency near central axis.

fadeOut

Transparency near viewer.

gradient

Color mixing within panes (0 = single color, 1 = two colors).

offsetX, offsetY

Position of the center.

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

Description

Pseudo-3D panels rotating around a central axis.