UI Blur In

1"use client";
2 
3import type { CSSProperties, ReactNode } from "react";
4 
5export type BlurInState = "hidden" | "revealed";
6export type BlurInDirection = "up" | "down" | "left" | "right";
7 
8export interface BlurInStyle {
9  blur: number;
10  opacity: number;
11  translateX: number;
12  translateY: number;
13}
14 
15export interface BlurInStyleContext {
16  blur: number;
17  distance: number;
18  axis: "x" | "y";
19  sign: 1 | -1;
20}
21 
22export function blurInStyleContext(
23  blur: number,
24  direction: BlurInDirection,
25  distance: number,
26): BlurInStyleContext {
27  const axis: "x" | "y" =
28    direction === "left" || direction === "right" ? "x" : "y";
29  const sign: 1 | -1 = direction === "up" || direction === "left" ? 1 : -1;
30  return { blur, distance, axis, sign };
31}
32 
33export function blurInStyle(
34  state: BlurInState,
35  ctx: BlurInStyleContext,
36): BlurInStyle {
37  if (state === "revealed")
38    return { blur: 0, opacity: 1, translateX: 0, translateY: 0 };
39  return {
40    blur: ctx.blur,
41    opacity: 0,
42    translateX: ctx.axis === "x" ? ctx.sign * ctx.distance : 0,
43    translateY: ctx.axis === "y" ? ctx.sign * ctx.distance : 0,
44  };
45}
46 
47export interface BlurInProps {
48  state?: BlurInState;
49  style?: BlurInStyle;
50  children: ReactNode;
51  blur?: number;
52  direction?: BlurInDirection;
53  distance?: number;
54  display?: CSSProperties["display"];
55  className?: string;
56}
57 
58export function BlurIn({
59  state = "hidden",
60  style,
61  children,
62  blur = 8,
63  direction = "up",
64  distance = 12,
65  display = "inline-block",
66  className,
67}: BlurInProps) {
68  const v =
69    style ?? blurInStyle(state, blurInStyleContext(blur, direction, distance));
70  return (
71    <div
72      className={className}
73      style={{
74        display,
75        opacity: v.opacity,
76        filter: v.blur > 0 ? `blur(${v.blur}px)` : "none",
77        transform: `translate(${v.translateX}px, ${v.translateY}px)`,
78      }}
79    >
80      {children}
81    </div>
82  );
83}