Docs/Matrix 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

Usage

API Reference

PropTypeDefault
variantPreset theme for the rain effect.
"default" | "cyan" | "rainbow""default"
fixedColorOverride the text color with a specific hex color.
string—
speedAnimation interval in ms. Lower is faster.
number50
fontSizeSize of the characters in pixels.
number16

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

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

Have any questions?
Contact on@harshjdhv

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>