Pulsing Border
Installation
npm i @paper-design/shaders-react
Code
import { PulsingBorder } from '@paper-design/shaders-react';
<PulsingBorder
style={{ height: 500 }}
colorBack="#000000"
roundness={0.25}
thickness={0.2}
softness={0.75}
intensity={0.2}
bloom={0.45}
spots={3}
spotSize={0.4}
pulse={0.5}
smoke={0.35}
smokeSize={0.6}
scale={0.6}
rotation={0}
offsetX={0}
offsetY={0}
speed={1}
colors={["#cc3333","#cc9933","#99cc33"]}
/>
Props
| Name | Description | Type | Values |
|---|---|---|---|
| colorBack | Background color | string | Hex, RGB, or HSL color |
| colors | Up to 5 colors | string[] | Hex, RGB, or HSL color |
| roundness | The border radius | number | 0 to 1 |
| thickness | The border base width | number | 0 to 1 |
| softness | Border edge sharpness (0 = hard edge, 1 = smooth gradient) | number | 0 to 1 |
| intensity | Thickness of individual color spots | number | 0 to 1 |
| bloom | The power of glow (0 = normal color blending, 1 = fully additive blending) | number | 0 to 1 |
| spots | Number of spots added for each color | number | 1 to 20 (integer) |
| spotSize | Angular size of spots | number | 0 to 1 |
| pulse | Optional pulsing animation | number | 0 to 1 |
| smoke | Optional noisy shape extending the border width | number | 0 to 1 |
| smokeSize | The size of the smoke effect | number | 0 to 1 |
| scale | Overall zoom level of the graphics | number | 0.01 to 1 |
| rotation | Overall rotation angle of the graphics | number | 0 to 360 |
| offsetX | Horizontal offset of the graphics center | number | -1 to 1 |
| offsetY | Vertical offset of the graphics center | number | -1 to 1 |
| speed | Animation speed | number | 0 to 2 |
Description
Luminous trails of color merging into a glowing gradient frame