{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "@liquefy-ui/core@^0.1.3"
  ],
  "description": "The hook that wires an element to the WebGL renderer and the motion springs.",
  "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in `<LiquefyProvider>`, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation",
  "files": [
    {
      "content": "'use client'\n\nimport {\n  attachLiquidLens,\n  attachLiquidMotion,\n  type LiquidMotionController,\n  type LiquidMotionOptions,\n} from '@liquefy-ui/core'\nimport { useCallback, useEffect, useRef, type Ref, type RefCallback } from 'react'\n\nexport type LiquidGlassOptions = LiquidMotionOptions & {\n  lens?: boolean\n  lensBlur?: number\n  lensStrength?: number\n  motion?: boolean\n}\n\nexport type LiquidPulse = (strength?: number) => void\n\nconst assignRef = <Value,>(ref: Ref<Value> | undefined, value: Value | null): void => {\n  if (typeof ref === 'function') {\n    ref(value)\n    return\n  }\n\n  if (ref) ref.current = value\n}\n\nexport const useLiquidGlass = <Element extends HTMLElement>(\n  forwardedRef: Ref<Element> | undefined,\n  options: LiquidGlassOptions,\n): readonly [RefCallback<Element>, RefCallback<HTMLCanvasElement>, LiquidPulse] => {\n  const elementRef = useRef<Element | null>(null)\n  const canvasRef = useRef<HTMLCanvasElement | null>(null)\n  const controllerRef = useRef<LiquidMotionController | null>(null)\n\n  const setElement = useCallback((element: Element | null) => {\n    elementRef.current = element\n    assignRef(forwardedRef, element)\n  }, [forwardedRef])\n\n  const setCanvas = useCallback((canvas: HTMLCanvasElement | null) => {\n    canvasRef.current = canvas\n  }, [])\n\n  // Fires the motion controller's release overshoot on demand — used by inputs\n  // to purun on keystrokes, selects on open, chips on hover, and so on.\n  const pulse = useCallback<LiquidPulse>((strength) => {\n    controllerRef.current?.pulse(strength)\n  }, [])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element) return undefined\n\n    const motionController = options.motion === false\n      ? null\n      : attachLiquidMotion(element, canvasRef.current, options)\n    const lensController = options.lens === false\n      ? null\n      : attachLiquidLens(element, { blur: options.lensBlur, strength: options.lensStrength })\n    controllerRef.current = motionController\n\n    return () => {\n      controllerRef.current = null\n      motionController?.destroy()\n      lensController?.destroy()\n    }\n  }, [\n    options.bounce,\n    options.disabled,\n    options.intensity,\n    options.lens,\n    options.lensBlur,\n    options.lensStrength,\n    options.motion,\n    options.respectReducedMotion,\n    options.tilt,\n    options.tint,\n    options.webgl,\n    options.wobbliness,\n  ])\n\n  return [setElement, setCanvas, pulse]\n}\n",
      "path": "registry/use-liquid-glass.ts",
      "type": "registry:hook"
    }
  ],
  "name": "use-liquid-glass",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json"
  ],
  "title": "useLiquidGlass",
  "type": "registry:hook"
}