Prism Bloom Shader

"use client";

import React, { useState } from "react";
import PrismBloomShader from "@/components/ui/prism-bloom-shader";

export default function DemoOne() {
  
  const [count, setCount]   = useState(24);
  const [speed, setSpeed]   = useState(0.8);

  return (
    <div className="relative w-screen h-screen bg-background text-foreground">
      {/* Shader background */}
      <PrismBloomShader swirlCount={count} swirlSpeed={speed} />

      {/* Controls overlay */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center space-y-4 bg-card/80 p-4 rounded-lg">
        <div className="flex items-center space-x-2">
          <label htmlFor="swirlCount" className="text-sm">Petal Count:</label>
          <input
            id="swirlCount"
            type="range"
            min={6}
            max={64}
            step={2}
            value={count}
            onChange={(e) => setCount(Number(e.target.value))}
            className="range range-sm range-primary"
          />
          <span>{count}</span>
        </div>

        <div className="flex items-center space-x-2">
          <label htmlFor="swirlSpeed" className="text-sm">Speed:</label>
          <input
            id="swirlSpeed"
            type="range"
            min={0.1}
            max={2.0}
            step={0.1}
            value={speed}
            onChange={(e) => setSpeed(Number(e.target.value))}
            className="range range-sm range-primary"
          />
          <span>{speed.toFixed(1)}</span>
        </div>
      </div>
    </div>
);
}