Matrix Rain Background

Create a mesmerizing matrix rain effect in your application with customizable columns, speed, character density, and opacity animations for a dynamic visual experience.

Overview

The Matrix Rain Background component creates an engaging and dynamic rain effect using customizable characters. Inspired by the iconic Matrix movie, this component adds a visually appealing background effect to your application.

It allows you to control the number of columns, the speed of the falling characters, the density of characters in each column, and opacity animations, enhancing the visual appeal of your application.

Preview

Z G J C T H J T R C I 3 E F H 5 O 8 Z I

N Y 7 T R O A 2 E 4 F 0 F O N Y 5 D 2 M

1 c % # 4 # a $ c $ @ 3 4 @ 2 # % 2 3 a

I D R F L 8 D Q H D Y 8 T V Z D D V 7 V

a 4 # 5 2 b 2 b # a b ! 5 d 5 4 $ 2 a 4

@ $ 2 b # d @ # b # 3 5 $ @ @ 3 % 2 5 #

b 3 b b 4 @ 2 a c d a 1 # c $ b 1 e 3 d

2 c b c e ! $ a b a 3 % d % @ a c % c b

H G H G G P P H 9 4 H V A G 2 X C P B 7

ﾓﾎｴﾅﾒｴﾆｴﾐｷｾｰｴｵﾍﾊﾅｷﾅｻ

ﾘﾐｻﾎﾈﾆﾇﾂﾇｷﾗｳｴｷｾﾂﾐｽﾍﾐ

Z K T 0 J M T H T X R X E D U 3 4 F M Z

! 3 b d b 4 % c 4 a # 4 % % e @ 5 3 b @

ｾﾗｼﾍｴﾎ日ﾍﾍﾑ日ﾆﾑﾕﾀﾓｱﾕﾊｹ

N A N O P 2 E 8 8 U D G Q A Q T G N G D

ｻﾊｷﾎﾂﾕﾋｶｵﾓﾕｾｽｽｼﾀﾋｹﾆｷ

$ b 2 d $ 1 5 c d 2 % d 3 5 3 d b 3 b %

ｴｷｵﾜｶｶﾅｼｷｽﾗﾂﾘﾇﾘﾃｹﾀｼﾕ

ｼｱﾈﾎﾓ日ﾋｱﾀﾘｶﾗｹｴｶﾘｵﾓｴｷ

4 W V 9 9 2 C E N V W 1 J 3 V P 8 5 5 O

e % % @ c ! e % @ e # $ 5 @ @ 1 b a # 2

E R 3 E Q J G 7 2 6 S 0 2 L I C P V J W

E 4 B H X E K U 3 U F 3 Q N E W V V S T

! 4 # 5 d 3 1 a 2 d 5 % e 5 b 5 5 @ 3 a

2 9 Q G 3 R X Q Q P Z 2 P C A L J D G S

ﾎﾒﾅﾊﾘﾇﾘﾘﾆｷｴｹｻｶﾆﾘﾜｵﾎﾎ

5 2 V 0 Q U E E B I G T M 2 U 7 R Y S E

3 a a ! # a d a 5 d ! @ 5 5 b # 3 e d e

O G O D C L 6 5 9 G A 8 T U J G C K U I

ｾﾃﾐｵﾐﾘｳﾒﾕﾂ日ｼﾇｽｹﾏﾆﾏｵｳ

Usage

'use client'
 
import { MatrixRainBackground } from '@/components/background/matrix-rain-background'
 
<div className="relative h-[496px] w-full overflow-hidden rounded-lg border bg-background">
  <MatrixRainBackground />
</div>

Code

'use client'
 
import { motion } from 'motion/react'
 
import { cn } from '@/lib/utils'
 
interface MatrixRainBackgroundProps {
  numColumns?: number
  numCharacters?: number
  minSpeed?: number
  maxSpeed?: number
  className?: string
}
 
const characterSets = [
  '日ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍ',
  'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',
  'abcde12345!@#$%',
]
 
export const MatrixRainBackground = ({
  numColumns = 30,
  numCharacters = 20,
  minSpeed = 0.5,
  maxSpeed = 2.0,
  className,
}: MatrixRainBackgroundProps) => {
  function getRandomCharacters(length = numCharacters) {
    const selectedSet =
      characterSets[Math.floor(Math.random() * characterSets.length)]
    return Array.from({ length }).map(
      () => selectedSet[Math.floor(Math.random() * selectedSet.length)]
    )
  }
 
  const columns = Array.from({ length: numColumns }).map((_, i) => ({
    id: i,
    chars: getRandomCharacters(),
    speed: minSpeed + Math.random() * (maxSpeed - minSpeed),
  }))
 
  return (
    <div
      className={cn(
        'absolute inset-0 overflow-hidden bg-black font-mono',
        className
      )}
    >
      {columns.map((column) => (
        <motion.div
          key={column.id}
          className="absolute whitespace-pre p-2 text-green-500 text-opacity-50"
          style={{ left: `${(column.id / columns.length) * 100}%` }}
          animate={{
            y: ['0%', '100%'],
            opacity: [0, 1, 0],
          }}
          transition={{
            duration: column.speed * 10,
            repeat: Infinity,
            ease: 'linear',
          }}
        >
          {column.chars.join('\n')}
        </motion.div>
      ))}
    </div>
  )
}

Props

Prop	Type	Default
`numColumns`	`number`	`30`
`numCharacters`	`number`	`20`
`minSpeed`	`number`	`0.5`
`maxSpeed`	`number`	`2.0`
`className`	`string`	-