3.0.1

Animations

Progressive Blur

new

A blur that ramps up toward the edge of a scrolling container.

  • Add reduced-motion path to text effects

    mira · 2m ago

  • Draw dot patterns in the foreground color

    jonas · 18m ago

  • Pause beams while off screen

    mira · 41m ago

  • Pause marquees while off screen

    ade · 1h ago

  • Use tabular digits in number ticker

    jonas · 2h ago

  • Stable SVG ids with useId

    ade · 3h ago

  • Animate the glide menu cursor with transforms

    mira · 5h ago

  • Mask grid patterns with radial fades

    jonas · 6h ago

  • Document the animations section

    ade · 8h ago

  • Move animations to motion/react

    mira · 1d ago

Installation

npx shadcn@latest add @blank/progressive-blur

Usage

import { ProgressiveBlur } from "@/components/ui/progressive-blur"
<div className="relative h-80 overflow-hidden">
  <div className="h-full overflow-y-auto">…</div>
  <ProgressiveBlur position="bottom" height="40%" />
</div>

A fade to the background color hides content; a blur still shows that there is more of it. The blur is a stack of backdrop-filter layers, each masked to an overlapping band, so it strengthens smoothly toward the edge. Put it next to the scroller, not inside it, so it stays pinned while the content moves.

Examples

Both edges

  • Frankfurt
  • London
  • Paris
  • Stockholm
  • Washington
  • Oregon
  • São Paulo
  • Mumbai
  • Singapore
  • Tokyo
  • Sydney

Props

PropTypeDefault
position"top" | "bottom" | "both""bottom"
heightstring"30%"
blurLevelsnumber[][0.5, 1, 2, 4, 8, 16, 32, 64]