DocsMatrix Rain

Matrix Rain

A classic digital rain animation effect consisting of falling characters. Customizable colors, speed, and size. Perfect for hacker themes, sci-fi UIs, or just looking cool.

Installation

pnpm dlx shadcn@latest add @componentry/matrix-rain

Dependencies: clsx tailwind-merge

Usage

API Reference

PropTypeDefault
variant"default" | "cyan" | "rainbow"

Preset theme for the rain effect.

"default"
fixedColorstring

Override the text color with a specific hex color.

—
speednumber

Animation interval in ms. Lower is faster.

50
fontSizenumber

Size of the characters in pixels.

16

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousMagnet LinesNextPixel Canvas

MATRIX

import { MatrixRain } from "@/components/ui/matrix-rain"
 
<div className="relative flex h-[300px] w-full items-center justify-center overflow-hidden rounded-lg border bg-background">
  <MatrixRain />
  <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
    <h1 className="text-4xl font-bold text-foreground tracking-wider">
      MATRIX
    </h1>
  </div>
</div>