CrossBlur

Installation

import { CrossBlur } from "@o/pipeline/animations/cross-blur";

Examples

Inline

<CrossBlur inline>{state ? <Icon1 /> : <Icon2 />}</CrossBlur>

Renders as a span component instead of a div

Note

Internally, CrossBlur uses motion/react’s layout prop which is incompatible with display: inline — you must ensure to set an alternative display value (e.g. display: inline-flex) when using inline.

CrossBlurScale

<CrossBlur inline className="block" variant="crossBlurScale">
  {state ? <Icon1 /> : <Icon2 />}
</CrossBlur>

With AutoHeight

View 1 of 3