Neon Crystal City

Heroes 107

About

A one-liner that captures what it is and why it’s cool. e.g. “An infinite ray-marched 3D cityscape with neon glow and mouse-controlled camera.”

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Neon Crystal City to your project and fits it to your theme.

Code

How Neon Crystal City is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}