Backgrounds Fancy Stable
MatrixRain
Canvas-based falling glyph rain with configurable color, speed, and density
Preview
svelte
<script lang="ts">
import { MatrixRain } from 'fancy-ui-svelte';
</script>
<MatrixRain color="#00ff00" />Installation
pnpm add fancy-ui-svelte
import { MatrixRain } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { MatrixRain } from 'fancy-ui-svelte';
</script>
<MatrixRain />Examples
Basic Usage
svelte
<script lang="ts">
import { MatrixRain } from "$lib/fancy-ui/matrix-rain";
</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 "$lib/fancy-ui/matrix-rain";
import { TerminalText } from "$lib/fancy-ui/terminal-text";
</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 "$lib/fancy-ui/matrix-rain";
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>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 |
Links
Related components
Fa
FallingStarsBg
Canvas-based 3D starfield with perspective projection, motion trails, and glow
Backgrounds Stable
Fl
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 Stable
Sp
Sparkles
Canvas-based floating particle sparkle effect with configurable density and colors
Backgrounds Stable