mountainous shader

import React, { useState } from 'react';
import FractalMountains from "@/components/ui/mountainous-shader";

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

  const handleInteract = () => {
    setStarted(true);
  };

  return (
    <div
      className="relative w-screen h-screen bg-background text-foreground font-sans"
      onMouseMove={handleInteract}
      onTouchStart={handleInteract}
    >
      {!started && (
        <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-black/75 text-white p-4">
          <h2 className="text-3xl font-bold">Procedural Fractal Mountains</h2>
          <p className="mt-2 text-sm">Move to evolve the scene</p>
        </div>
      )}

      <FractalMountains speed={1} octaves={5} scale={2} />

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