Frame Border

A crisp, glowing border that frames any content

frame-border-tw

Customize

Color A

Color B

Background

Radius

16px

Line Width

1.00px

Inset

0px

Glow

0.50

Glow Width

110px

Noise

0.60

Noise Scale

3.0

Flow Speed

1.00

Pulse Speed

1.00

Idle Pulses

Idle Speed

1.00

Idle Strength

1.00

Intensity

1.00

Opacity

1.00

Grain

0.00

InteractiveIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#5227FF", "#FF9FFC"]`	Two colours blended in OKLCH along the frame. The gradient slowly travels around it.
`backgroundColor`	string	`"transparent"`	Fill behind the frame. Transparent reads the page colour. On light colours the frame switches to a fine inked line with a tinted glow.
`radius`	number	`16`	Corner radius of the line in px. The root is rounded to match.
`lineWidth`	number	`1`	Width of the border line in px. It stays crisp at any size. 0 hides it.
`inset`	number	`0`	Distance in px between the edge of the element and the line.
`glow`	number	`0.5`	Strength of the soft inner glow.
`glowWidth`	number	`110`	How far the glow reaches inward, in px. It always fades to zero.
`noise`	number	`0.6`	How much the flowing noise moves through the glow and along the line, from 0 to 1.
`noiseScale`	number	`3`	Density of the noise. Higher values give more, smaller patches.
`flowSpeed`	number	`1`	Speed of the light travelling around the frame. Hovering speeds it up gently.
`pulseSpeed`	number	`1`	Speed of the twin pulses a click sends from the nearest edge. They meet on the opposite side.
`idlePulses`	number	`3`	Soft swells of light that drift along the frame after the intro. 0 turns them off.
`idleSpeed`	number	`1`	Speed of the idle swells.
`idleStrength`	number	`1`	Brightness of the idle swells.
`intensity`	number	`1`	Overall brightness of the line and glow.
`opacity`	number	`1`	Opacity of the light layer.
`grain`	number	`0`	Film grain over the light, from 0 to 1.
`interactive`	boolean	`true`	Enables click pulses and the hover speed-up. Clicks stack.
`intro`	boolean	`true`	Draws the border in from the top, then fades the glow in.
`paused`	boolean	`false`	Stops all motion. Reduced-motion users get a still frame.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`width`	string \| number	`"100%"`	Width of the root element.
`height`	string \| number	`"100%"`	Height of the root element.
`children`	ReactNode	`undefined`	Content shown inside the frame, above the light.
`ref`	{ pulse, replay }	`undefined`	pulse(x?, y?) sends twin pulses from a point in px. replay() draws the border in again.
`className`	string	`undefined`	Classes for the root element.
`style`	CSSProperties	`undefined`	Inline styles for the root element.

colors[string, string]

Two colours blended in OKLCH along the frame. The gradient slowly travels around it.

Default["#5227FF", "#FF9FFC"]

backgroundColorstring

Fill behind the frame. Transparent reads the page colour. On light colours the frame switches to a fine inked line with a tinted glow.

Default"transparent"

radiusnumber

Corner radius of the line in px. The root is rounded to match.

Default16

lineWidthnumber

Width of the border line in px. It stays crisp at any size. 0 hides it.

Default1

insetnumber

Distance in px between the edge of the element and the line.

Default0

glownumber

Strength of the soft inner glow.

Default0.5

glowWidthnumber

How far the glow reaches inward, in px. It always fades to zero.

Default110

noisenumber

How much the flowing noise moves through the glow and along the line, from 0 to 1.

Default0.6

noiseScalenumber

Density of the noise. Higher values give more, smaller patches.

Default3

flowSpeednumber

Speed of the light travelling around the frame. Hovering speeds it up gently.

Default1

pulseSpeednumber

Speed of the twin pulses a click sends from the nearest edge. They meet on the opposite side.

Default1

idlePulsesnumber

Soft swells of light that drift along the frame after the intro. 0 turns them off.

Default3

idleSpeednumber

Speed of the idle swells.

Default1

idleStrengthnumber

Brightness of the idle swells.

Default1

intensitynumber

Overall brightness of the line and glow.

Default1

opacitynumber

Opacity of the light layer.

Default1

grainnumber

Film grain over the light, from 0 to 1.

Default0

interactiveboolean

Enables click pulses and the hover speed-up. Clicks stack.

Defaulttrue

introboolean

Draws the border in from the top, then fades the glow in.

Defaulttrue

pausedboolean

Stops all motion. Reduced-motion users get a still frame.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

widthstring | number

Width of the root element.

Default"100%"

heightstring | number

Height of the root element.

Default"100%"

childrenReactNode

Content shown inside the frame, above the light.

Defaultundefined

ref{ pulse, replay }

pulse(x?, y?) sends twin pulses from a point in px. replay() draws the border in again.

Defaultundefined

classNamestring

Classes for the root element.

Defaultundefined

styleCSSProperties

Inline styles for the root element.

Defaultundefined

Name

Type

Default

Description

colors

[string, string]

["#5227FF", "#FF9FFC"]

Two colours blended in OKLCH along the frame. The gradient slowly travels around it.

backgroundColor

string

"transparent"

Fill behind the frame. Transparent reads the page colour. On light colours the frame switches to a fine inked line with a tinted glow.

radius

number

16

Corner radius of the line in px. The root is rounded to match.

lineWidth

number

1

Width of the border line in px. It stays crisp at any size. 0 hides it.

inset

number

0

Distance in px between the edge of the element and the line.

glow

number

0.5

Strength of the soft inner glow.

glowWidth

number

110

How far the glow reaches inward, in px. It always fades to zero.

noise

number

0.6

How much the flowing noise moves through the glow and along the line, from 0 to 1.

noiseScale

number

3

Density of the noise. Higher values give more, smaller patches.

flowSpeed

number

1

Speed of the light travelling around the frame. Hovering speeds it up gently.

pulseSpeed

number

1

Speed of the twin pulses a click sends from the nearest edge. They meet on the opposite side.

idlePulses

number

3

Soft swells of light that drift along the frame after the intro. 0 turns them off.

idleSpeed

number

1

Speed of the idle swells.

idleStrength

number

1

Brightness of the idle swells.

intensity

number

1

Overall brightness of the line and glow.

opacity

number

1

Opacity of the light layer.

grain

number

0

Film grain over the light, from 0 to 1.

interactive

boolean

true

Enables click pulses and the hover speed-up. Clicks stack.

intro

boolean

true

Draws the border in from the top, then fades the glow in.

paused

boolean

false

Stops all motion. Reduced-motion users get a still frame.

dpr

number

2

Maximum device pixel ratio for the canvas.

width

string | number

"100%"

Width of the root element.

height

string | number

"100%"

Height of the root element.

children

ReactNode

undefined

Content shown inside the frame, above the light.

ref

{ pulse, replay }

undefined

pulse(x?, y?) sends twin pulses from a point in px. replay() draws the border in again.

className

string

undefined

Classes for the root element.

style

CSSProperties

undefined

Inline styles for the root element.