Progressive Blur

Renders layered blur effects with gradient transitions. It animates by applying varying blur intensities to each layer. Use for creating visual depth or section dividers in UIs.

byJulien Thibeaut from Motion Primitives

Installation

terminal

pnpm dlx layro-cli add @ibelick/progressive-blur

npx layro-cli add @ibelick/progressive-blur

npx layro-cli add @ibelick/progressive-blur

bunx layro-cli add @ibelick/progressive-blur

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';
import { cn } from '@/lib/utils';
import { HTMLMotionProps, motion } from 'motion/react';

export const GRADIENT_ANGLES = {
  top: 0,
  right: 90,
  bottom: 180,
  left: 270,
};

export type ProgressiveBlurProps = {
  direction?: keyof typeof GRADIENT_ANGLES;
  blurLayers?: number;