Studio KitInteractive Buttons and Controlsno dependencies

ShinyBorderButton

Dark surface button whose 1.5px border carries a rotating conic light beam, with configurable beam color and orbit duration, implemented with pure CSS.

Preview

Customize

4 props
3

Installation

Copies the component source and its CSS Module into your project.

npx motionfoundry add shiny-border-button

Writes components/ui/shiny-border-button.tsx and components/styles/shiny-border-button.module.css.

Usage

Updates live as you change the controls — only props that differ from the defaults are included.

example.tsx
1import { ShinyBorderButton } from "@motionfoundry/ui";2 3export function Example() {4  return (5    <ShinyBorderButton />6  );7}

Props

PropTypeDefault
label

Button label (ignored when children are provided).

string'Get early access'
children

Optional custom button content.

React.ReactNodeundefined
duration

Seconds for the beam to travel once around the border.

number3
beamColor

Color of the travelling beam.

string'#38bdf8'
onClick

Click handler.

(event: React.MouseEvent<HTMLButtonElement>) => voidundefined
disabled

Disable the button and pause the beam.

booleanfalse
className

Additional class merged onto the root element.

string''

Accessibility

Semantic <button type="button"> with a visible :focus-visible outline and native disabled support (beam pauses when disabled). The beam layer is aria-hidden. Under prefers-reduced-motion the beam stops rotating and becomes a static gradient border.

Toggle prefers-reduced-motion in your OS or browser devtools (Rendering → Emulate CSS media feature) to verify the reduced-motion state.

Source

components/ui/shiny-border-button.tsx
1"use client";2 3import * as React from "react";4import styles from "../styles/shiny-border-button.module.css";5 6export interface ShinyBorderButtonProps {7  /** Button label (ignored when children are provided) */8  label?: string;9  /** Optional custom button content */10  children?: React.ReactNode;11  /** Seconds for the light beam to travel once around the border */12  duration?: number;13  /** Color of the travelling beam */14  beamColor?: string;15  /** Click handler */16  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;17  /** Disable the button and pause the beam */18  disabled?: boolean;19  /** Optional className */20  className?: string;21}22 23export function ShinyBorderButton({24  label = "Get early access",25  children,26  duration = 3,27  beamColor = "#38bdf8",28  onClick,29  disabled = false,30  className = "",31}: ShinyBorderButtonProps) {32  const styleVars = {33    "--mf-sb-duration": `${duration}s`,34    "--mf-sb-beam": beamColor,35  } as React.CSSProperties;36 37  return (38    <button39      type="button"40      onClick={onClick}41      disabled={disabled}42      style={styleVars}43      className={`${styles.root} ${className}`.trim()}44    >45      <span aria-hidden="true" className={styles.beam} />46      <span className={styles.inner}>{children ?? label}</span>47    </button>48  );49}