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

PropertyTypeDefault
variant

Preset theme for the rain effect.

"default" | "cyan" | "rainbow""default"
fixedColor

Override the text color with a specific hex color.

string—
speed

Animation interval in ms. Lower is faster.

number50
fontSize

Size of the characters in pixels.

number16

View source

Click the icon in the preview panel to browse source for each variant.

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

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>