FancyUI
Saved GitHub Get started
Frame — neon beams — preview

Frame — neon beams

FancyUI FANCYUI

Two hues chase each other around a neon tube that flickers on, then hums.

#glow#retro#ambient

Open docs

Use in FancyUI

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

Why it works

Two beams with white cores circle a faint tube in opposite colours, so the frame reads as moving light while nothing inside moves. A single ignition flicker on mount, then a slow hum, sells the neon without looping a strobe.

When to use it

A badge, a call to action or a small banner that should glow on a dark page.

Things to watch

The default box is 40px tall; size it with `class`. All motion lives under `no-preference`, so reduced motion gets static beams. An always-on glow competes with content — one per view.

Implementation clues

  • conic-gradient rotation
  • mask to border
  • half / full animation