ShaderLensBlur

Installation

pnpm
npmyarnbun
Copy
pnpm dlx shadcn@latest add https://cult-ui.com/r/shader-lens-blur.json

Usage

Copy
import ShaderLensBlur from "@/components/ui/shader-lens-blur"

Basic

Render the default interactive lens blur canvas:

Copy
<div className="w-full max-w-2xl">
  <ShaderLensBlur />
</div>

Programmatic Configuration

ShaderLensBlur reads its configuration from the exported configAtom. This makes it easy to drive from your own controls, presets, or app state.

Copy
"use client"
 
import { useAtom } from "jotai"
import ShaderLensBlur, { configAtom } from "@/components/ui/shader-lens-blur"
 
export function ShaderLensBlurControlled() {
  const [config, setConfig] = useAtom(configAtom)
 
  return (
    <div className="space-y-4">
      <ShaderLensBlur />
      <button
        className="rounded-md border px-3 py-2 text-sm"
        onClick={() =>
          setConfig((prev) => ({
            ...prev,
            variation: (prev.variation + 1) % 4,
            invertMouse: !prev.invertMouse,
          }))
        }
      >
        Toggle Preset
      </button>
      <p className="text-sm text-muted-foreground">
        Current variation: {config.variation}
      </p>
    </div>
  )
}

Set Explicit Dimensions

The component supports custom canvas dimensions through the same atom config:

Copy
setConfig((prev) => ({
  ...prev,
  width: "100%",
  height: "520px",
}))

API Reference

Exports

ShaderConfig Shape

Behavior Notes

• Uses a THREE.WebGLRenderer with an orthographic full-screen quad and custom fragment shader.
• Pointer input is translated from container-space into shader-space and corrected for device pixel ratio.
• Shader colors and variation update live when configAtom changes.
• Theme awareness is built in (next-themes) and influences subtle color mixing behavior in the shader.

Accessibility & UX Tips

• Provide a visible parent label or heading so users understand what interaction is expected.
• Keep height at least 280px for comfortable pointer/touch interaction.
• For touch-first contexts, consider enableHover: false so effects primarily respond during active touch/press.

Troubleshooting

Blur hotspot feels offset from pointer

• Ensure you are using the latest component version (includes DPR-correct pointer mapping).
• Avoid additional CSS transforms (for example scale(...)) on the canvas container.
• If wrapping inside animated layout components, verify the container reports stable bounds (getBoundingClientRect).

Nothing renders

• Confirm WebGL is available in the browser/environment.
• Confirm required dependencies are installed and import paths were updated.
• If using theme features, ensure your app is wrapped with ThemeProvider from next-themes.

References