Premium & Brand

Border Beam

Server Component

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

Import

tsx

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

bash

npx cronus-ui add border-beam

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component BorderBeamDefault layout:inline style:border-beam {
  label "Beam"
}

page "/audit/border-beam/default" type:custom {
  use BorderBeamDefault
}

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(--cronus-fg)"`	Colour of the leading edge of the beam. Defaults to `var(--cronus-fg)`.
`colorTo`	`string`	`"transparent"`	Colour the trail fades through before it dissolves. Defaults to transparent.
`borderWidth`	`number`	`1`	Thickness of the border band the beam rides in, in pixels. Defaults to `1` (hairline).
`reverse`	`boolean`	`false`	Travel counter-clockwise instead of clockwise. Defaults to `false`.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

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-surface-overlay text-fg">
        <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="primary" 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 Cronus…

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 Cronus…
    </span>
    <Button size="icon" variant="primary" 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 token-bound head and `reverse` to orbit counter-clockwise. Here the trail is foreground fading out.

Pagamentos protegidos

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

tsx

<BorderBeam
  colorFrom="var(--cronus-fg)"
  colorTo="transparent"
  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>