# MatrixRain

> Canvas-based falling glyph rain with configurable color, speed, and density.

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

## Import

```svelte
<script lang="ts">
  import { MatrixRain } 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 { MatrixRain } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | `"#00ff41"` | Glyph color (classic terminal green) |
| `speed` | `number` | `1.0` | Fall speed multiplier (< 1 slower, > 1 faster) |
| `density` | `number` | `1.0` | Column density multiplier |
| `glyphSize` | `number` | `16` | Font size of each glyph in pixels |
| `fadeOpacity` | `number` | `0.05` | Opacity of the black overlay used to create trailing fade effect |

## Examples

### Basic Usage

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

<div class="h-64 overflow-hidden rounded-lg">
	<MatrixRain class="h-full w-full" />
</div>
```

### Composed Hero

Hero section with matrix rain background.

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

<div class="relative h-64 w-full overflow-hidden rounded-lg">
	<MatrixRain class="absolute inset-0 h-full w-full" />
	<div class="absolute inset-0 flex items-center justify-center">
		<div class="rounded-md bg-black/70 p-6 text-green-400 backdrop-blur-sm">
			<TerminalText
				lines={[
					"> initializing neural interface...",
					"> connecting to mainframe...",
					"> access granted. welcome, operator.",
					"> awaiting input_",
				]}
				speed={45}
			/>
		</div>
	</div>
</div>
```

### Interactive Playground

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

<PropsPlayground
	controls={[
		{ key: "color", type: "color", label: "Color" },
		{ key: "speed", type: "range", label: "Speed", min: 0.2, max: 4, step: 0.1 },
		{ key: "density", type: "range", label: "Density", min: 0.5, max: 3, step: 0.1 },
		{ key: "glyphSize", type: "range", label: "Glyph Size (px)", min: 8, max: 32, step: 2 },
		{ key: "fadeOpacity", type: "range", label: "Fade Opacity", min: 0.01, max: 0.3, step: 0.01 },
	]}
	initialValues={{
		color: "#00ff41",
		speed: 1.0,
		density: 1.0,
		glyphSize: 16,
		fadeOpacity: 0.05,
	}}
>
	{#snippet preview(values)}
		<div class="h-64 w-full overflow-hidden rounded-lg">
			<MatrixRain
				color={values.color as string}
				speed={values.speed as number}
				density={values.density as number}
				glyphSize={values.glyphSize as number}
				fadeOpacity={values.fadeOpacity as number}
			/>
		</div>
	{/snippet}
</PropsPlayground>
```