Progressive Blur

A component that renders a background with a progressive blur effect. It uses multiple layers to create a smooth blur transition. Use it to add a subtle visual effect to scrollable areas.

byEdu Calvo from Smoothui

Installation

terminal

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

npx layro-cli add @educlopez/progressive-blur

npx layro-cli add @educlopez/progressive-blur

bunx layro-cli add @educlopez/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 { useReducedMotion } from "motion/react";
import { type CSSProperties, type ReactNode, useEffect, useState } from "react";

/** Where the blur ramps *towards*. `radial` ramps outward from the centre. */
export type ProgressiveBlurDirection =
  | "top"
  | "bottom"
  | "left"
  | "right"
  | "radial";