Skill: blur

Component WebGL thuần — canvas full-screen, chuyển giữa các ảnh bằng "zoom blur" (radial blur hội tụ về tâm), scroll/click/phím mũi tên để điều hướng, tâm blur bám theo chuột.

WHAT

Purpose và context

• Purpose: gắn vào trang một canvas WebGL full-screen chuyển giữa các ảnh bằng hiệu ứng zoom-blur (ảnh ra mờ dần hội tụ về tâm, ảnh vào rõ dần), điều hướng bằng scroll/click/phím, tâm blur bám chuột.
• Trigger (when to use):
  • Hero section hoặc slideshow ảnh cần hiệu ứng chuyển CAO CẤP hơn crossfade thường (zoom-blur transition).
  • User nói "hiệu ứng blur ảnh", "webgl blur", "gallery kiểu zoom blur".
• Non-goals: KHÔNG dùng cho blur/frosted-glass TĨNH của UI card/panel (đó là backdrop-filter: blur() CSS thường, hoặc docs-site-macos liquid-glass) — đây là hiệu ứng CHUYỂN ĐỘNG giữa các ảnh, tốn GPU hơn hẳn. Không đổi theme (việc của dark-mode-maker).

Mental model

mảng images → mỗi ảnh = PlaneBufferGeometry + shader ZoomBlurImage → progress/targetProgress lerp → uStrength 2 layer đan chéo → frame render; input (wheel/click/phím) đổi targetProgress; chuột đổi uCenter.