✨ Give us a star on GitHub Help us grow by starring the project and sharing your feedback.

Getting Started

Templates

Mockups

Components

Special Animations

Buttons

Text Animations

Backgrounds

Hacker Background

A Matrix-style falling characters background animation component

import { HackerBackground } from "@/registry/eldoraui/hacker-background"

export function HackerBackgroundDemo() {
  return (
    <div className="bg-background relative z-10 h-[500px] w-full overflow-hidden rounded-lg border">
      <HackerBackground />
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/hacker-background

Customization Example

"use client"

import { HackerBackground } from "@/registry/eldoraui/hacker-background"

export function HackerBackgroundDemo2() {
  return (
    <div className="bg-background relative z-10 h-[500px] w-full overflow-hidden rounded-lg border">
      <HackerBackground
        color="#22d3ee"
        fontSize={8}
        speed={1.5}
        className="opacity-80"
      />
    </div>
  )
}

Usage

import { HackerBackground } from "@/components/eldoraui/hacker-background"

<HackerBackground color="#0F0" fontSize={14} speed={1} />

<HackerBackground
  color="#22d3ee"
  fontSize={18}
  speed={2.5}
  className="opacity-80"
/>

Props

Prop	Type	Default	Description
`color`	`string`	`"#0F0"`	Color of the falling characters (hex color)
`fontSize`	`number`	`14`	Size of the characters in pixels
`speed`	`number`	`1`	Speed multiplier for character falling animation
`className`	`string`	`""`	Additional CSS classes to apply to the canvas

Grid Integrations

On This Page

Customization Example

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Trusted by 1,000+ developers