color panels

Pseudo-3D semi-transparent panels rotating around a central axis. Skew, blur, and fade for kaleidoscope, glass-slat, and prism looks.

Preview

live

Install

npm

npm i @devmischief/shaders-svelte

Code

import { ColorPanels } from '@devmischief/shaders-svelte';

<ColorPanels
  width={1280}
  height={720}
  colors={['#ff006e', '#3a86ff', '#06d6a0', '#ffbe0b']}
  colorBack="#000000"
  density={3}
  angle1={0}
  angle2={0}
  length={1.1}
  edges={true}
  blur={0}
  fadeIn={1}
  fadeOut={0.3}
  gradient={0}
  scale={0.8}
  rotation={0}
  offsetX={0}
  offsetY={0}
  speed={0.5}
  fit="contain"
/>

Shader Props

name	description	type	values
colors	Panel colors (up to 7).	string[]	hex / rgb
colorBack	Background color shown behind the panels.	string	hex / rgba
density	Angle between every two panels.	number	0.25 → 7
angle1	First skew angle applied to all panels.	number	−1 → 1
angle2	Second skew angle applied to all panels.	number	−1 → 1
length	Panel length relative to total height.	number	0 → 3
edges	Color highlight along the panel edges.	boolean	true · false
blur	Side blur. 0 = sharp edges.	number	0 → 0.5
fadeIn	Transparency near the central axis.	number	0 → 1
fadeOut	Transparency near the viewer.	number	0 → 1
gradient	Color mixing within a panel. 0 = solid, 1 = gradient.	number	0 → 1
speed	Rotation speed of the panels.	number	0 → 3
fit	How the panels world is fit into the canvas.	string	none · cover · contain

Common Props

name	description	type	values
originX	Reference point for positioning width in the canvas.	number	0 → 1
originY	Reference point for positioning height in the canvas.	number	0 → 1
worldWidth	Virtual width of the graphic before it's scaled to fit the canvas.	number	—
worldHeight	Virtual height of the graphic before it's scaled to fit the canvas.	number	—
minPixelRatio	Minimum pixel ratio used when rendering the shader (default 2).	number	—
maxPixelCount	Maximum pixel count the shader may process.	number	—