spiral

An animated two-colour spiral with stroke taper, perspective falloff, and noise distortion. Goes from crisp geometry to flowing whirlpool to wavy rings.

Preview

live

Install

npm

npm i @devmischief/shaders-svelte

Code

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

<Spiral
  width={1280}
  height={720}
  colorBack="#001429"
  colorFront="#7ad1ff"
  density={1}
  distortion={0}
  strokeWidth={0.5}
  strokeTaper={0}
  strokeCap={0}
  noise={0}
  noiseFrequency={0}
  softness={0}
  scale={1}
  rotation={0}
  offsetX={0}
  offsetY={0}
  speed={1}
  fit="contain"
/>

Shader Props

name	description	type	values
colorBack	Background color shown behind the spiral.	string	hex / rgba
colorFront	Spiral ink color.	string	hex / rgb
density	Spacing falloff that simulates perspective. 0 = evenly-spaced flat spiral, 1 = full perspective.	number	0 → 1
distortion	Strength of shape distortion along the spiral path.	number	0 → 1
strokeWidth	Thickness of the spiral curve.	number	0 → 1
strokeTaper	Stroke width loss away from center. 0 = full visibility everywhere.	number	0 → 1
strokeCap	Extra stroke width at the center. No effect when strokeWidth = 0.5.	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
softness	Color transition sharpness. 0 = hard edge, 1 = smooth gradient.	number	0 → 1
speed	Animation speed of the spinning spiral.	number	0 → 3
fit	How the spiral 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	—