Border Beam

A soft light that travels the rim of a card, button or field and spills onto its surface, as if the edge were glass catching a passing light.

$149 once · every Pro piece

Customize

Element

card

input

Speed (px/s)

Length (px)

Two beams

Pause on hover

Active

It reads the wrapped element's own size, border and corner radii, lights exactly its 1px border with a near-white core cooling to the accent, and keeps one calm speed round every corner. A second light can run half a lap behind; it eases to a stop on hover and fades out when inactive. Pure CSS motion on the compositor.

Install

npx shadcn@latest add @obsyde/border-beam

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { BorderBeam } from '@/components/obsyde/ember/border-beam/BorderBeam';

export function Example() {
  return (
    <BorderBeam />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/border-beam/BorderBeam.tsxcomponent
ember/border-beam/border-beam-demo.cssstyles
ember/border-beam/border-beam.cssstyles
ember/border-beam/BorderBeamDemo.tsxdemo
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`example`Element	`'card' \| 'input'`	`'card'`
`speed`Speed (px/s)	`number`	`110`
`length`Length (px)	`number`	`170`
`duo`Two beams	`boolean`	`false`
`pauseOnHover`Pause on hover	`boolean`	`false`
`active`Active	`boolean`	`true`