Glass Effect

import { Glass } from "@/components/ui/glass-effect"

function GlassDemo() {
  return (
    <div className="min-h-screen w-full flex items-center justify-center p-4">
      <div className="relative w-[400px] h-[400px] rounded-xl overflow-hidden">
        <div className="w-full h-full overflow-auto">
          <img 
            src="https://images.unsplash.com/photo-1534796636912-3b95b3ab5986"
            alt="Background"
            className="w-full min-h-[800px] object-cover"
          />
        </div>
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
          <Glass>
            <span className="absolute inset-0 flex items-center justify-center text-white/80 font-medium">
              Scroll to see effect
            </span>
          </Glass>
        </div>
      </div>
    </div>
  )
}

export { GlassDemo }