# MosaicGlow

> Canvas mosaic of small tiles on a dark surface where a soft halo follows the cursor with a lag, lighting tiles to random gold intensities that decay into a comet trail, with an additive bloom over the gaps, a glassy per-tile highlight, ambient flicker and an autonomous drift when idle.

- Package: `fancy-ui-vue` (Vue 3.5+ + Tailwind CSS v4)
- Category: Backgrounds
- Tags: canvas, grid, mosaic, glow, cursor, halo, trail, background, interactive
- Types: `MosaicGlowProps`, `MosaicGlowIdle`
- Docs: https://fancy-ui.rama.app/docs/components/mosaic-glow
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/vue/src/components/mosaic-glow

## Import

```vue
<script setup lang="ts">
import { MosaicGlow } 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 |
| --- | --- | --- | --- |
| `hdr` | `boolean` | `true` | On a display that reports HDR, adds the light above SDR white in a WebGPU layer with extended tone mapping: the hottest tiles peak around 1000 nits and the halo gets a hot core. Elsewhere nothing starts and the mosaic is unchanged |
| `tileSize` | `number` | `18` | Tile edge in CSS px |
| `gap` | `number` | `2` | Gap between tiles in CSS px |
| `color` | `string` | `"#f2c318"` | Halo and tile colour, hex or rgb() |
| `background` | `string` | `"#0a0a0a"` | Surface colour behind the tiles, hex or rgb() |
| `radius` | `number` | `170` | Halo radius in CSS px |
| `intensity` | `number` | `1` | Overall brightness of lit tiles, 0 to 1 |
| `trail` | `number` | `0.6` | How long lit tiles linger after the halo moves on, 0 to 1 |
| `smoothing` | `number` | `0.15` | Pointer lag, 0 (instant) to 1 (very laggy) |
| `noise` | `number` | `0.7` | Spread of per-tile random brightness inside the halo, 0 to 1 |
| `ambient` | `number` | `0.35` | Visibility of the random faint tiles outside the halo, 0 to 1 |
| `flicker` | `boolean` | `true` | Slowly re-roll the faint tiles over time |
| `idle` | `"drift" \| "none"` | `"drift"` | With no pointer for 1.5s: drift wanders the halo on a slow path, none switches it off |
| `interactive` | `boolean` | `true` | Follow the pointer. Off leaves only the idle behaviour |
| `seed` | `number` | `1` | Seed for the per-tile randomness; same seed, same mosaic |
| `ref` | `HTMLDivElement \| null` | `null` | Bindable host element |
| `class` | `string` | — | Additional classes on the host |

## Slots

| Slot | Description |
| --- | --- |
| `#default` (Svelte `children`) | Content rendered above the canvas; give the host a height |

## 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/mosaic-glow.md.