Matrix code rain

A fully customizable Matrix code rain animation with a settings menu that lets you change the font size speed density and color of the falling code. Smooth flowing and perfect for adding a hacker style background or animated visual to any project.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Matrix code rain to your project and fits it to your theme.

import Component from "@/components/ui/matrix-code-rain";

const settings = {
  fontSize: 14,
  speed: 0.4,
  density: 1,
  textColor: "#00FF41",
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <Component {...s} />
    </div>
  );
}