FancyUI
Saved GitHub Get started
Card — comet border beam — preview

Card — comet border beam

FancyUI FANCYUI

A white-hot comet laps the card edge, trailing a feathered two-colour tail.

#glow#minimal#ambient

Open docs

Use in FancyUI

Type
Interaction
Interaction
Ambient
Style
Glow, Minimal
Code availability
Open source

Why it works

The head travels the real border box, so it hugs any radius, and the tail fades over a quarter of the perimeter while a faint spill lights the inside edge. The rail under it stays dim, which makes the beam the only moving thing on the card.

When to use it

Work in progress on one card — a deploy, a generation, a sync — or one feature tile that should catch the eye.

Things to watch

Pure CSS. Reduced motion parks the head at `anchor` with the tail laid out. It must be the last child of a positioned, overflow-hidden parent; set `--border-beam-radius` when the radius cannot be read.

Implementation clues

  • offset-path: border-box
  • container-type: size
  • tail as a trailing gradient
  • anchor = % of the perimeter