Specular Button

Glass button with a shader-driven specular rim light that sweeps around the edge and follows the cursor.

Default

Move the pointer around the button and the rim light turns toward it. Every prop is wired to the controls underneath.

Highlight

Edge

Tint

Text

Size

Radius18px

Tint Opacity0

Blur0px

Intensity1

Shine Size10deg

Shine Fade40deg

Thickness1px

Speed0.35

Proximity250px

Follow MouseAuto Animate

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"lg"`	Preset padding and font size of the button.
`radius`	`number`	`18`	Corner radius in pixels; clamps to a pill automatically.
`tint`	`string`	`"#ffffff"`	Color of the glass background tint.
`tintOpacity`	`number`	`0`	Strength of the glass tint.
`blur`	`number`	`0`	Backdrop blur in pixels behind the button.
`textColor`	`string`	`"#f5f5f5"`	Color of the button label.
`lineColor`	`string`	`"#ffffff"`	Color of the moving specular highlight.
`baseColor`	`string`	`"#525252"`	Color of the static edge stroke under the highlight.
`intensity`	`number`	`1`	Brightness of the specular highlight.
`shineSize`	`number`	`10`	Angular size in degrees of each shine streak along the edge.
`shineFade`	`number`	`40`	How gradually each streak fades out at its ends, in degrees.
`thickness`	`number`	`1`	Width of the highlight line in pixels.
`speed`	`number`	`0.35`	Rotation speed of the sweep when autoAnimate is on.
`followMouse`	`boolean`	`true`	Point the light toward the cursor.
`proximity`	`number`	`250`	Distance in pixels within which the shine fades in as the cursor approaches.
`autoAnimate`	`boolean`	`false`	Keep the shine always on with a rotating sweep, regardless of cursor distance.
`disabled`	`boolean`	`false`	Disable the button.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Native button type.

Slot	Description
`default`	Button label or any custom content. Defaults to "Get Started".

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Enter` + `Space`	Activates the button.

It renders a native button, so focus, disabled state and form submission work as usual. The WebGL layer is decorative and hidden from assistive technology.