图片加载不再是黑屏：用Libraries.dev的img-fx打造AI像素马赛克生成效果

图片加载不再是黑屏用Libraries.dev的img-fx打造AI像素马赛克生成效果【免费下载链接】Libraries.devHigh-crafted UI libraries for AI agents: Border beam, Orbs, Metal, Gooey, Voice, Image, Avatar bots项目地址: https://gitcode.com/gh_mirrors/bo/Libraries.dev在 AI 产品里图片生成中的那几秒往往是体验黑洞要么干巴巴的黑屏要么转个圈圈。Libraries.dev开源仓库中的img-fx库给出了优雅答案——一个 React WebGL 动画组件把图片加载/生成过程变成流光溢彩的AI 像素马赛克图片像从像素雾中显影出来一样。一个组件、三个内置预设、零配置即可上手。 img-fx 是什么img-fx是 packages/img-fx/ 目录下的 React 库核心是一个叫ImageGeneration的组件。它的工作原理包裹任意卡片把它当作普通容器使用卡片表面实时渲染 Shader 驱动的生成中动画周期性揭示图片从你提供的图片池里随机挑图用像素单元格逐格溶解的方式显影出来暗色/亮色自动适配跟随系统或你的主题类dark/light实时切换无需重新挂载核心源码见 ImageGeneration.tsx。 三个开箱即用的像素马赛克预设安装后你立刻拥有三种生成中风格定义在 presets/index.ts 中预设视觉效果适合场景pixels-organicChromium Flow有机流动的像素马赛克柔和呼吸感默认选择通用卡片pixels-mechanicNebula机械质感的星云像素网格科技风、数据类卡片sweep-gradientGradient Sweep左上→右下的快速渐变扫描 逐格闪烁强调正在生成的紧迫感每个预设都内置暗色/亮色两套调色板themeauto时会自动跟随你的站点主题。⚡ 快速上手一行 npm 安装依赖react、react-dom、threepeer 依赖安装命令见 README.mdnpm install img-fx最小用法——把任何卡片包一层即可import { ImageGeneration } from img-fx; ImageGeneration presetpixels-organic images{[/img/a.jpg, /img/b.jpg]} autoReveal div classNamecard style{{ width: 320, height: 320, borderRadius: 20 }} / /ImageGeneration开启autoReveal后调度器会自动循环马赛克动画随机 2~4 秒间隔→ 像素揭示 → 展示 2 秒 → 淡出回马赛克。仓库里还附带了一个可交互的 playground/Playground.tsx可在线切换预设、主题、强度来预览效果。AI像素马赛克生成效果演示图片池️ 自动轮播 vs 手动触发两种玩法除了全自动轮播img-fx通过ref暴露了命令式 APItypes.tstriggerReveal()点击按钮时才揭示一张图适合点击生成交互triggerReveal({ hold: manual })triggerHide()实现揭示/隐藏切换按钮配合isImageActive()控制按钮文案triggerRegenerate()一键重新生成的精髓 Regenerate让AI 重新生成名副其实这是最惊艳的能力当前展示的图片会碎成像素网格格子里像素按预设的闪烁时钟跳进跳出同时 Shader 在缝隙间流动——就像 AI 正在把这张图打碎重算。默认还会从即将消失的图片上采样调色板按亮度映射到预设色槽让马赛克的颜色直接生长自这张图片而不是预设的死板配色。图片完全显影后调色板自动还原。如果你的图片是跨域且未开启 CORS 的会优雅回退到预设配色不会报错。重新生成效果可使用的AI风格示例图 性能多卡片同屏也不卡顿engine/renderer.ts 里的设计对新手很友好——你什么都不用做它就快全页面共享一个 WebGLRenderer只有一个 WebGL 上下文默认 10fps 上限慢速漂移预设足够了可用setFrameRate(15)调高到 60滚出屏幕的卡片自动暂停IntersectionObserver整页不可见时 rAF 循环直接取消图片位图按 URL 全局缓存多卡片共享同一张图零额外开销️ 细粒度调参清单常用 Props完整表格见 README.mdpixelScale像素格大小倍率0.5更细腻、2更块状strength效果强度 0..1 透明度乘数colors最多 7 个 CSS 颜色按色槽覆盖预设调色板cardBg卡片底色接受任意 CSS 颜色hex / rgb / hsl / 命名色revealDelayRange/revealHoldMs控制生成间隔与图片展示时长onCycle每个阶段回调idle/reveal/visible/hide方便同步 loading 状态img-fx 揭示动画的示例图片池 项目结构与延伸模块路径说明组件入口packages/img-fx/src/ImageGeneration.tsxImageGeneration主组件预设配置packages/img-fx/src/presets/三种像素马赛克预设渲染引擎packages/img-fx/src/engine/共享渲染器、揭示调度、缓动交互演示packages/img-fx/playground/Playground.tsx可玩 demo 源码img-fx与同仓库的border-beam边框光束、thinking-orbs思考球、metal-fx金属质感等库风格统一可以组合出一整套AI 产品感UI——下次做 AI 图片应用时让加载不再是黑屏而是一场像素显影秀 ✨AI像素生成效果的另一张示例图【免费下载链接】Libraries.devHigh-crafted UI libraries for AI agents: Border beam, Orbs, Metal, Gooey, Voice, Image, Avatar bots项目地址: https://gitcode.com/gh_mirrors/bo/Libraries.dev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考