Flux

Appearance

Border beam ​

This component adds a traveling or breathing glow animation around any element — cards, buttons, inputs or panes. The wrapped element is clipped to the beam's radius and three layers are rendered on top of it: the beam stroke, an inner glow and a soft bloom. Colors adapt to light and dark mode and slowly shift hue over time.

Introducing AI assist
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet assumenda beatae commodi culpa fugit laboriosam nihil quasi quibusdam veniam!

The beam pauses automatically when it is scrolled offscreen. The pulse variants are driven by a single shared animation loop that is capped at ~30fps and respect prefers-reduced-motion.

Props

active?: boolean
Whether the beam is playing. Toggling this fades the beam in and out.
Default: true

brightness?: number
Brightness multiplier for the glow effect. Defaults to a tuned value per variant and theme.

color-variant?: "colorful" | "mono" | "ocean" | "sunset"
The color palette of the beam.
Default: colorful

duration?: number
The animation cycle length in seconds.
Default: 1.96 (md / sm), 3.1 (line) or 2.3 (pulse)

hue-range?: number
Hue rotation range in degrees for the hue-shift animation.
Default: 30

radius?: number | string | undefined
The border radius of the beam. If none is given, the radius is inherited.
Default: undefined

saturation?: number
Saturation multiplier for the glow effect. Defaults to a tuned value per variant and theme.

static-colors?: boolean
Disables the hue-shift animation for static colors. The mono palette is always static.

strength?: number
Overall strength of the effect, between 0 and 1. Only affects the beam, glow and bloom layers, not the content.
Default: 1

variant?: "sm" | "md" | "line" | "pulse-inner" | "pulse-outside"
The size/type preset. The rotate family (sm, md) travels around the element, line travels along the bottom edge and the pulse family breathes without rotation.
Default: md

Emits

activate: []
Triggered when the fade-in animation completes.

deactivate: []
Triggered when the fade-out animation completes after the beam is deactivated.

Slots

default
The element that should receive the border beam.

Examples ​

Button

Use the compact sm variant on buttons to guide the user to important actions.

<template>
    <FluxBorderBeam variant="sm">
        <FluxSecondaryButton
            icon-leading="sparkles"
            label="Generate"/>
    </FluxBorderBeam>
</template>

<script
    lang="ts"
    setup>
    import { FluxBorderBeam, FluxSecondaryButton } from '@flux-ui/components';
</script>

Pane

Use the md variant on panes to highlight new or prominent features.

Manage even more
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet assumenda beatae commodi culpa fugit laboriosam nihil quasi quibusdam veniam! Cumque et fuga iste maxime officiis quas ratione repudiandae suscipit!
New

<template>
    <FluxBorderBeam>
        <FluxPane
            tag="New"
            style="max-width: 360px;">
            <FluxPaneHeader title="Manage even more"/>

            <FluxPaneBody>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet assumenda beatae commodi culpa fugit laboriosam nihil quasi quibusdam veniam! Cumque et fuga iste maxime officiis quas ratione repudiandae suscipit!
            </FluxPaneBody>

            <FluxPaneBody>
                <FluxSecondaryButton
                    icon-leading="gear"
                    label="Manage"/>
            </FluxPaneBody>
        </FluxPane>
    </FluxBorderBeam>
</template>

<script
    lang="ts"
    setup>
    import { FluxBorderBeam, FluxPane, FluxPaneBody, FluxPaneHeader, FluxSecondaryButton } from '@flux-ui/components';
</script>

Line

The line variant renders a traveling glow along the bottom edge, ideal for inputs and search bars.

<template>
    <FluxBorderBeam
        style="width: 320px;"
        variant="line">
        <FluxFormInput
            v-model="query"
            icon-leading="magnifying-glass"
            placeholder="Search anything..."/>
    </FluxBorderBeam>
</template>

<script
    lang="ts"
    setup>
    import { FluxBorderBeam, FluxFormInput } from '@flux-ui/components';
    import { ref } from 'vue';

    const query = ref('');
</script>

Pulse

The pulse variants breathe instead of rotate. Pulse-inner stays contained within the element, while pulse-outside blooms outward and requires an opaque child.

Pulse inner
A breathing glow that stays contained within the element.
Pulse outside
A breathing halo that blooms outward, behind the element. 

<template>
    <FluxBorderBeam variant="pulse-inner">
        <FluxPane style="width: 280px;">
            <FluxPaneHeader title="Pulse inner"/>

            <FluxPaneBody>
                A breathing glow that stays contained within the element.
            </FluxPaneBody>
        </FluxPane>
    </FluxBorderBeam>

    <FluxBorderBeam variant="pulse-outside">
        <FluxPane style="width: 280px;">
            <FluxPaneHeader title="Pulse outside"/>

            <FluxPaneBody>
                A breathing halo that blooms outward, behind the element.
            </FluxPaneBody>
        </FluxPane>
    </FluxBorderBeam>
</template>

<script
    lang="ts"
    setup>
    import { FluxBorderBeam, FluxPane, FluxPaneBody, FluxPaneHeader } from '@flux-ui/components';
</script>

Palettes

Four color palettes are available: colorful, mono, ocean and sunset.

<template>
    <FluxBorderBeam
        v-for="palette of palettes"
        :key="palette"
        :color-variant="palette"
        variant="sm">
        <FluxSecondaryButton :label="palette"/>
    </FluxBorderBeam>
</template>

<script
    lang="ts"
    setup>
    import { FluxBorderBeam, FluxSecondaryButton } from '@flux-ui/components';

    const palettes = ['colorful', 'mono', 'ocean', 'sunset'] as const;
</script>