# 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.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Backgrounds
- Tags: background, grid, canvas, animation, pattern
- Docs: https://fancy-ui.rama.app/docs/components/flickering-grid
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/flickering-grid

## Import

```svelte
<script lang="ts">
  import { FlickeringGrid } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { FlickeringGrid } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `squareSize` | `number` | `4` | Size of each grid square in pixels |
| `gridGap` | `number` | `6` | Gap between squares in pixels |
| `flickerChance` | `number` | `0.3` | Probability of a square changing opacity each second (0-1) |
| `color` | `string` | `"#000000"` | Color of the squares (hex format) |
| `maxOpacity` | `number` | `0.3` | Maximum opacity of squares (0-1) |
| `width` | `number` | — | Fixed width in pixels (defaults to container width) |
| `height` | `number` | — | Fixed height in pixels (defaults to container height) |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { FlickeringGrid } from "fancy-ui-svelte";
</script>

<div class="bg-background mx-auto h-64 w-full max-w-md overflow-hidden rounded-xl border">
	<FlickeringGrid />
</div>
```

### Custom Colors

```svelte
<script lang="ts">
	import { FlickeringGrid } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap justify-center gap-6">
	<div class="bg-background h-48 w-56 overflow-hidden rounded-xl border">
		<FlickeringGrid color="#6366f1" maxOpacity={0.5} />
	</div>
	<div class="bg-background h-48 w-56 overflow-hidden rounded-xl border">
		<FlickeringGrid color="#ef4444" maxOpacity={0.4} />
	</div>
	<div class="bg-background h-48 w-56 overflow-hidden rounded-xl border">
		<FlickeringGrid color="#22c55e" maxOpacity={0.4} />
	</div>
</div>
```

### Grid Size Variations

```svelte
<script lang="ts">
	import { FlickeringGrid } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap justify-center gap-6">
	<div class="bg-background h-48 w-56 overflow-hidden rounded-xl border">
		<FlickeringGrid squareSize={2} gridGap={2} maxOpacity={0.4} />
	</div>
	<div class="bg-background h-48 w-56 overflow-hidden rounded-xl border">
		<FlickeringGrid squareSize={8} gridGap={4} maxOpacity={0.3} />
	</div>
</div>
```

### Interactive Playground

```svelte
<script lang="ts">
	import { FlickeringGrid } from "fancy-ui-svelte";
	import PropsPlayground from "$lib/components/PropsPlayground.svelte";
</script>

<PropsPlayground
	controls={[
		{ key: "color", type: "color", label: "Color" },
		{ key: "flickerChance", type: "range", label: "Flicker Chance", min: 0.01, max: 1, step: 0.01 },
		{ key: "maxOpacity", type: "range", label: "Max Opacity", min: 0.05, max: 1, step: 0.05 },
		{ key: "squareSize", type: "range", label: "Square Size", min: 1, max: 20, step: 1 },
		{ key: "gridGap", type: "range", label: "Grid Gap", min: 1, max: 20, step: 1 },
	]}
	initialValues={{
		color: "#000000",
		flickerChance: 0.3,
		maxOpacity: 0.3,
		squareSize: 4,
		gridGap: 6,
	}}
>
	{#snippet preview(values)}
		<div class="bg-background mx-auto h-64 w-full max-w-md overflow-hidden rounded-xl border">
			<FlickeringGrid
				color={values.color as string}
				flickerChance={values.flickerChance as number}
				maxOpacity={values.maxOpacity as number}
				squareSize={values.squareSize as number}
				gridGap={values.gridGap as number}
			/>
		</div>
	{/snippet}
</PropsPlayground>
```