1import { Button } from "@/components/ui/button";
2import { MatrixBackground } from "@/registry/ui/matrix-background";
3
4export const MatrixBackgroundExample = () => {
5  return (
6    <div className="relative min-h-[500px] w-full overflow-hidden rounded-xl border border-border">
7      <MatrixBackground speed="fast" opacity="vivid" density="high">
8        <div className="flex h-full flex-col items-center justify-center gap-4 p-10 text-sm text-muted-foreground">
9          <h1 className="text-4xl font-bold text-primary">Matrix Background</h1>
10          <p className="max-w-md text-center text-sm text-muted-foreground">
11            A decorative animated matrix background with falling glyphs. Drop-in
12            overlay layer — pass children to render content on top.
13          </p>
14          <Button>
15            <span>Click me</span>
16          </Button>
17        </div>
18      </MatrixBackground>
19    </div>
20  );
21};