Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

Pulsing Border draws a glowing, animated border around a rounded rectangle. Up to 5 colors each produce independent luminous spots that orbit the border perimeter. A bloom parameter controls whether the spots blend normally or additively (creating a stronger glow), and optional smoke and pulse effects add further visual depth.

​
Usage

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

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

​
Props

​
colorBack
string
default:"\"#000000\""
Background color. Accepts any CSS color string, including transparent (#00000000).
​
colors
string[]
default:"[\"#0dc1fd\", \"#d915ef\", \"#ff3f2ecc\"]"
Array of CSS color strings, one per color spot group. Accepts up to 5 colors.
​
roundness
number
default:"0.25"
Corner radius of the border rectangle. 0 gives sharp corners; 1 gives a fully rounded shape. Range 0 to 1.
​
thickness
number
default:"0.1"
Base width of the border. Range 0 to 1.
​
softness
number
default:"0.75"
Edge sharpness of the border. 0 gives a hard edge; 1 gives a soft, wide glow. Range 0 to 1.
​
intensity
number
default:"0.2"
Thickness of individual color spots relative to the border. Range 0 to 1.
​
bloom
number
default:"0.25"
Blend mode for color spots. 0 uses normal (over) blending; 1 uses additive blending for a stronger glow. 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 each color spot along the perimeter. Range 0 to 1.
​
pulse
number
default:"0.25"
Intensity of a heartbeat-like pulsing animation. 0 disables the pulse. Range 0 to 1.
​
smoke
number
default:"0.3"
Intensity of a noisy shape that extends the border inward and outward. Range 0 to 1.
​
smokeSize
number
default:"0.6"
Scale of the smoke noise pattern. Range 0 to 1.
​
aspectRatio
"auto" | "square"
default:"\"auto\""
Controls the aspect ratio of the border shape.
  • auto — the border shape matches the canvas aspect ratio
  • square — the border shape is always square (useful for circular borders when combined with roundness: 1)
​
margin
number
default:"0"
Shorthand to set equal margins on all four sides. When set, overrides individual marginLeft, marginRight, marginTop, and marginBottom values.
​
marginLeft
number
default:"0"
Distance from the left canvas edge to the border shape. Range 0 to 1.
​
marginRight
number
default:"0"
Distance from the right canvas edge to the border shape. Range 0 to 1.
​
marginTop
number
default:"0"
Distance from the top canvas edge to the border shape. Range 0 to 1.
​
marginBottom
number
default:"0"
Distance from the bottom canvas edge to the border shape. Range 0 to 1.
​
speed
number
default:"1"
Animation speed multiplier. Set to 0 to pause.
​
frame
number
default:"0"
Starting animation frame in milliseconds.

​
Presets

NameDescription
defaultPresetThree-color cyan/magenta/red border with moderate roundness and pulse.
circlePresetFully round border in square aspect ratio, creating a glowing circle.
northernLightsPresetFive-color aurora palette with very slow speed and full-screen thickness.
solidLinePresetSingle-color solid hairline border with no pulse or smoke.
Import presets from @paper-design/shaders-react: 
import { pulsingBorderPresets } from '@paper-design/shaders-react';

​
Sizing props

Pulsing Border also accepts all ShaderSizingParams (fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, worldHeight). See Sizing and fit for details.