parallax Shader

import { useRef, useEffect, useState } from 'react';
import ParallaxShader from "@/components/ui/parallax-shader";

export default function DemoOne() {
  const [shift, setShift] = useState(0.0);

  return (
    <div className="relative w-screen h-screen bg-background text-foreground font-sans">
      {/* Interactive shader */}
      <ParallaxShader colorShift={shift} />

      {/* Slider controls */}
      <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex items-center gap-2 bg-black/40 px-4 py-2 rounded-lg pointer-events-auto">
        <label className="text-white text-sm">Color Shift</label>
        <input
          type="range"
          min="0"
          max="1"
          step="0.01"
          value={shift}
          onChange={(e) => setShift(parseFloat(e.target.value))}
          className="h-1"
        />
      </div>
    </div>
  );
}