Account

Chrome

Creative

Border Pulse

For recording states, active calls, incoming items and the one card that needs a decision.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal
npx @galactrex/ui add border-pulse

Usage

Example
import { BorderPulse } from "@/components/galactrex/border-pulse";

<div className="relative rounded-xl border p-4"><BorderPulse />Recording</div>

Source

Installs to components/galactrex/border-pulse.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

PropTypeDefaultDescription
activebooleantruePulsing while true.
ringsnumber2Rings at a time.
durationnumber1.8Seconds per ring.
spreadnumber14How far a ring travels in px.
colorstring—Any CSS colour; defaults to a theme token.
classNamestring—Extra classes for the outer element.

Variants

  • Live. A recording or call in progress.

Accessibility

  • Decorative; say what is live in text too.

Motion and reduced motion

  • Per-axis scale and opacity; pauses offscreen.
  • Reduced motion: a still outline.