Border Beam

A short beam of light that travels around a surface's border. For the one card or input that should draw the eye, or an agent that is working.

Agent is working

Reading 14 files in the repository.

Installation

Part of JDS Pro. Add the Pro registry to components.json and set JDS_PRO_TOKEN in .env to your license key:

{
  "registries": {
    "@jds-pro": {
      "url": "https://www.usejds.dev/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${JDS_PRO_TOKEN}" }
    }
  }
}

pnpm dlx shadcn@latest add @jds-pro/border-beam

Usage

import { BorderBeam } from "@/components/pro/border-beam"

<div className="relative rounded-xl border p-6">
  Agent is working
  <BorderBeam />
</div>

API Reference

BorderBeam

Prop	Type	Default
`duration` Seconds for one lap.	number	6
`length` Share of the border the beam covers, 0 to 1.	number	0.2
`width` Border thickness in pixels.	number	1
`colorFrom` Color at the beam's head.	string	"var(--primary)"
`colorTo` Color the tail fades through. Defaults to a translucent primary.	string	–
`reverse` Travel counterclockwise.	boolean	false
`delay` Seconds before the first lap. Offset two beams to chase each other.	number	0

Ambient Background Liquid Glass