{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blur-in",
  "title": "UI Blur In",
  "description": "A wrapper that reveals a single child with blur + opacity + a directional offset; a pure state atom, theme-independent — its context is a motion config (blur/distance/axis), not a theme.",
  "dependencies": ["remotion"],
  "registryDependencies": ["@remocn/remocn-ui"],
  "files": [
    {
      "path": "registry/remocn-ui/blur-in/index.tsx",
      "content": "\"use client\";\n\nimport type { CSSProperties, ReactNode } from \"react\";\n\nexport type BlurInState = \"hidden\" | \"revealed\";\nexport type BlurInDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\nexport interface BlurInStyle {\n  blur: number;\n  opacity: number;\n  translateX: number;\n  translateY: number;\n}\n\nexport interface BlurInStyleContext {\n  blur: number;\n  distance: number;\n  axis: \"x\" | \"y\";\n  sign: 1 | -1;\n}\n\nexport function blurInStyleContext(\n  blur: number,\n  direction: BlurInDirection,\n  distance: number,\n): BlurInStyleContext {\n  const axis: \"x\" | \"y\" =\n    direction === \"left\" || direction === \"right\" ? \"x\" : \"y\";\n  const sign: 1 | -1 = direction === \"up\" || direction === \"left\" ? 1 : -1;\n  return { blur, distance, axis, sign };\n}\n\nexport function blurInStyle(\n  state: BlurInState,\n  ctx: BlurInStyleContext,\n): BlurInStyle {\n  if (state === \"revealed\")\n    return { blur: 0, opacity: 1, translateX: 0, translateY: 0 };\n  return {\n    blur: ctx.blur,\n    opacity: 0,\n    translateX: ctx.axis === \"x\" ? ctx.sign * ctx.distance : 0,\n    translateY: ctx.axis === \"y\" ? ctx.sign * ctx.distance : 0,\n  };\n}\n\nexport interface BlurInProps {\n  state?: BlurInState;\n  style?: BlurInStyle;\n  children: ReactNode;\n  blur?: number;\n  direction?: BlurInDirection;\n  distance?: number;\n  display?: CSSProperties[\"display\"];\n  className?: string;\n}\n\nexport function BlurIn({\n  state = \"hidden\",\n  style,\n  children,\n  blur = 8,\n  direction = \"up\",\n  distance = 12,\n  display = \"inline-block\",\n  className,\n}: BlurInProps) {\n  const v =\n    style ?? blurInStyle(state, blurInStyleContext(blur, direction, distance));\n  return (\n    <div\n      className={className}\n      style={{\n        display,\n        opacity: v.opacity,\n        filter: v.blur > 0 ? `blur(${v.blur}px)` : \"none\",\n        transform: `translate(${v.translateX}px, ${v.translateY}px)`,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/blur-in.tsx"
    },
    {
      "path": "registry/remocn-ui/blur-in/use-blur-in-transition.ts",
      "content": "\"use client\";\n\nimport {\n  type BlurInDirection,\n  type BlurInState,\n  type BlurInStyle,\n  blurInStyle,\n  blurInStyleContext,\n} from \"@/components/remocn/blur-in\";\nimport { easings, type Step, useStateTransition } from \"@/lib/remocn-ui\";\n\nexport const DEFAULT_DURATION = 18;\n\nexport function tweenBlurInStyle(\n  a: BlurInStyle,\n  b: BlurInStyle,\n  t: number,\n): BlurInStyle {\n  return {\n    blur: a.blur + (b.blur - a.blur) * t,\n    opacity: a.opacity + (b.opacity - a.opacity) * t,\n    translateX: a.translateX + (b.translateX - a.translateX) * t,\n    translateY: a.translateY + (b.translateY - a.translateY) * t,\n  };\n}\n\nexport interface BlurInTransitionOptions {\n  blur?: number;\n  direction?: BlurInDirection;\n  distance?: number;\n  speed?: number;\n  defaultDuration?: number;\n}\n\nexport function useBlurInTransition(\n  steps: Step<BlurInState>[],\n  opts: BlurInTransitionOptions = {},\n): BlurInStyle {\n  const {\n    blur = 8,\n    direction = \"up\",\n    distance = 12,\n    speed = 1,\n    defaultDuration = DEFAULT_DURATION,\n  } = opts;\n  const ctx = blurInStyleContext(blur, direction, distance);\n  const { from, to, progress } = useStateTransition(\n    steps,\n    \"hidden\",\n    speed,\n    defaultDuration,\n  );\n  const t = easings.out(progress);\n  return tweenBlurInStyle(blurInStyle(from, ctx), blurInStyle(to, ctx), t);\n}\n",
      "type": "registry:component",
      "target": "components/remocn/use-blur-in-transition.ts"
    }
  ],
  "type": "registry:component"
}