Elyri

为 React 而做的动效、UI 组件与页面区块。浏览实时预览，调整参数，再把适合的代码带进项目。

组件

分类

运行时依赖

精选动效

DragonScales

WebGL 实时渲染的侧向龙鳞背景：黑曜石釉面、沿轮廓流动的弧形反光与双线鳞缘，光源跟随指针移动。

AsciiImage

把图片转换为 ASCII 字符画：按亮度把像素映射为疏密不同的字符，支持单色或原图着色。进入视口时自上而下解码显现，之后有高光周期性扫过、字符随机闪烁，指针靠近时字符被推开、提亮并乱码，自动适配明暗主题。

MeshGradient新

WebGL 实时渲染的流光渐变：四个色团经两级域扭曲拉成缓缓流淌的彩色丝带，在 Oklab 空间柔和融合，缎面光泽随流场滑过，叠一层细腻胶片颗粒。

安装依赖

pnpm add @elyri/motion

添加组件

pnpm dlx @elyri/cli@latest add gradient-text

零运行时依赖

只依赖 React，包体轻量，组件源码可直接阅读与改造。

CSS 变量主题

所有可定制项都是 CSS 变量，可在全局或容器内局部覆盖。

性能优先

WebGL 与合成层驱动动效，离屏或切到后台时自动暂停，空闲不占 CPU。

尊重减弱动效

跟随系统偏好，也可用 ReducedMotionProvider 强制子树播放或静止。