BorderBeam
Animated border-travel beam with masked ring highlights, bloom, and line-trace presets
Playground
The docs theme toggle drives the preview, so the same controls show both dark and light mode.
Type
Color
Build anything...
svelte
<BorderBeam size="md" colorVariant="sunset" duration={1.96}>
<div class="surface">Content</div>
</BorderBeam>
<style>
.surface {
padding: var(--dry-padding-card);
border-radius: var(--dry-radius-card);
border: 1px solid var(--dry-color-stroke-weak);
background: var(--dry-color-bg-raised);
box-shadow: var(--dry-shadow-sm);
}
</style>Accessibility
- Treat the effect as decorative and keep underlying content understandable without color, blur, or motion alone.
- Respect reduced-motion and contrast requirements when animation or filtering is enabled.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { BorderBeam } from '@dryui/ui';
</script>
<BorderBeam>Content</BorderBeam>Import options
Root package
ts
import { BorderBeam } from '@dryui/ui'Per-component subpath
ts
import { BorderBeam } from '@dryui/ui/border-beam'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| size | smmdline | Effect mode preset: compact control ring (`sm`), full border glow (`md`), or bottom-edge line trace (`line`). | — | — | — |
| colorVariant | colorfulmonooceansunset | Beam palette preset matching the upstream colorful, mono, ocean, or sunset glow treatments. | — | — | — |
| theme | autolightdark | Color tuning for dark or light surfaces, or system preference when set to `auto`. | — | — | — |
| staticColors | boolean | — | — | — | — |
| duration | number | — | — | — | — |
| active | boolean | Whether the beam is currently glowing. Disabling it plays the fade-out sequence before the effect becomes idle. | — | — | — |
| borderRadius | number | string | Optional border radius override for the beam host. When omitted, the first child radius is detected automatically. | — | — | — |
| brightness | number | — | — | — | — |
| saturation | number | — | — | — | — |
| hueRange | number | — | — | — | — |
| strength | number | Intensity multiplier for the beam stroke, inner glow, and bloom layers. | — | — | — |
| onActivate | () => void | Callback fired after the beam fade-in animation completes. | — | — | — |
| onDeactivate | () => void | Callback fired after the beam fade-out animation completes. | — | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |