Shiny Button

A CTA that senses the pointer before it arrives — a light slash fades in on approach and glides across the face to follow it.

Customize

Label

Tone

Size

Proximity140px

Shine65%

Slash width56px

Tilt18

Hover glow

Usage

import { ShinyButton } from "@/components/lazy-ui/shiny-button";

export function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShinyButton>Sign in</ShinyButton>
      <ShinyButton tone="midnight" size="lg" proximity={220}>
        Continue with Discord
      </ShinyButton>
    </div>
  );
}