ASCII Art

"use client";
import React, { useState } from "react";
import { AsciiArt } from "@/lab/aceternity/ui/ascii-art";

const STYLES = ["fade", "typewriter", "matrix"] as const;

export default function AsciiArtDemo() {
  // Each hover replays the reveal with the next animation style.
  const [run, setRun] = useState(0);
  return (
    <div
      className="flex h-full w-full items-center justify-center bg-neutral-950"
      onPointerEnter={() => setRun((r) => r + 1)}
    >
      <AsciiArt
        key={run}
        src="https://assets.aceternity.com/avatars/manu.webp"
        resolution={100}
        color="var(--color-neutral-500)"
        animationStyle={STYLES[run % STYLES.length]}
        animationDuration={1.5}
        animateOnView={false}
        className="aspect-square h-full max-w-full bg-neutral-950"
      />
    </div>
  );
}