Frame Border

Animated noise-textured border effect

frame-border-tw

Customize

Tweak the props live

Border

Speed0.1

Border Width0.22

Falloff6

Noise

Noise Scale3

Noise Strength1

Noise Octaves5

Visual

Intensity1

Gamma2

Opacity1

Border Color

#FF9FFC

Background

#FFFFFF

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)

widthstring | number

Container width

Default:"100%"

heightstring | number

Container height

Default:"100%"

classNamestring

Additional CSS classes for styling

Default:""

childrenReactNode

Content rendered above the effect

Default:undefined

speednumber

Animation speed multiplier (0.01–2.0)

Default:0.1

borderWidthnumber

Border thickness as fraction of the shorter axis (0.01–0.5)

Default:0.22

falloffnumber

Power exponent shaping the vignette falloff (1–20)

Default:6

noiseScalenumber

Noise pattern zoom (0.5–10)

Default:3

noiseStrengthnumber

How much noise modulates the border (0 = solid, 1 = fully textured)

Default:1

noiseOctavesnumber

Noise detail octaves (1–6)

Default:5

colorstring

Border glow color in hex format

Default:"#FF9FFC"

backgroundColorstring

Background / center fill color in hex format

Default:"#000000"

intensitynumber

Brightness multiplier for the border (0.1–5)

Default:1

gammanumber

Gamma correction exponent (0.5–5)

Default:2

opacitynumber

Master opacity (0–1)

Default:1