Backgrounds Fancy Stable
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
Available for Svelte 5, React, and Vue 3.
Preview
svelte
<script lang="ts">
import { MosaicGlow } from "fancy-ui-svelte";
</script>
<MosaicGlow class="h-80 w-full rounded-2xl border border-white/10">
<div class="flex h-full flex-col items-center justify-center gap-2 text-center">
<h3 class="text-2xl font-semibold tracking-tight text-white">Something is glowing</h3>
<p class="text-sm text-white/60">Move your cursor across the tiles</p>
</div>
</MosaicGlow>Installation
pnpm add fancy-ui-svelte
import { MosaicGlow } from "fancy-ui-svelte";
Usage
svelte
<script lang="ts">
import { MosaicGlow } from "fancy-ui-svelte";
</script>
<MosaicGlow class="h-80 w-full rounded-2xl border border-white/10">
<div class="flex h-full flex-col items-center justify-center gap-2 text-center">
<h3 class="text-2xl font-semibold tracking-tight text-white">Something is glowing</h3>
<p class="text-sm text-white/60">Move your cursor across the tiles</p>
</div>
</MosaicGlow>Examples
Basic Usage
svelte
<script lang="ts">
import { MosaicGlow } from "$lib/fancy-ui/mosaic-glow";
</script>
<MosaicGlow class="h-80 w-full rounded-2xl border border-white/10">
<div class="flex h-full flex-col items-center justify-center gap-2 text-center">
<h3 class="text-2xl font-semibold tracking-tight text-white">Something is glowing</h3>
<p class="text-sm text-white/60">Move your cursor across the tiles</p>
</div>
</MosaicGlow>Colors
Any hex or rgb() colour for the halo and the surface.
svelte
<script lang="ts">
import { MosaicGlow } from "$lib/fancy-ui/mosaic-glow";
</script>
<div class="grid w-full gap-4 sm:grid-cols-3">
<MosaicGlow class="h-48 rounded-xl" seed={2} />
<MosaicGlow class="h-48 rounded-xl" color="#22d3ee" background="#04101a" seed={3} />
<MosaicGlow class="h-48 rounded-xl" color="#f472b6" background="#120812" seed={4} />
</div>Dense Grid
Smaller tiles for a finer mosaic.
svelte
<script lang="ts">
import { MosaicGlow } from "$lib/fancy-ui/mosaic-glow";
</script>
<MosaicGlow class="h-72 w-full rounded-2xl" tileSize={8} gap={1} radius={120} noise={0.85} />Trail and Idle
A short, cursor-only trail versus a long comet that keeps drifting.
svelte
<script lang="ts">
import { MosaicGlow } from "$lib/fancy-ui/mosaic-glow";
</script>
<div class="grid w-full gap-4 sm:grid-cols-2">
<MosaicGlow class="h-64 rounded-xl" trail={0.15} smoothing={0} idle="none">
<p class="p-4 text-xs text-white/50">trail 0.15 · idle none</p>
</MosaicGlow>
<MosaicGlow class="h-64 rounded-xl" trail={0.95} smoothing={0.4} seed={7}>
<p class="p-4 text-xs text-white/50">trail 0.95 · smoothing 0.4 · drifts when idle</p>
</MosaicGlow>
</div>Interactive Playground
svelte
<script lang="ts">
import { MosaicGlow, type MosaicGlowIdle } from "$lib/fancy-ui/mosaic-glow";
import PropsPlayground from "$lib/components/PropsPlayground.svelte";
</script>
<PropsPlayground
controls={[
{ key: "color", type: "color", label: "Color" },
{ key: "background", type: "color", label: "Background" },
{ key: "tileSize", type: "range", label: "Tile Size", min: 4, max: 32, step: 1 },
{ key: "gap", type: "range", label: "Gap", min: 0, max: 6, step: 1 },
{ key: "radius", type: "range", label: "Radius", min: 60, max: 320, step: 10 },
{ key: "intensity", type: "range", label: "Intensity", min: 0, max: 1, step: 0.05 },
{ key: "trail", type: "range", label: "Trail", min: 0, max: 1, step: 0.05 },
{ key: "smoothing", type: "range", label: "Smoothing", min: 0, max: 1, step: 0.05 },
{ key: "noise", type: "range", label: "Noise", min: 0, max: 1, step: 0.05 },
{ key: "ambient", type: "range", label: "Ambient", min: 0, max: 1, step: 0.05 },
{ key: "flicker", type: "boolean", label: "Flicker" },
{
key: "idle",
type: "select",
label: "Idle",
options: [
{ value: "drift", label: "Drift" },
{ value: "none", label: "None" },
],
},
]}
initialValues={{
color: "#f2c318",
background: "#0a0a0a",
tileSize: 18,
gap: 2,
radius: 170,
intensity: 1,
trail: 0.6,
smoothing: 0.15,
noise: 0.7,
ambient: 0.35,
flicker: true,
idle: "drift",
}}
>
{#snippet preview(values)}
<MosaicGlow
class="h-72 w-full rounded-xl"
color={values.color as string}
background={values.background as string}
tileSize={values.tileSize as number}
gap={values.gap as number}
radius={values.radius as number}
intensity={values.intensity as number}
trail={values.trail as number}
smoothing={values.smoothing as number}
noise={values.noise as number}
ambient={values.ambient as number}
flicker={values.flicker as boolean}
idle={values.idle as MosaicGlowIdle}
/>
{/snippet}
</PropsPlayground>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 |
|---|---|
children | Content rendered above the canvas; give the host a height |
Links
Related components
FallingStarsBg
Canvas-based 3D starfield with perspective projection, motion trails, and glow
Backgrounds Fancy
FlickeringGrid
Canvas grid of squares that flicker in and out of opacity at random each frame, pausing automatically via IntersectionObserver when scrolled off-screen and resizing to fit its container via ResizeObserver
Backgrounds Fancy
MatrixRain
Canvas-based falling glyph rain with configurable color, speed, and density
Backgrounds Fancy