swirl

Animated bands of colour twisting around a centre — pie-slice sectors at zero twist, full spirals at one. Drop bandCount to zero for concentric ripples.

Preview

live

Install

npm

npm i @devmischief/shaders-svelte

Code

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

<Swirl
  width={1280}
  height={720}
  colors={['#ff006e', '#fb5607', '#ffbe0b', '#06d6a0']}
  colorBack="#330000"
  bandCount={4}
  twist={0.1}
  center={0.2}
  proportion={0.5}
  softness={0}
  noise={0.2}
  noiseFrequency={0.4}
  scale={1}
  rotation={0}
  offsetX={0}
  offsetY={0}
  speed={0.32}
  fit="contain"
/>

Shader Props

name	description	type	values
colors	Stripe colors of the swirl (up to 10).	string[]	hex / rgb
colorBack	Background color shown behind the swirl.	string	hex / rgba
bandCount	Number of color bands. 0 = concentric ripples instead of bands.	number	0 → 15
twist	Vortex power. 0 = straight pie-slice sectors, 1 = full spiral.	number	0 → 1
center	How far from the center the swirl colors begin to appear. Higher values leave a hole in the middle.	number	0 → 1
proportion	Blend point between colors. 0.5 = equal distribution.	number	0 → 1
softness	Color transition sharpness. 0 = hard edge, 1 = smooth gradient.	number	0 → 1
noise	Noise distortion strength. No effect when noiseFrequency = 0.	number	0 → 1
noiseFrequency	Frequency of the noise distortion. No effect when noise = 0.	number	0 → 1
speed	Animation speed of the swirling motion.	number	0 → 3
fit	How the swirl 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	—