Light runs the edge

Pure CSS, no JS per frame.

Border Beam

A light travelling around the border of any element.

Effects

Light runs the edge

Pure CSS, no JS per frame.

Installation

bash
npx shadcn@latest add https://ui.noicess.fun/r/border-beam.json

Props

PropTypeDefaultDescription
durationnumber8Seconds per revolution.
sizenumber140Beam width in px.
offsetnumber0Starting offset along the border, in degrees.
delaynumber0Seconds before the beam starts.