pulsing border

A luminous animated border with flowing spots of colour, optional smoke trails, and pulsing glow. Great for highlighting CTAs or wrapping a hero image.

Preview

live

Install

npm

npm i @devmischief/shaders-svelte

Code

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

<PulsingBorder
  width={1280}
  height={720}
  colors={['#ff006e', '#3a86ff', '#06d6a0']}
  colorBack="#000000"
  roundness={0.25}
  thickness={0.1}
  softness={0.75}
  aspectRatio="auto"
  intensity={0.2}
  bloom={0.25}
  spots={4}
  spotSize={0.5}
  pulse={0.25}
  smoke={0.3}
  smokeSize={0.6}
  margin={0}
  scale={0.6}
  rotation={0}
  offsetX={0}
  offsetY={0}
  speed={1}
  fit="contain"
/>

Shader Props

name	description	type	values
colors	Spot colors that flow along the border (up to 5).	string[]	hex / rgb
colorBack	Background color shown behind the border.	string	hex / rgba
roundness	Corner radius of the border.	number	0 → 1
thickness	Base width of the border.	number	0 → 1
softness	Border edge sharpness. 0 = hard edge, 1 = smooth gradient.	number	0 → 1
aspectRatio	Aspect ratio mode. auto = follows the canvas, square = forces a square border.	string	auto · square
intensity	Thickness of individual color spots along the border.	number	0 → 1
bloom	Glow blend mode. 0 = normal blending, 1 = additive blending.	number	0 → 1
spots	Number of spots added for each color.	number	1 → 20
spotSize	Angular size of each spot along the border.	number	0 → 1
pulse	Pulsing animation intensity.	number	0 → 1
smoke	Noisy shape extending the border outward.	number	0 → 1
smokeSize	Scale of the smoke effect.	number	0 → 1
margin	Distance from each canvas edge to the border.	number	0 → 1
speed	Animation speed of the flowing spots.	number	0 → 3
fit	How the border 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	—