Skip to main content
Pseudo-3D semi-transparent panels rotating around a central axis. Supports up to 7 colors with adjustable density, skew angles, panel length, and gradient effects.

​
React Usage

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

export default function MyComponent() {
  return (
    <ColorPanels
      colors={['#ff9d00', '#fd4f30', '#809bff', '#6d2eff', '#333aff', '#f15cff', '#ffd557']}
      colorBack="#000000"
      angle1={0}
      angle2={0}
      length={1.1}
      edges={false}
      blur={0}
      fadeIn={1}
      fadeOut={0.3}
      gradient={0}
      density={3}
      speed={0.5}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

​
Vanilla JavaScript Usage

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

const canvas = document.getElementById('myCanvas');
const cleanup = mountColorPanels(canvas, {
  colors: ['#ff9d00', '#fd4f30', '#809bff', '#6d2eff', '#333aff', '#f15cff', '#ffd557'],
  colorBack: '#000000',
  angle1: 0,
  angle2: 0,
  length: 1.1,
  edges: false,
  blur: 0,
  fadeIn: 1,
  fadeOut: 0.3,
  gradient: 0,
  density: 3,
  speed: 0.5,
});

// Call cleanup() when done

​
Parameters

​
colors
string[]
Array of up to 7 RGBA colors used to color the panels.
​
colorBack
string
default:"'#000000'"
Background color in hex format.
​
density
number
default:"3"
Angle between every 2 panels. Lower values create more densely packed panels. Range: 0.25 to 7.
​
angle1
number
default:"0"
Skew angle applied to left side of all panels. Creates perspective distortion. Range: -1 to 1.
​
angle2
number
default:"0"
Skew angle applied to right side of all panels. Creates perspective distortion. Range: -1 to 1.
​
length
number
default:"1.1"
Panel length relative to total height. Range: 0 to 3.
​
edges
boolean
default:"false"
Whether to show color highlights on panel edges for glass-like effect.
​
blur
number
default:"0"
Side blur amount. 0 creates sharp edges. Range: 0 to 0.5.
​
fadeIn
number
default:"1"
Transparency near central axis. Higher values make center more transparent. Range: 0 to 1.
​
fadeOut
number
default:"0.3"
Transparency near viewer. Higher values make foreground more transparent. Range: 0 to 1.
​
gradient
number
default:"0"
Color mixing within a panel. 0 creates solid colors, 1 creates gradients. Range: 0 to 1.
​
speed
number
default:"0.5"
Animation speed multiplier. Set to 0 to pause animation.
​
frame
number
default:"0"
Specific frame to display when speed is 0.

​
Common Sizing Parameters

​
scale
number
default:"0.8"
Overall zoom level of the graphics. Range: 0.01 to 4.
​
rotation
number
default:"0"
Rotation angle in degrees. Range: 0 to 360.
​
fit
'none' | 'contain' | 'cover'
default:"'contain'"
How to fit the shader into the canvas dimensions.
​
offsetX
number
default:"0"
Horizontal offset of the graphics center. Range: -1 to 1.
​
offsetY
number
default:"0"
Vertical offset of the graphics center. Range: -1 to 1.

​
Presets

The Color Panels shader comes with several built-in presets:
  • Default: Seven rainbow colors rotating slowly
  • Glass: Four colors with edge highlights and blur
  • Gradient: Soft gradient panels with high fadeOut
  • Opening: Cyan panels opening like a camera iris
import { ColorPanels, glassPreset } from '@paper-design/shaders-react';

<ColorPanels {...glassPreset.params} />

​
Notes

  • The number of colors affects the panel arrangement:
    • 3 colors: 12 panels
    • 4 colors: 16 panels
    • 5 colors: 20 panels
    • 7 colors: 14 panels
  • Use edges={true} with blur for a frosted glass effect
  • Negative angle1 and angle2 values create an opening iris effect
  • Combine gradient={1} with fadeOut for soft, ethereal transitions