Animations

Shape Blur

A crisp shape or logo that drifts out of focus under the pointer, like a lens with a shallow depth of field.
import { ShapeBlur } from "pleate/effects/shape-blur";

Lens

Move the pointer over the logo.

pleate

Props

blur

Blur at the lens center (px).

numberdefault 10

radius

Lens radius (px).

numberdefault 110

children

The shape.

ReactNode

Accessibility

  • The blurred copy is aria-hidden and inert.
  • Off for touch and reduced motion.