FancyUI
Saved GitHub Get started
Composer — pulse beam — preview

Composer — pulse beam

FancyUI FANCYUI

A breathing multi-hue beam around a composer that never touches the field inside.

#glow#iridescent#ambient

Open docs

Use in FancyUI

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

Why it works

The beam is drawn around the child, not over it: a 1px ring, a feathered inner glow and a bloom breathe together while the hue drifts, and the field inside stays opaque and readable. It fades in after mount instead of popping, so the surface wakes up rather than switching on.

When to use it

The one input a page is about — a prompt composer, a search field, a waitlist form — when it should look alive while idle.

Things to watch

One shared rAF loop drives every instance and an IntersectionObserver pauses it off-screen. Reduced motion keeps the layers lit but frozen. `tone` is a prop, not theme-aware: set it to `light` on light pages.

Implementation clues

  • mask padding
  • hue-rotate
  • IntersectionObserver pause
  • inner / outside variant