Progressive Blur

An overlay component that applies a progressive blur effect to an edge of an element.

A quieter way to build digital products

Good design is rarely about adding more. It is about understanding what matters, removing what does not, and creating enough space for the right ideas to stand out.

The best interfaces do not ask for attention. They earn it.

What we focus on

Interfaces that feel natural across every screen size.

Customizing

globals.css


:root {
  --ex-progressive-blur-max: 16px;
  --ex-progressive-blur-size: 14dvh;
  --ex-progressive-blur-spread: 30%;
}

API

Element	Selector
`ProgressiveBlur`	`.ex-progressive-blur`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`layers`	`number`	`6`
`side`	`enum of ["top", "bottom", "left", "right"]`	`bottom`