Backgrounds

import { Noise } from "@/components/ui/backgrounds"

export function BackgroundsDemo() {
  return (
    <div className="bg-background relative h-64 w-full overflow-hidden rounded-lg border">
      <Noise />
      <div className="relative z-10 flex h-full items-center justify-center">
        <div className="text-center">
          <h3 className="text-2xl font-semibold">Noise Background</h3>
          <p className="text-muted-foreground mt-2">
            Subtle texture adds depth without distraction
          </p>
        </div>
      </div>
    </div>
  )
}

import { Noise } from "@/components/ui/backgrounds"

export function BackgroundsNoise() {
  return (
    <div className="bg-background relative h-48 w-full overflow-hidden rounded-lg border">
      <Noise />
      <div className="relative z-10 flex h-full flex-col justify-center p-6">
        <div className="space-y-2">
          <h4 className="text-lg font-medium">Content with Noise Background</h4>
          <p className="text-muted-foreground text-sm">
            The noise background provides a subtle texture that enhances the
            visual depth of your interface without overwhelming the content.
          </p>
          <div className="mt-4 flex gap-2">
            <div className="bg-primary h-2 w-12 rounded-full"></div>
            <div className="bg-primary/60 h-2 w-8 rounded-full"></div>
            <div className="bg-primary/30 h-2 w-6 rounded-full"></div>
          </div>
        </div>
      </div>
    </div>
  )
}