Premium & Brand

Border Beam

An animated light beam that travels around an element's border.

Import

tsx

import { BorderBeam } from "@cooud-ui/ui";

bash

npx cooud-ui add border-beam

Examples

Featured card

A single light head continuously orbits the border like a comet — the calm way to say “this is the one”. It's one composited CSS animation (no JS, no re-renders) and is fully suppressed under prefers-reduced-motion.

Popular

Pro

Tudo para escalar a sua loja.

R$ 79/ mês

tsx

<BorderBeam duration={6} className="w-full max-w-xs">
  <div className="flex flex-col gap-4 rounded-2xl bg-surface-raised p-6">
    <div className="flex items-center justify-between">
      <span className="grid size-9 place-items-center rounded-lg bg-gradient-primary text-primary-foreground shadow-glow">
        <Sparkles className="size-4" aria-hidden="true" />
      </span>
      <span className="rounded-full border border-border px-2.5 py-0.5 text-xs font-medium text-fg-secondary">
        Popular
      </span>
    </div>
    <div>
      <h3 className="font-display text-base font-semibold text-fg">Pro</h3>
      <p className="mt-1 text-sm text-fg-secondary">Tudo para escalar a sua loja.</p>
    </div>
    <div className="flex items-baseline gap-1">
      <span className="font-display text-3xl font-semibold text-fg">R$ 79</span>
      <span className="text-sm text-fg-tertiary">/ mês</span>
    </div>
    <Button variant="gradient" className="w-full">
      Assinar o Pro
      <ArrowRight aria-hidden="true" className="size-4" />
    </Button>
  </div>
</BorderBeam>

Prompt bar

The beam isn't only for cards — wrap an input to give an AI prompt bar a living, premium edge. A larger `size` reads as a longer comet trail.

Pergunte qualquer coisa ao Cooud…

tsx

<BorderBeam size={80} duration={5} className="w-full max-w-md">
  <div className="flex items-center gap-3 rounded-2xl bg-surface-raised px-4 py-3">
    <Sparkles className="size-4 shrink-0 text-primary" aria-hidden="true" />
    <span className="flex-1 truncate text-sm text-fg-tertiary">
      Pergunte qualquer coisa ao Cooud…
    </span>
    <Button size="icon" variant="gradient" aria-label="Enviar">
      <ArrowRight aria-hidden="true" className="size-4" />
    </Button>
  </div>
</BorderBeam>

Custom colours & reverse

Every knob rides a CSS variable: set `colorFrom`/`colorTo` for a bespoke gradient head and `reverse` to orbit counter-clockwise. Here an amber→pink trail circles a security card.

Pagamentos protegidos

Antifraude e 3-D Secure em cada transação — o feixe reverso mantém o olhar na borda.

tsx

<BorderBeam
  colorFrom="#f59e0b"
  colorTo="#ec4899"
  size={90}
  duration={5}
  reverse
  className="w-full max-w-xs"
>
  <div className="flex flex-col gap-3 rounded-2xl bg-surface-raised p-6">
    <span className="grid size-9 place-items-center rounded-lg bg-surface-overlay text-fg">
      <ShieldCheck className="size-4" aria-hidden="true" />
    </span>
    <h3 className="font-display text-base font-semibold text-fg">Pagamentos protegidos</h3>
    <p className="text-sm text-fg-secondary">
      Antifraude e 3-D Secure em cada transação — o feixe reverso mantém o olhar na borda.
    </p>
  </div>
</BorderBeam>

API Reference

Generated from the component's exported types.

BorderBeamProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`size`	`number`	`60`	Length of the luminous head, in pixels. Also sets the corner radius of the travel path so the beam rounds the corners smoothly. Larger values read as a longer comet trail. Defaults to `60`.
`duration`	`number`	`8`	Seconds for one full lap around the perimeter. Defaults to `8` (a calm, premium drift).
`delay`	`number`	`0`	Phase offset in seconds — the beam starts as if it had already been running for this long, so two beams on stacked cards can be staggered around the loop instead of moving in lockstep. Defaults to `0`.
`colorFrom`	`string`	`"var(--cooud-primary)"`	Colour of the leading edge of the beam. Defaults to the theme primary (`var(--cooud-primary)`).
`colorTo`	`string`	`"var(--cooud-accent)"`	Colour the trail fades through before it dissolves. Defaults to the theme accent (`var(--cooud-accent)`).
`borderWidth`	`number`	`1.5`	Thickness of the border band the beam rides in, in pixels. Defaults to `1.5`.
`reverse`	`boolean`	`false`	Travel counter-clockwise instead of clockwise. Defaults to `false`.