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
Mo
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
Backgrounds Stable