定价

GradientMotion

以流动扫光呈现动态渐变,可用于背景、头像占位或可裁切的媒体区域。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中;本页展示网站用法,支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费,不属于项目,不占项目或开发者席位额度,无需 SnowUI 注册、激活或付费证明。

如何使用

用于装饰性渐变动效背景。普通背景优先主题 Token;专业艺术色范围仅限该图形,不能推广为任意 UI 颜色。

  • 用 variant 选择图形、paused 暂停,speed / intensity 等调整效果。

  • 为静态身份使用稳定 seed;decorative 默认开启。动效颜色不替代主题色系统。

导入

import { GradientMotion } from '@snowui-design-system/components';

用法

调色板

方向

播放控制

头像回退

自定义颜色

扫过表面

API 参考

属性 类型 默认值 示例 描述
variant GradientMotionVariant "prism" variant={value} glimm palette。avatar 为头像默认图专用慢速无空白变体;旧值 cosmic / matrix / electric / inferno / mystic / cyber / neon / plasma / neatBlob 会映射到 glimm palette
seed string | number — seed="Example" 随机预设种子;传入后同一 seed 稳定命中同一 palette
speed number 1 speed={42} 动效速度倍率
duration number 800 duration={42} glimm sweep 基准时长,单位 ms
size number | string — size="Example" 同时设置宽高
width number | string — width="Example" 宽度
height number | string — height="Example" 高度
radius number | string "inherit" radius="Example" 圆角;默认继承外部容器,便于 Avatar 裁切
intensity number 1 intensity={42} 对应 glimm peakAlpha,范围限制为 0 到 20
paused boolean false paused 是否暂停动效
decorative boolean true decorative 是否作为装饰图;为 true 时输出 aria-hidden="true"
direction GradientMotionDirection "ltr" direction={value} 扫光方向
bandTight number 14 bandTight={42} glimm band gaussian tightness,值越大扫光带越窄
waveAmount number 1 waveAmount={42} glimm edge wave 与头像整体晃动强度,范围 0–20
rippleAmount number 1 rippleAmount={42} 细密波纹强度,范围 0–20
brightness number 1 brightness={42} glimm band RGB 亮度倍率,范围 0–20
colorSpeed number 1 colorSpeed={42} 自定义颜色的时间相位速度倍率,范围 0–20;0 时颜色停止流动
highlightIntensity number 1 highlightIntensity={42} Fresnel 与镜面高光强度倍率,范围 0–20;0 时关闭高光
colors GradientMotionColors — colors={value} 周期上的四个 HEX 采样色;组件提取均值、正弦项与余弦项生成 glimm 风格连续 palette,并沿时间相位流动
loopMotion LoopMotionConfig — loopMotion={value} 覆盖 Frame loop bridge 配置;paused=true 始终优先暂停。shader 的时序仍由 speed、duration 和 paused 控制。 默认行为:基于 duration 的线性无限循环。