EdgeBeam

On a pill

The studio's glows (the composer's) at its strength. A turn takes 3.5s.

import { EdgeBeam, STUDIO_GLOW, studioGlows } from "@/components/shared/edge-beam";

<EdgeBeam glows={studioGlows()} opacity={STUDIO_GLOW}>
  <div className="border-ink/10 rounded-2xl border bg-white px-4 py-4 text-sm">
    Book, move, or ask
  </div>
</EdgeBeam>

How it moves

A square window, wider than the pill's diagonal, turns with a conic mask on it; the glows inside turn back the other way, so they hold still and only the window moves. Two rotations: nothing is restyled or repainted per frame, where animating the mask's angle (a custom property) restyled the pill every frame.

Guidelines

• Glows hug the edges: soft spots on an edge, none in the middle.
• Off under reduced motion: the wearer leaves it out.
• One or two on screen; each is two layers the size of its pill.

API reference