组件中心。
FORMA 组件中心:104 个原创 React 组件,覆盖 输入与控制、导航与选择、反馈与浮层、内容展示、背景与动效。零运行依赖,可调参数并导出源码。
输入与控制 · 9 个
Space / Enter 切换;状态与说明实时同步。
姓名与邮箱校验、错误关联、成功反馈;不假装发送邮件。
增减数量、上下限禁用、即时计算;不创建购物订单。
点击后进入处理中,完成后打勾,随后自动复位。
指针靠近时按钮被吸附偏移,离开后弹性回位。
点按圆钮以粘连动画展开搜索面板,输入即过滤建议。
占位文案轮播;提交后文字逐字下坠消散,输入框清空。
拖入或点选文件:高亮反馈、进度推进、缩略清单;不真正上传。
三步滑动的注册表单:进度条、逐步校验、完成汇总;无后端。
导航与选择 · 9 个
点击切换内容;方向键移动焦点并激活面板。
搜索过滤、上下键选择、Enter确认、Escape关闭。
macOS 风底部 dock,邻近图标联动放大,点按高亮当前项。
下滑隐藏、上滑浮现的吸顶导航,随滚动点亮当前分区。
随滚动进度,吸顶导航宽度收缩、圆角增大,形成聚焦感。
点按导航项展开全宽面板,分组列出入口,键盘可用。
顶部胶囊条在几种状态间弹性变形切换,自动轮换或点按切换。
悬停展开的图标侧栏,图标呼吸提示;窄屏自动变横向条。
顶部公告条:下滑隐藏、上滑重现,可关闭;仅本地状态。
反馈与浮层 · 9 个
原生模态框:焦点约束、Escape关闭、取消与确认反馈。
调用真实剪贴板API;被浏览器限制时明确提示手动复制。
可触发、自动消失、手动关闭;计时器卸载时清理。
提示卡跟随指针移动,含头像堆叠;键盘聚焦也可显示。
悬停链接浮出预览小窗,不实际跳转。
点击按钮迸发一圈粒子后消散,减少动态时不发射。
主弹窗与嵌套副弹窗两级过渡,焦点约束与 Escape 关闭。
步骤清单逐项点亮:等待→旋转→完成,可重放。
八种纯 CSS loader 变体,点选对比;减少动态时静止。
内容展示 · 37 个
独立展开/收起内容,保留正确的按钮与区域语义。
里程碑步骤列表,点击节点切换焦点,沿垂直轴展开进程。
按钮、圆点与左右方向键切换内容,循环浏览重点信息。
点击表头按数量或状态排序,本地计算,不请求服务器。
星级评分:悬停预览、键盘可用、结果即时播报,不发送数据。
引用自动轮播、可暂停、可跳转;演示文案,非真实客户推荐。
卡片内径向光晕跟随指针,离开渐隐;适合让视线落在内容附近。
一道斜向高光随指针在卡片表面扫过,离开后归位。
乱码逐位收敛成目标文本,离开重新打乱;触摸设备用按钮解密。
悬停当前卡片时,其余卡片同步降低清晰度,视线自然集中。
点击卡片后详情区以网格行高过渡平滑展开,再点收起。
按住卡片任意拖动,松手后以弹性曲线回到原位。
卡片随指针轻微倾斜,一颗拖着渐变尾迹的光点反向游走。
卡片朝指针方向平移并轻微放大,离开后弹性摆回原位。
一叠卡片按节奏轮换露出最上面一张,悬停暂停,也可手动切换。
一排卡片背后有一片光,悬停或点按时滑向当前那张。
按指针进入的方向,从对应边缘滑入一层遮罩,标注当前卡片。
悬停时渐变描边从边缘向内生长,离开再退回去。
悬停卡片时,底部说明文字从下方渐显上浮。
多尺寸卡片按便当格排布,整体轻微倾斜,悬停单格上浮。
点击卡片时它跨行跨列扩张,邻居们以 FLIP 动画平滑让位。
拖动或用方向键移动分割线,对比两种状态的渐变画面。
悬停画面出现圆形放大镜,内部是两倍放大的同一幅矢量画面。
渐变圆钉悬停时向后立起,投影同步缩小,适合作品锚点。
一排圆形徽章,悬停时上方展开一组渐变缩略小图。
插画式空状态配行动按钮;点击后逐条长出第一批条目。
骨架屏以扫光动画占位,读取完成后渐换成真实内容行。
机场翻牌式字符显示,变化的字符逐格翻动,自动轮换可手动切。
轻量语法高亮、行号与一键复制;调用真实剪贴板 API。
mac 风窗口:命令逐条键入、输出流式出现,可重放。
可点按的键盘阵列,WebAudio 本地合成按键音。
中心放大、两侧透视后退的封面轨;键盘 ←→ 与点按切换。
中心卡片放大、两侧后退的画廊;支持拖拽甩动切换。
纵向无限滚动的评价卡墙,悬停暂停,减少动态回退。
两行文字在透视网格上反向流动的立体跑马灯。
canvas 点阵世界地图,城市间弧线流动光点,点按选中城市。
正交投影的旋转点阵球,城市标记随面旋转,可拖拽转动。
背景与动效 · 40 个
指针位置驱动局部光场;触摸设备使用稳定的中心构图。
连续滚动、悬停暂停、手动播放控制与减少动态回退。
基于指针的3D倾斜,离开复位;减少动态时保持静态。
多层彩色光晕缓慢漂移的极光氛围背景,指针可牵引光带,适合首屏与分区底景。
斜向流星周期性划过夜空,数量与节奏可调,悬停暂停,适合封面与夜色主题。
静态星点闪烁叠加偶发流星划落的星空背景,密度与周期可调。
canvas 星芒粒子随机闪烁,指针附近的星更亮,纯 2D 绘制零依赖。
双层 SVG 波形反向流动的水面背景,速度可调,适合页脚与分区过渡。
conic 渐变旋转的涡旋光雾,悬停加速,适合 CTA 与分区底景。
光点沿 SVG 曲线巡航拖尾的背景动效,路线固定、速度与亮度可调。
两束光相向而行,相遇迸发粒子雨;点击画面可立即触发一次对撞。
网格与圆点双模式图案背景,指针划过处局部点亮,可一键切换图案。
流动渐变叠加 SVG fractalNoise 颗粒的质感背景,悬停颗粒更明显。
两层点阵交错呼吸的半色调动效背景,像印刷网板在明暗起伏。
斜纹、横纹、竖纹三方向条纹纹理,持续漂移,可随时切换方向。
多条相位错开的 SVG 线条波浪轻轻起伏,悬停放大振幅。
点击网格任意格子,涟漪按距离一圈圈扩散点亮,全部本地 CSS 动画。
CSS 透视网格地面缓慢飞行,指针点亮脚下区域,营造空间感底景。
多层色带渐变缓慢流动的柔和背景,悬停暂停,适合分区与卡片底色。
两束追光随指针对称移动,一暖一冷,比单侧追光更有舞台感。
光标周围的点阵被点亮,像揭开一层遮罩,双层点阵加圆形 mask 实现。
光斑沿容器边框持续巡航的发光效果,悬停加速,可包裹任意内容。
卡片内星点缓缓穿行,悬停加速的星空卡底,canvas 实现零依赖。
圆环、胶囊与方块等几何图形渐变拼贴缓慢漂浮,悬停加速。
canvas 有序抖动(Bayer 矩阵)把旋转光球实时转成网点画像,悬停反色。
像素马赛克随指针推开、松手弹簧归位的交互背景,canvas 实现。
把文字按亮度采样成 ASCII 风格字符画像,指针处字符实时扰动。
三层色版随指针倾斜错位的色散效果,模拟镜头色差,纯 CSS 混合模式。
容器内星光闪烁、光束巡游,悬停时全部加速穿梭。
句中关键词循环上翻,手动切换与减少动态回退。
逐字打印与删除,呼吸光标;循环展示多条文案。
标题按词依次淡入上浮,可重播。
随机字符逐位收敛成目标文本,可重播。
悬停时字母逐个点亮色彩并轻微上浮。
描边常驻,悬停时渐变填充从左向右扫入。
悬停时 SVG 湍流位移滤镜让笔画扭动。
翻词时容器宽度平滑自适应,词面同步上翻。
换词时整句重新排版,邻居词以 FLIP 动画平滑让位。
进入视野后荧光笔从左划过重点词,可重播。
手绘圈注沿路径描绘滑入,圈住所指的词。