Progressive Blur

<script setup lang="ts">import { computed } from 'vue'import { cn } from '@/lib/utils'
interface Props {  class?: string  height?: string  position?: 'top' | 'bottom'  steps?: number  maxBlur?: number}
const props = withDefaults(defineProps<Props>(), {  height: '30%',  position: 'bottom',  steps: 8,  maxBlur: 64,})
const layers = computed(() => {  const count = props.steps  const direction = props.position === 'bottom' ? 'to bottom' : 'to top'
  return Array.from({ length: count }, (_, i) => {    const blur = props.maxBlur * ((i + 1) / count) ** 2    const segmentSize = 100 / count    const start = i * segmentSize    const end = (i + 1) * segmentSize
    return {      blur: `${blur.toFixed(1)}px`,      mask: `linear-gradient(${direction}, transparent ${start}%, black ${end}%)`,      zIndex: i + 1,    }  })})</script>
<template>  <div    :class="cn(      'pointer-events-none absolute inset-x-0 z-10',      position === 'top' ? 'top-0' : 'bottom-0',      props.class,    )"    :style="{ height }"  >    <div      v-for="(layer, i) in layers"      :key="i"      class="absolute inset-0"      :style="{        zIndex: layer.zIndex,        backdropFilter: `blur(${layer.blur})`,        WebkitBackdropFilter: `blur(${layer.blur})`,        maskImage: layer.mask,        WebkitMaskImage: layer.mask,      }"    />  </div></template>