Beam
Animated border shell — rotating edge, traveling line, or pulse glow around a child Surface.
Beam paints continuous motion around a child — a featured promo, a secondary CTA, or an empty-state icon. The root is a transparent Surface that only sets radius; nest the real card as a child Surface with radius="auto" so both share one corner curve.
Pick the motion family with variant: a spinning border, a traveling line along the bottom, or a breathing pulse inside or outside the shell. Theme color, plus optional duration and strength knobs, keep the accent loud or quiet. Prefer Beam for rare focal moments; pointer-following highlights belong on Glow.
Off-screen beams pause so background tabs do not keep spinning. fitContent shrink-wraps the shell when the card should not stretch full width.
Performance cost
Beam keeps continuous motion on screen and can be heavy on CPU and memory. Prefer one focal instance per view. Do not wrap every card in a grid — reserve it for a single hero or CTA moment.
When to use
- One featured card or CTA that should draw the eye without changing layout
- A quiet empty-state mark that needs a soft breathing accent
- Continuous spin, travel, or pulse — not a pointer-driven rim
When not to use
- Pointer-following border highlight → Glow
- Loading shimmer on static copy → Shimmer
- Decorating every card in a dense grid (pick one focal Beam instead)
Related
- Glow — pointer-driven rim highlight
- Surface — shell and nested card radius
- Shimmer — moving highlight across text
Common examples
Featured border
A rotating colorful border is the usual Beam composition. fitContent keeps the shell tight to the card; radius="auto" on the inner Surface matches the Beam corners.
size="s" tightens the border beam for compact chrome; other variants ignore size.
Line under a CTA
Wrap only the secondary action when a traveling bottom edge should call attention without a full border spin.
Pulse accent
pulse-outside breathes a bloom around the child — useful for empty-state icons and quiet focal marks. pulse-inside keeps the bloom clipped to the shell.
Beam is decorative only — accessible names and status live on the content inside, not on the shell.
Ask your agent
Highlight the featured promo card with an animated border glow. Keep the card copy and padding unchanged — the effect should hug the card, not overpower it on small screens.Last updated on