Neon Crystal City

import React, { useState } from 'react';
import NeonCrystalCity from "@/components/ui/neon-crystal-city";

export default function DemoOne() {
  const [started, setStarted] = useState(false);

  const handleInteract = () => {
    if (!started) setStarted(true);
  };

  return (
    <div
      className="app-container"
      onMouseMove={handleInteract}
      onTouchStart={handleInteract}
    >
      {!started && (
        <div className="info-overlay">
          <h2 className="text-3xl font-bold text-white">
            Neon Crystal City
          </h2>
          <p className="mt-2 text-sm text-white/80">
            Move your pointer to look around
          </p>
        </div>
      )}

      <NeonCrystalCity
        cameraSpeed={5}
        tileSize={2}
        unionK={0.5}
        maxSteps={100}
        maxDist={100}
        surfDist={0.001}
      />

      {started && (
        <div className="absolute bottom-4 left-4 text-sm text-muted-foreground pointer-events-none">
          speed: 5 • tile: 2
        </div>
      )}
    </div>
  );
}