Skip to main content
Luminous trails of color merging into a glowing gradient contour. Features animated spots of up to 5 colors with customizable margins, roundness, and smoke effects.

​
React Usage

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

export default function MyComponent() {
  return (
    <PulsingBorder
      colorBack="#000000"
      colors={['#0dc1fd', '#d915ef', '#ff3f2ecc']}
      roundness={0.25}
      thickness={0.1}
      margin={0}
      softness={0.75}
      intensity={0.2}
      bloom={0.25}
      spots={5}
      spotSize={0.5}
      pulse={0.25}
      smoke={0.3}
      smokeSize={0.6}
      speed={1}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

​
Vanilla JavaScript Usage

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

const canvas = document.getElementById('myCanvas');
const cleanup = mountPulsingBorder(canvas, {
  colorBack: '#000000',
  colors: ['#0dc1fd', '#d915ef', '#ff3f2ecc'],
  roundness: 0.25,
  thickness: 0.1,
  margin: 0,
  softness: 0.75,
  intensity: 0.2,
  bloom: 0.25,
  spots: 5,
  spotSize: 0.5,
  pulse: 0.25,
  smoke: 0.3,
  smokeSize: 0.6,
  speed: 1,
});

// Call cleanup() when done

​
Parameters

​
colorBack
string
default:"'#000000'"
Background color in hex format.
​
colors
string[]
default:"['#0dc1fd', '#d915ef', '#ff3f2ecc']"
Array of up to 5 spot colors in hex format. Supports alpha channel.
​
roundness
number
default:"0.25"
Border radius. 0 creates sharp corners, 1 creates circular shape. Range: 0 to 1.
​
thickness
number
default:"0.1"
Border base width. Range: 0 to 1.
​
margin
number
default:"0"
Uniform margin distance from all edges. Range: 0 to 1.
​
marginLeft
number
default:"0"
Distance from the left edge to the effect. Overrides margin. Range: 0 to 1.
​
marginRight
number
default:"0"
Distance from the right edge to the effect. Overrides margin. Range: 0 to 1.
​
marginTop
number
default:"0"
Distance from the top edge to the effect. Overrides margin. Range: 0 to 1.
​
marginBottom
number
default:"0"
Distance from the bottom edge to the effect. Overrides margin. Range: 0 to 1.
​
aspectRatio
'auto' | 'square'
default:"'auto'"
Aspect ratio mode:
  • auto: Adapts to container dimensions
  • square: Forces square proportions
​
softness
number
default:"0.75"
Border edge sharpness. 0 creates hard edges, 1 creates smooth gradients. Range: 0 to 1.
​
intensity
number
default:"0.2"
Thickness of individual color spots. Range: 0 to 1.
​
bloom
number
default:"0.25"
Power of glow. 0 uses normal blending, 1 uses additive blending. Range: 0 to 1.
​
spots
number
default:"5"
Number of spots added for each color. Range: 1 to 20.
​
spotSize
number
default:"0.5"
Angular size of spots. Range: 0 to 1.
​
pulse
number
default:"0.25"
Optional pulsing animation intensity. Range: 0 to 1.
​
smoke
number
default:"0.3"
Optional noisy shape extending the border. Range: 0 to 1.
​
smokeSize
number
default:"0.6"
Size of the smoke effect. Range: 0 to 1.
​
speed
number
default:"1"
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.6"
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 Pulsing Border shader comes with several built-in presets:
  • Default: Cyan, magenta, and red rounded border
  • Circle: Circular glowing border with smoke
  • Northern lights: Slow-moving ethereal aurora effect
  • Solid line: Simple single-color line border
import { PulsingBorder, circlePreset } from '@paper-design/shaders-react';

<PulsingBorder {...circlePreset.params} />

​
Notes

  • Use individual margin properties for asymmetric borders
  • Combine pulse with spotSize for dramatic pulsing effects
  • Set bloom={1} for intense additive glow
  • Use aspectRatio="square" with roundness={1} for perfect circles