Blur In

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @framecn/blur-in
Copy

Usage

Copyimport { BlurIn } from "@/components/ui/blur-in";

Copy<BlurIn state="revealed">
  <YourElement />
</BlurIn>

Unlike most UI atoms, BlurIn is theme-independent: it carries no colors and has no theme prop. Its inputs are the motion knobs — blur, direction, and distance.

Smooth transitions

The docs preview animates hidden → revealed via useBlurInTransition. Pass the resolved style to BlurIn:

Copyimport { BlurIn } from "@/components/framecn/blur-in";
import { useBlurInTransition } from "@/components/framecn/use-blur-in-transition";
 
const style = useBlurInTransition(
  [
    { at: 0, state: "hidden" },
    { at: 8, state: "revealed", duration: 18 },
  ],
  { direction: "up", blur: 8, distance: 12 }
);
 
<BlurIn style={style}>
  <YourElement />
</BlurIn>;

direction is the way the child travels into place: up starts below, down starts above, left starts to the right, right starts to the left.

style takes precedence over state when both are provided.

API Reference

BlurIn

Wrap a single child element. The child is the content that blurs in.