Progressive Blur

<template>
  <div class="p-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-900 rounded-xl max-w-2xl mx-auto">
    <div class="text-center mb-6">
      <h3 class="text-2xl font-bold mb-3 text-highlighted">
        Progressive Blur
      </h3>
      <p class="text-muted">
        Create depth and focus effects with progressive blur that intensifies towards the edges
      </p>
    </div>

    <div class="relative h-80 rounded-xl overflow-hidden shadow-lg">
      <img
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"
        alt="Mountain Landscape"
        class="w-full h-full object-cover"
      >
      <MProgressiveBlur
        class="absolute inset-0"
        :intensity="20"
      />

      <div class="absolute bottom-4 left-4 right-4">
        <div class="bg-black/50 backdrop-blur-sm rounded-lg p-3">
          <h4 class="font-bold text-white">
            Mountain Landscape
          </h4>
          <p class="text-dimmed text-sm">
            Focus effect with progressive blur
          </p>
        </div>
      </div>
    </div>

    <div class="mt-6 flex justify-center">
      <UButton
        color="primary"
        variant="solid"
        size="sm"
      >
        <UIcon
          name="i-lucide-sliders"
          class="w-4 h-4 mr-2"
        />
        Adjust Blur
      </UButton>
    </div>
  </div>
</template>

<template>
  <div class="relative h-64">
    <img
      src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
      alt="Beach"
      class="w-full h-full object-cover"
    >
    <MProgressiveBlur
      :blur-intensity="0.5"
      :blur-layers="12"
      class="absolute inset-0"
    />
  </div>
</template>