Interaction / component

Specular Button

A native button with an optical edge that responds to proximity, focus and activation.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Preview freely. Unlock the files.

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Component notes

Preserves the complete optical edge shader, size, tint and proximity response. The complete Demo adds a real click counter and accepts the same children label.
Native button props, callbacks, form attributes and disabled semantics remain available. Focus lights the edge; pointer proximity is optional.
Rendering caps DPR at 1.5. Idle, paused, hidden, offscreen and reduced-motion states schedule no continuous frames; a CSS edge remains usable without graphics.

React 19.2Modern browsersWebGL

React Bits — David Haz · MIT + Commons Clause. Reuse explicitly authorized; see bundled exact notice.

Props

Prop	Type	Default	Description
`size`	'sm' \| 'md' \| 'lg'	`"lg"`	Size; accepted ranges and choices are shown in the controls.
`radius`	number	`18`	Radius; accepted ranges and choices are shown in the controls.
`tint`	string	`"#ffffff"`	Tint; accepted ranges and choices are shown in the controls.
`tintOpacity`	number	`0`	Tint opacity; accepted ranges and choices are shown in the controls.
`blur`	number	`0`	Blur; accepted ranges and choices are shown in the controls.
`textColor`	string	`"#f5f5f5"`	Text color; accepted ranges and choices are shown in the controls.
`lineColor`	string	`"#ffffff"`	Edge color; accepted ranges and choices are shown in the controls.
`baseColor`	string	`"#525252"`	Base color; accepted ranges and choices are shown in the controls.
`intensity`	number	`1`	Intensity; accepted ranges and choices are shown in the controls.
`shineSize`	number	`10`	Shine size; accepted ranges and choices are shown in the controls.
`shineFade`	number	`40`	Shine fade; accepted ranges and choices are shown in the controls.
`thickness`	number	`1`	Thickness; accepted ranges and choices are shown in the controls.
`speed`	number	`0.35`	Speed; accepted ranges and choices are shown in the controls.
`followMouse`	boolean	`true`	Follow pointer; accepted ranges and choices are shown in the controls.
`proximity`	number	`250`	Proximity; accepted ranges and choices are shown in the controls.
`autoAnimate`	boolean	`false`	Orbit automatically; accepted ranges and choices are shown in the controls.
`disabled`	boolean	`false`	Disabled; accepted ranges and choices are shown in the controls.
`children`	ReactNode	`'Get Started'`	Accessible button label or caller content.
`onClick`	MouseEventHandler<HTMLButtonElement>	`undefined`	Receives real native activation events.
`type`	'button' \| 'submit' \| 'reset'	`'button'`	Native button form behavior.
`paused`	boolean	`false`	Stops decorative motion while preserving useful content and interaction.
`replayToken`	number	`0`	Change to restart decorative phase without remounting content; static prints and agent activity retain their state.
`className`	string	`''`	Additional scoped host class.
`style`	CSSProperties	`undefined`	Inline host styles; caller owns container layout.