Motion / Effects
Progressive Blur
A back-to-front backdrop-blur gradient with a frame-animated intensity.
ProgressiveBlur stacks backdrop-filter: blur() layers clipped by overlapping gradient masks to
produce a smooth ramp instead of a hard blur step. Drive intensity (0→1) from a frame to fade the
blur in/out — handy for masking a region in or out during a sequence.
Installation
npx shadcn@latest add @adv/progressive-blurUsage
import { ProgressiveBlur } from '@adv/motion';
<div style={{ position: 'relative' }}>
{/* …content… */}
<ProgressiveBlur position="bottom" height="70%" intensity={1} />
</div>