Pulsing Border
A luminous animated contour built from merging color trails.
Customize
Roundness
0.25
Thickness
0.1
Softness
0.75
Intensity
0.2
Bloom
0.25
Spots
5
Spot Size
0.5
Pulse
0.25
Smoke
0.3
Smoke Size
0.6
Speed
1
Scale
0.6
Rotation
0
Offset X
0
Offset Y
0
Margin Left
0
Margin Right
0
Margin Top
0
Margin Bottom
0
API reference
The wrapper adds playback and runtime safeguards while preserving the
complete Paper PulsingBorder API. This includes its border, bloom, smoke,
color, motion, sizing, pixel-ratio, and styling props. See the
Paper Pulsing Border reference
for the full prop table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
playback | "auto" | "always" | "paused" | "auto" | Controls motion policy. Auto pauses for reduced motion and while the shader is outside the viewport. |
colors | string[] | ["#0dc1fd", "#d915ef", "#ff3f2ecc"] | Supplies up to five border colors. The wrapper provides a neon curated palette when omitted. |
colorBack | string | "#000000" | Sets the background color. |
width / height | number | string | "100%" | Sets the canvas CSS dimensions. Size the parent element to establish the visible area. |
maxPixelCount | number | 2073600 | Caps the rendered pixel budget. Override only after measuring the target devices. |
Credits
The rendering engine is Paper Shaders, distributed under the Apache License 2.0. vivid-layer supplies the React adapter, playback policy, documentation, and Registry packaging; it does not vendor or modify Paper's shader source.