Animated Border
Light beam running around a border. Pro · Effects › Borders, text and numbers
Wraps any element — a "new" card, a call-to-action, a search field — with light travelling along its border. The light is a conic gradient rotated on the compositor and masked to a ring that sits exactly over the child's own border; the beam's turn is paced by the box's proportions, so it travels the edge at one speed on a wide card too. It pauses off screen and, with reduced motion, rests as a still highlight on one corner.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add animated-bordernpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { AnimatedBorder } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
variant | 'beam' | 'spectrum' | 'beam' | beam — a single light travelling around the edge; spectrum — a rotating multi-colour gradient border. |
duration | number | 6 | Seconds per lap. |
width | number | Border width, px. | |
radius | number | string | Corner radius of the wrapped element, so the light follows its shape. Default: the card radius. | |
glow | boolean | false | Soft light spilling outside the border. |
trigger | 'always' | 'hover' | 'focus' | 'always' | When the border lights up: always, while hovered or focused within, or only while focused within (fields). |
inline | boolean | false | Lay out inline, for buttons and chips. |
Related components
- Shimmer Text — Shine sweeping across text
- Text Reveal — Word-by-word reveal and typewriter text
- Number Ticker — Animated counter with Intl formatting
- Marquee — Endless scrolling row of logos and testimonials
- Glass Lens — Glass lens with real refraction
- Morphing Capsule — Capsule that flows between states
- Floating Tab Bar — Floating glass tab bar
- Aurora Background — Slow aurora behind your content
- Gradient Background — Slowly shifting gradient
- Bubble Background — Soft colored bubbles, one follows the cursor
- Stars Background — Starry sky with cursor parallax
- Hexagon Background — Hexagon grid with a glowing trail
Previous: Particles · Next: Shimmer Text · All Effects