Chrome
CreativeBorder 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.
npx @galactrex/ui add border-pulseUsage
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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | true | Pulsing while true. |
rings | number | 2 | Rings at a time. |
duration | number | 1.8 | Seconds per ring. |
spread | number | 14 | How far a ring travels in px. |
color | string | — | Any CSS colour; defaults to a theme token. |
className | string | — | 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.