Hugging Face's logo

Spaces:
AUXteam
/
Paper2Code
Running

App Files Community
Paper2Code
File size: 2,584 Bytes
d530f14
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
"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>
  );
}