Frame Border
Animated noise-textured border effect
frame-border-tw
Customize
Border
0.1
0.22
6
Noise
3
1
5
Visual
1
2
1
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | number | "100%" | Container width |
| height | string | number | "100%" | Container height |
| className | string | "" | Additional CSS classes for styling |
| children | ReactNode | undefined | Content rendered above the effect |
| speed | number | 0.1 | Animation speed multiplier (0.01–2.0) |
| borderWidth | number | 0.22 | Border thickness as fraction of the shorter axis (0.01–0.5) |
| falloff | number | 6 | Power exponent shaping the vignette falloff (1–20) |
| noiseScale | number | 3 | Noise pattern zoom (0.5–10) |
| noiseStrength | number | 1 | How much noise modulates the border (0 = solid, 1 = fully textured) |
| noiseOctaves | number | 5 | Noise detail octaves (1–6) |
| color | string | "#FF9FFC" | Border glow color in hex format |
| backgroundColor | string | "#000000" | Background / center fill color in hex format |
| intensity | number | 1 | Brightness multiplier for the border (0.1–5) |
| gamma | number | 2 | Gamma correction exponent (0.5–5) |
| opacity | number | 1 | Master opacity (0–1) |