BorderBeam

Animated border beam — Jakub Antalik's multi-layer glow (colorful / mono / ocean / sunset, sm / md / line / pulse), with Desk playMode="once" settle.

Terracotta Hex

Hand-glazed field tile, just added to the library.

New arrival

Usage

@desk/ui/components/border-beam

<BorderBeam
  borderRadius={24}
  colorVariant="colorful"
  size="md"
  strength={0.8}
  theme="light"
>
  <Card className="w-72">
    <CardHeader>
      <CardTitle>Terracotta Hex</CardTitle>
    </CardHeader>
    <CardContent>
      <Text size="sm" variant="muted">
        Hand-glazed field tile, just added to the library.
      </Text>
    </CardContent>
    <CardFooter>
      <Badge emphasis="soft" tone="brand">
        New arrival
      </Badge>
    </CardFooter>
  </Card>
</BorderBeam>

Best practices

Use playMode="once" for one-shot attention cues (e.g. Material Intelligence); keep loop for idle "try me" surfaces.
Prefer colorVariant + theme over hardcoding a single color — the Jakub engine owns the multi-stop gradients.
Under prefers-reduced-motion, the component skips travel and shows the settled ring only.

Props

Prop	Type	Default	Description
children(required)	`ReactNode`		Content to wrap with the border beam effect.
size	`BorderBeamSize \| undefined`	`"md"`	Size/type preset. Rotate: `sm` \| `md` \| `line`. Pulse: `pulse-outside` \| `pulse-inner`.
colorVariant	`BorderBeamColorVariant \| undefined`	`"colorful"`	Color palette — Jakub's Colorful / Mono / Ocean / Sunset.
theme	`BorderBeamTheme \| undefined`	`"light"`	Adapts beam colors for dark or light surfaces. `auto` follows system.
staticColors	`boolean \| undefined`		Disable hue-shift (forced on for `mono`).
duration	`number \| undefined`		Rotation/travel duration in seconds.
active	`boolean \| undefined`		Whether the traveling animation is active.
borderRadius	`number \| undefined`		Border radius in px. Auto-detected from the child when omitted.
brightness	`number \| undefined`		Glow brightness multiplier.
saturation	`number \| undefined`		Glow saturation multiplier.
hueRange	`number \| undefined`		Hue-shift range in degrees.
strength	`number \| undefined`		Overall effect strength (0–1).
className	`string \| undefined`
style	`CSSProperties \| undefined`
playMode	`BorderBeamPlayMode \| undefined`	`"loop"`	`loop` keeps orbiting (Jakub default). `once` draws one orbit then settles to a static glowing ring so the cue is attention-grabbing, not perpetual.
settled	`boolean \| undefined`		Force the settled static ring (skips travel). Useful under reduced motion or when the parent has already finished its entrance choreography.
onPlayComplete	`(() => void) \| undefined`		Fires after a `playMode="once"` orbit completes and the ring settles.
onActivate	`(() => void) \| undefined`
onDeactivate	`(() => void) \| undefined`

Also exports

typeBorderBeamColorVariant
typeBorderBeamPlayMode
interfaceBorderBeamProps
typeBorderBeamSize
typeBorderBeamTheme