Progressive Blur

import { ProgressiveBlur } from '@/components/ui/progressive-blur'

export function ThemeTogglePreview() {
  return (
    <div className="relative w-60 h-fit rounded-2xl border overflow-hidden">
      {/* Content */}
      <div className="h-52 overflow-y-scroll no-scrollbar flex flex-col items-center justify-center gap-root-3xl">
        <div className="text-2xl">Scroll 👇</div>
        <div className="text-2xl">Scroll 👇</div>
        <div className="text-2xl">Scroll 👇</div>
        <div className="text-2xl">Scroll 👇</div>
        <div className="text-2xl">Scroll 👇</div>
        <div className="text-2xl">Scroll 👇</div>
        <div className="text-2xl">Scroll 👇</div>
        <div className="text-2xl">Scroll 👇</div>
      </div>

      {/* Progressive Blur */}
      <ProgressiveBlur />
    </div>
  )
}

import { ProgressiveBlur } from '@/components/ui/progressive-blur'

<ProgressiveBlur />