Progressive Blur

PreviewCode

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

@/demos/ProgressiveBlurDemo.tsx

import { For } from 'solid-js'
import { ProgressiveBlur } from '@/registry/magicui/progressive-blur'

export function ProgressiveBlurDemo() {
  return (
    <div class="relative w-full rounded-xl border">
      <div class="relative h-100 overflow-hidden">
        <div class="size-full overflow-auto">
          <div class="flex flex-col gap-2 p-4">
            <For each={Array.from({ length: 20 }, (_, index) => index)}>
              {item => (
                <div class="
                  flex h-20 w-full items-center justify-center rounded-xl border
                  bg-card
                "
                >
                  {item}
                </div>
              )}
            </For>
          </div>
        </div>
        <ProgressiveBlur position="bottom" height="40%" />
      </div>
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/progressive-blur

bun

bunx shadcn@latest add @magicui-solid/progressive-blur

yarn

yarn dlx shadcn@latest add @magicui-solid/progressive-blur

npm

npx shadcn@latest add @magicui-solid/progressive-blur

Usage

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

<div className="relative h-[400px] w-full overflow-auto">
  {/* Your scrollable content */}
  <div className="space-y-4 p-4">{/* Content items */}</div>

  <ProgressiveBlur height="50%" position="bottom" />
</div>

Props

ProgressiveBlur

Prop	Type	Default	Description
class	string	-	Additional classes to apply to the blur container.
height	string	"30%"	Height of the blur effect container.
position	"top" / "bottom" / "both"	"bottom"	Position of the blur effect.
blurLevels	number[]	[0.5, 1, 2, 4, 8, 16, 32, 64]	Array of blur values (in px) for progressive effect.
children			Optional content to render within the blur container.