Modus UI

Starstream Button

Web (React)

A WebGL pill whose face carries a sideways stream of stars that stretches into streaks on hover.

A raw-WebGL pill on a drifting paper field. Inside its primary-tinted face, layers of stars stream sideways; hovering or focusing stretches them into long streaks and clicking washes the face with the page colour. Colours come from the theme tokens and update when the theme or palette changes. It fills its positioned parent, pauses when off screen or when the tab is hidden, and holds a still frame when the user prefers reduced motion.

Live Preview
Modus / Starstream Button

Installation

CLI

npx @modus-ui/cli add starstream-button

Manual

  1. Install framer-motion.
  2. Copy the code from the component tab.
  3. Create a file at components/ui/starstream-button.tsx.
  4. Paste the code.

Usage

tsx
import { StarstreamButton } from "@/components/ui/starstream-button";

export default function Example() {
  return (
    <div className="relative h-[400px] w-full overflow-hidden">
      <StarstreamButton />
    </div>
  );
}

Props

PropTypeDefaultDescription
labelstring"Engage"Button text.
onClickButtonHTMLAttributes["onClick"]-Called after the button's own click effect.
onMouseEnterButtonHTMLAttributes["onMouseEnter"]-Called after the button's own mouse enter effect.
onMouseLeaveButtonHTMLAttributes["onMouseLeave"]-Called after the button's own mouse leave effect.
onFocusButtonHTMLAttributes["onFocus"]-Called after the button's own focus effect.
onBlurButtonHTMLAttributes["onBlur"]-Called after the button's own blur effect.

Any other <button> attribute is passed through to the inner button.

Comments

  • No comments yet.