← All components
Motion / effect
Border Beam
Travelling light and breathing halos for real cards, inputs, buttons and search. Five geometries, eight palettes, four complete contexts.
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Four original complete contexts preserve the full Libraries.dev MIT-licensed border-beam optical engine, including all five rotating/line/pulse geometries, eight palettes, mask layers and oscillator definitions.
- Primitive usage supplies an opaque native button; Complete provides the selected card/input/button/search composition. Controlled drives active from actual input focus or an explicit local task. Advanced demonstrates typed authored colors, three layer-opacity variables and actual fade-completion callbacks.
- Search operates only on a disclosed local four-item sample. Enter submits your original query once. It does not call an AI service or send the query anywhere. Card Save, input draft and button action state stay local.
- Family Replay resets only continuous owned beam animations and the owned pulse pose. It preserves local drafts/results, caller animations and fade callbacks. onActivate/onDeactivate signal real fade completions; Replay does not repeat them.
- Scene Auto follows the enclosing preview surface. Primitive Auto follows prefers-color-scheme. Explicit themes always win. Geometry radius and the native child radius remain aligned.
- Pulse Outside requires an opaque child and an unclipped ancestor; complete examples reserve room for its full halo. Pulse Inner keeps its light inside the border. Decorative layers never intercept native actions or focus.
- Default durations are 1.96s for rotating beams, 3.1s for line and 2.3s for pulse. The editor supplies explicit scene durations. Pause/hidden/offscreen/reduced-motion retain a settled border; pulse paints are capped near 30Hz.
- The css prop uses the original {id} placeholder for instance-scoped typed authoring. No arbitrary executable CSS/code editor is added to catalog controls. style retains native CSSProperties. Modern CSS masks and @property are required.
React 19.2Modern browsers
Libraries.dev — Jakub Antalik · MIT. See bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | ReactNode | undefined | BorderBeam: Content to wrap with the border beam effect |
paused | boolean | false | BorderBeam: Freeze decorative animation while preserving content. |
replayToken | number | 0 | BorderBeam: Change to restart the effect. |
size | BorderBeamSize | 'md' | BorderBeam: Size/type preset Rotate family: 'sm' (compact), 'md' (full border, default), 'line' (bottom traveling). Pulse family: 'pulse-outside' (outward bloom), 'pulse-inner' (contained breathe). |
colorVariant | BorderBeamColorVariant | 'colorful' | BorderBeam: Eight full palettes: colorful, mono, ocean, sunset, forest, candy, ice and gold. Defaults to colorful. |
theme | BorderBeamTheme | 'dark' | BorderBeam: Theme mode - adapts beam/glow colors for dark or light backgrounds 'auto' detects system preference via prefers-color-scheme |
staticColors | boolean | false | BorderBeam: Disable the hue-shift animation for static colors (e.g., monochrome) |
duration | number | 1.96s rotating; 3.1s line; 2.3s pulse | BorderBeam: Rotation/travel duration in seconds |
active | boolean | true | BorderBeam: Whether the animation is active |
borderRadius | number | undefined | BorderBeam: Custom border radius in pixels. When omitted, the component auto-detects the border-radius of the first child element. Falls back to the size preset default if detection fails. |
brightness | number | 1.3 | BorderBeam: Brightness multiplier for the glow effect. Falls back to the type's preset default (1.3 for most types). |
saturation | number | 1.2 for dark, varies for light | BorderBeam: Saturation multiplier for the glow effect |
glowSize | number | 1 | BorderBeam: Multiplies the blur radius of every glow layer, so the halo reads tighter (< 1) or wider and softer (> 1). Each layer keeps its own tuned proportion — the core stays tighter than the bloom — because this scales the presets rather than replacing them. |
hueRange | number | 30 | BorderBeam: Hue rotation range in degrees for the hue-shift animation |
strength | number | 1 | BorderBeam: Overall strength/opacity of the effect (0-1). Only affects the beam, glow, and bloom layers -- not the children. |
className | string | undefined | BorderBeam: Additional class name for the container |
style | CSSProperties | undefined | BorderBeam: Additional inline styles for the container |
css | string | undefined | BorderBeam: Extra CSS appended after the beam's own generated stylesheet, so it can override or add layers and keyframes. Write `{id}` wherever the instance id belongs — the root is `[data-beam="{id}"]`, its layers are the `::before` / `::after` pseudo-elements and `[data-beam-bloom]`, and keyframes are named `*-{id}` — and it is substituted per instance. |
onActivate | () => void | undefined | BorderBeam: Callback when fade-in animation completes |
onDeactivate | () => void | undefined | BorderBeam: Callback when fade-out animation completes |