Spaces:
Building
Building
| "use client"; | |
| import { useEffect, useState } from "react"; | |
| import { cn } from "@/utils/cn"; | |
| const asciiPatterns = [ | |
| `· · · · · · · · · · · · · · · · · · · · | |
| · · · · · · · · · · · · · · · · · · · | |
| · · · · · · · · · · · · · · · · · · · · | |
| · · · · · · · · · · · · · · · · · · · | |
| · · · · · · · · · · · · · · · · · · · ·`, | |
| `· · · · · · · · · · · · · · · · · · · · | |
| · · · · ▪ · · · · · · · · ▪ · · · · · | |
| · · · · · · · · · · · · · · · · · · · · | |
| · · · · · · · · · · · · · · · · · · · | |
| · · · · ▪ · · · · · · · · ▪ · · · · · ·`, | |
| `· · · · · · · · · · · · · · · · · · · · | |
| · · · ▪ ▄ ▪ · · · · · · ▪ ▄ ▪ · · · · | |
| · · · · ▪ · · · · · · · · ▪ · · · · · · | |
| · · · · · · · · · · · · · · · · · · · | |
| · · · ▪ ▄ ▪ · · · · · · ▪ ▄ ▪ · · · · ·`, | |
| `· · · · · · · · · · · · · · · · · · · · | |
| · · ▪ ▄ █ ▄ ▪ · · · · ▪ ▄ █ ▄ ▪ · · · | |
| · · · ▪ ▄ ▪ · · · · · · ▪ ▄ ▪ · · · · · | |
| · · · ▪ · · · · · · · · · ▪ · · · · · | |
| · · ▪ ▄ █ ▄ ▪ · · · · ▪ ▄ █ ▄ ▪ · · · ·`, | |
| ]; | |
| interface AsciiBackgroundProps { | |
| className?: string; | |
| variant?: "dots" | "grid" | "flame"; | |
| } | |
| export function AsciiBackground({ | |
| className, | |
| variant = "dots", | |
| }: AsciiBackgroundProps) { | |
| const [frameIndex, setFrameIndex] = useState(0); | |
| useEffect(() => { | |
| const interval = setInterval(() => { | |
| setFrameIndex((prev) => (prev + 1) % asciiPatterns.length); | |
| }, 2000); | |
| return () => clearInterval(interval); | |
| }, []); | |
| return ( | |
| <div | |
| className={cn( | |
| "absolute inset-0 pointer-events-none select-none overflow-hidden", | |
| className, | |
| )} | |
| > | |
| <pre className="text-heat-100/3 font-mono text-[10px] leading-tight whitespace-pre absolute top-0 left-0 w-full h-full flex items-center justify-center"> | |
| {asciiPatterns[frameIndex]} | |
| </pre> | |
| </div> | |
| ); | |
| } | |