# PulseBeam

> Breathing border glow that wraps any card: colour blobs drift along the edges as a crisp 1px ring, a feathered inner glow and a blurred bloom, with slow hue rotation, fade in/out on an active flag, four palettes and an outside halo variant.

- Package: `fancy-ui-vue` (Vue 3.5+ + Tailwind CSS v4)
- Category: Effects
- Tags: border, glow, pulse, gradient, mask, animation, ai, loading
- Types: `PulseBeamProps`, `PulseBeamPalette`, `PulseBeamTone`, `PulseBeamVariant`
- Docs: https://fancy-ui.rama.app/docs/components/pulse-beam
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/vue/src/components/pulse-beam

## Import

```vue
<script setup lang="ts">
import { PulseBeam } from 'fancy-ui-vue';
</script>
```

Setup (once per project): `npm install fancy-ui-vue`, then put these lines in your main CSS file (the stylesheet imports go right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-vue/tailwind.css";
@import "fancy-ui-vue/styles.css";
```

Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in a Vue template; when one differs from the Svelte name, the Svelte name follows in parentheses. Snippets become named slots (`#default` is the default snippet), a prop the Vue port declares as a model is a `v-model:<name>` (except `ref`, exposed via `defineExpose({ ref })`: put a template ref on the component and read `.ref`) and callbacks are listeners (`onclick` is `@click`). Every component sets `inheritAttrs: false`: `class` is a declared prop, merged where the Svelte component applies it (not always the root element), and only when the props table below lists it; other attributes do not fall through unless the package README lists the component as forwarding native attributes. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/vue#divergences-from-the-svelte-api

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean` | `true` | Show the glow. Turning it off fades out over 500ms and stops the animation loop; turning it on fades in over 600ms |
| `variant` | `"inner" \| "outside"` | `"inner"` | inner paints a 1px ring, a 28px feather and a bloom inside the box; outside keeps the ring and adds a blurred halo behind the content |
| `palette` | `"colorful" \| "mono" \| "ocean" \| "sunset"` | `"colorful"` | Built-in nine-slot colour set. mono halves the opacities and disables hue drift |
| `colors` | `string[]` | — | Up to nine CSS colours overriding the palette slots in order |
| `strength` | `number` | `1` | Overall intensity, 0 to 1 |
| `radius` | `number` | `16` | Corner radius in px applied to the wrapper and every layer |
| `speed` | `number` | `1` | Multiplier for the breathing and drift periods |
| `tone` | `"dark" \| "light"` | `"dark"` | Opacity, brightness and saturation preset for the surface the card sits on |
| `hueShift` | `boolean` | `true` | Slowly rotate all hues over a 14 to 16 second cycle |
| `brightness` | `number` | — | Override the preset brightness filter |
| `saturation` | `number` | — | Override the preset saturation filter |
| `@fade-in` (Svelte `onfadein`) | `() => void` | — | Called once the fade-in has completed |
| `@fade-out` (Svelte `onfadeout`) | `() => void` | — | Called once the fade-out has completed and the loop has stopped |
| `ref` | `HTMLDivElement \| null` | `null` | Bindable wrapper element |
| `class` | `string` | — | Additional classes on the wrapper |

## Slots

| Slot | Description |
| --- | --- |
| `#default` (Svelte `children`) | Content the glow wraps; give it an opaque background and the same radius |

## Example

No Vue example is published for this component yet: start from the import above and the props table. The full examples are Svelte-only, on https://fancy-ui.rama.app/docs/components/pulse-beam.md.