Animated Border
Луч света, бегущий по рамке. Pro · Эффекты › Рамки, текст и числа
Установка
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';Пропсы
| 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. |
Похожие компоненты
- Shimmer Text — Блик, скользящий по тексту
- Text Reveal — Появление текста по словам и печатная машинка
- Number Ticker — Анимированный счётчик с форматированием Intl
- Marquee — Бесконечная бегущая строка логотипов и отзывов
- Glass Lens — Стеклянная линза с настоящим преломлением
- Morphing Capsule — Капсула, перетекающая между состояниями
- Floating Tab Bar — Плавающая стеклянная панель вкладок
- Aurora Background — Медленное северное сияние за контентом
- Gradient Background — Медленно перетекающий градиент
- Bubble Background — Мягкие цветные пузыри, один следует за курсором
- Stars Background — Звёздное небо с параллаксом за курсором
- Hexagon Background — Сетка шестиугольников со светящимся следом
Назад: Particles · Далее: Shimmer Text · Весь раздел «Эффекты»