FORMA
COMPONENT LIBRARY / 104 COMPONENTS

组件中心。

FORMA 组件中心:104 个原创 React 组件,覆盖 输入与控制、导航与选择、反馈与浮层、内容展示、背景与动效。零运行依赖,可调参数并导出源码。

输入与控制 · 9 个

导航与选择 · 9 个

反馈与浮层 · 9 个

内容展示 · 37 个

Fold / 内容折叠组件预览Accordion · v0.9.0Fold / 内容折叠

独立展开/收起内容,保留正确的按钮与区域语义。

Arc / 垂直时间线组件预览Timeline · v0.9.0Arc / 垂直时间线

里程碑步骤列表,点击节点切换焦点,沿垂直轴展开进程。

Orbit / 卡片轮播组件预览Carousel · v0.9.0Orbit / 卡片轮播

按钮、圆点与左右方向键切换内容,循环浏览重点信息。

Grid / 可排序表格组件预览Table · v0.9.0Grid / 可排序表格

点击表头按数量或状态排序,本地计算,不请求服务器。

Pulse / 评分组件预览Rating · v0.9.0Pulse / 评分

星级评分:悬停预览、键盘可用、结果即时播报,不发送数据。

Voice / 推荐语轮播组件预览Testimonials · v0.9.0Voice / 推荐语轮播

引用自动轮播、可暂停、可跳转;演示文案,非真实客户推荐。

Lumina / 聚光卡片组件预览卡片 · v0.9.0Lumina / 聚光卡片

卡片内径向光晕跟随指针,离开渐隐;适合让视线落在内容附近。

Glare / 眩光卡片组件预览卡片 · v0.9.0Glare / 眩光卡片

一道斜向高光随指针在卡片表面扫过,离开后归位。

Cipher / 加密卡片组件预览卡片 · v0.9.0Cipher / 加密卡片

乱码逐位收敛成目标文本,离开重新打乱;触摸设备用按钮解密。

Focus / 聚焦卡组组件预览卡组 · v0.9.0Focus / 聚焦卡组

悬停当前卡片时,其余卡片同步降低清晰度,视线自然集中。

Unfold / 展开卡片组件预览折叠 · v0.9.0Unfold / 展开卡片

点击卡片后详情区以网格行高过渡平滑展开,再点收起。

Magnet Deck / 磁吸拖拽卡组件预览拖拽 · v0.9.0Magnet Deck / 磁吸拖拽卡

按住卡片任意拖动,松手后以弹性曲线回到原位。

Comet / 彗星卡片组件预览卡片 · v0.9.0Comet / 彗星卡片

卡片随指针轻微倾斜,一颗拖着渐变尾迹的光点反向游走。

Wobble / 摆动卡片组件预览卡片 · v0.9.0Wobble / 摆动卡片

卡片朝指针方向平移并轻微放大,离开后弹性摆回原位。

Cascade / 卡片堆叠组件预览堆叠 · v0.9.0Cascade / 卡片堆叠

一叠卡片按节奏轮换露出最上面一张,悬停暂停,也可手动切换。

Hover Slide / 滑动高亮组件预览卡组 · v0.9.0Hover Slide / 滑动高亮

一排卡片背后有一片光,悬停或点按时滑向当前那张。

Vector In / 方向感知组件预览揭示 · v0.9.0Vector In / 方向感知

按指针进入的方向,从对应边缘滑入一层遮罩,标注当前卡片。

Ring / 渐变描边扩散组件预览卡片 · v0.9.0Ring / 渐变描边扩散

悬停时渐变描边从边缘向内生长,离开再退回去。

Emerge / 文本浮现卡组件预览卡片 · v0.9.0Emerge / 文本浮现卡

悬停卡片时,底部说明文字从下方渐显上浮。

Bento / 便当网格组件预览网格 · v0.9.0Bento / 便当网格

多尺寸卡片按便当格排布,整体轻微倾斜,悬停单格上浮。

Reflow / 布局动画网格组件预览布局动画 · v0.9.0Reflow / 布局动画网格

点击卡片时它跨行跨列扩张,邻居们以 FLIP 动画平滑让位。

Contrast / 前后对比组件预览对比 · v0.9.0Contrast / 前后对比

拖动或用方向键移动分割线,对比两种状态的渐变画面。

Zoom Lens / 放大镜组件预览放大镜 · v0.9.0Zoom Lens / 放大镜

悬停画面出现圆形放大镜,内部是两倍放大的同一幅矢量画面。

Pin / 立体图钉组件预览标记 · v0.9.0Pin / 立体图钉

渐变圆钉悬停时向后立起,投影同步缩小,适合作品锚点。

Badge Stack / 徽章画廊组件预览徽章 · v0.9.0Badge Stack / 徽章画廊

一排圆形徽章,悬停时上方展开一组渐变缩略小图。

Void / 空态卡片组件预览空态 · v0.9.0Void / 空态卡片

插画式空状态配行动按钮;点击后逐条长出第一批条目。

Ghost / 骨架卡组组件预览骨架 · v0.9.0Ghost / 骨架卡组

骨架屏以扫光动画占位,读取完成后渐换成真实内容行。

Flap / 翻牌屏组件预览翻牌显示 · v0.9.0Flap / 翻牌屏

机场翻牌式字符显示,变化的字符逐格翻动,自动轮换可手动切。

Codeview / 代码块组件预览代码 · v0.9.0Codeview / 代码块

轻量语法高亮、行号与一键复制;调用真实剪贴板 API。

Terminal / 终端窗组件预览终端 · v0.9.0Terminal / 终端窗

mac 风窗口:命令逐条键入、输出流式出现,可重放。

Keys / 机械键盘组件预览键盘 · v0.9.0Keys / 机械键盘

可点按的键盘阵列,WebAudio 本地合成按键音。

Coverflow / 全屏图轨组件预览轮播 · v0.9.0Coverflow / 全屏图轨

中心放大、两侧透视后退的封面轨;键盘 ←→ 与点按切换。

Orbit Gallery / 苹果轮播组件预览轮播 · v0.9.0Orbit Gallery / 苹果轮播

中心卡片放大、两侧后退的画廊;支持拖拽甩动切换。

Loop Deck / 无限卡组组件预览滚动墙 · v0.9.0Loop Deck / 无限卡组

纵向无限滚动的评价卡墙,悬停暂停,减少动态回退。

Cube Marquee / 立体跑马组件预览滚动墙 · v0.9.0Cube Marquee / 立体跑马

两行文字在透视网格上反向流动的立体跑马灯。

Atlas / 动效世界地图组件预览数据地图 · v0.9.0Atlas / 动效世界地图

canvas 点阵世界地图,城市间弧线流动光点,点按选中城市。

Orbit Sphere / 点阵地球组件预览数据地球 · v0.9.0Orbit Sphere / 点阵地球

正交投影的旋转点阵球,城市标记随面旋转,可拖拽转动。

背景与动效 · 40 个

Halo / 追光背景组件预览Background · v0.9.0Halo / 追光背景

指针位置驱动局部光场;触摸设备使用稳定的中心构图。

Ribbon / 循环排版组件预览Text animation · v0.9.0Ribbon / 循环排版

连续滚动、悬停暂停、手动播放控制与减少动态回退。

Plane / 悬浮卡片组件预览Interaction · v0.9.0Plane / 悬浮卡片

基于指针的3D倾斜,离开复位;减少动态时保持静态。

Aurora / 极光背景组件预览氛围背景 · v0.9.0Aurora / 极光背景

多层彩色光晕缓慢漂移的极光氛围背景,指针可牵引光带,适合首屏与分区底景。

Meteor / 流星阵列组件预览流星动效 · v0.9.0Meteor / 流星阵列

斜向流星周期性划过夜空,数量与节奏可调,悬停暂停,适合封面与夜色主题。

Starfall / 流星星空组件预览星空背景 · v0.9.0Starfall / 流星星空

静态星点闪烁叠加偶发流星划落的星空背景,密度与周期可调。

Glint / 闪耀粒子组件预览粒子画布 · v0.9.0Glint / 闪耀粒子

canvas 星芒粒子随机闪烁,指针附近的星更亮,纯 2D 绘制零依赖。

Tide / 波浪背景组件预览波浪背景 · v0.9.0Tide / 波浪背景

双层 SVG 波形反向流动的水面背景,速度可调,适合页脚与分区过渡。

Vortex / 涡旋背景组件预览涡旋背景 · v0.9.0Vortex / 涡旋背景

conic 渐变旋转的涡旋光雾,悬停加速,适合 CTA 与分区底景。

Beam / 光束巡航组件预览光束动效 · v0.9.0Beam / 光束巡航

光点沿 SVG 曲线巡航拖尾的背景动效,路线固定、速度与亮度可调。

Collision / 光束对撞组件预览粒子对撞 · v0.9.0Collision / 光束对撞

两束光相向而行,相遇迸发粒子雨;点击画面可立即触发一次对撞。

Gridwash / 网格点阵组件预览图案背景 · v0.9.0Gridwash / 网格点阵

网格与圆点双模式图案背景,指针划过处局部点亮,可一键切换图案。

Grain / 噪声渐变组件预览质感背景 · v0.9.0Grain / 噪声渐变

流动渐变叠加 SVG fractalNoise 颗粒的质感背景,悬停颗粒更明显。

Halftone / 呼吸点阵组件预览点阵动效 · v0.9.0Halftone / 呼吸点阵

两层点阵交错呼吸的半色调动效背景,像印刷网板在明暗起伏。

Ridge / 鳞纹背景组件预览条纹纹理 · v0.9.0Ridge / 鳞纹背景

斜纹、横纹、竖纹三方向条纹纹理,持续漂移,可随时切换方向。

Wirewave / 线条波浪组件预览线条波浪 · v0.9.0Wirewave / 线条波浪

多条相位错开的 SVG 线条波浪轻轻起伏,悬停放大振幅。

Ripple Grid / 涟漪网格组件预览点击涟漪 · v0.9.0Ripple Grid / 涟漪网格

点击网格任意格子,涟漪按距离一圈圈扩散点亮,全部本地 CSS 动画。

Boxes / 立体网格组件预览透视网格 · v0.9.0Boxes / 立体网格

CSS 透视网格地面缓慢飞行,指针点亮脚下区域,营造空间感底景。

Flow / 渐变流动组件预览渐变流动 · v0.9.0Flow / 渐变流动

多层色带渐变缓慢流动的柔和背景,悬停暂停,适合分区与卡片底色。

Duo Light / 双侧追光组件预览双侧追光 · v0.9.0Duo Light / 双侧追光

两束追光随指针对称移动,一暖一冷,比单侧追光更有舞台感。

Reveal Dots / 点阵揭示组件预览遮罩揭示 · v0.9.0Reveal Dots / 点阵揭示

光标周围的点阵被点亮,像揭开一层遮罩,双层点阵加圆形 mask 实现。

Edge Glow / 流光边框组件预览发光边框 · v0.9.0Edge Glow / 流光边框

光斑沿容器边框持续巡航的发光效果,悬停加速,可包裹任意内容。

Star Card / 星点卡片组件预览星空卡片 · v0.9.0Star Card / 星点卡片

卡片内星点缓缓穿行,悬停加速的星空卡底,canvas 实现零依赖。

Prism Field / 几何晕影组件预览几何拼贴 · v0.9.0Prism Field / 几何晕影

圆环、胶囊与方块等几何图形渐变拼贴缓慢漂浮,悬停加速。

Dither / 抖动画像组件预览抖动画像 · v0.9.0Dither / 抖动画像

canvas 有序抖动(Bayer 矩阵)把旋转光球实时转成网点画像,悬停反色。

Pixel Storm / 像素扰动组件预览像素扰动 · v0.9.0Pixel Storm / 像素扰动

像素马赛克随指针推开、松手弹簧归位的交互背景,canvas 实现。

Glyph / 字符画像组件预览字符画像 · v0.9.0Glyph / 字符画像

把文字按亮度采样成 ASCII 风格字符画像,指针处字符实时扰动。

Chroma / 色散图像组件预览色散效果 · v0.9.0Chroma / 色散图像

三层色版随指针倾斜错位的色散效果,模拟镜头色差,纯 CSS 混合模式。

Canopy / 容器光罩组件预览容器 · v0.9.0Canopy / 容器光罩

容器内星光闪烁、光束巡游,悬停时全部加速穿梭。

Flipword / 词组翻转组件预览文字动画 · v0.9.0Flipword / 词组翻转

句中关键词循环上翻,手动切换与减少动态回退。

Typewriter / 打字机组件预览文字动画 · v0.9.0Typewriter / 打字机

逐字打印与删除,呼吸光标;循环展示多条文案。

Surface / 逐词浮现组件预览文字动画 · v0.9.0Surface / 逐词浮现

标题按词依次淡入上浮,可重播。

Decode / 乱码解密组件预览文字动画 · v0.9.0Decode / 乱码解密

随机字符逐位收敛成目标文本,可重播。

Spectrum / 彩色文字组件预览文字动画 · v0.9.0Spectrum / 彩色文字

悬停时字母逐个点亮色彩并轻微上浮。

Outline / 描边悬停组件预览文字动画 · v0.9.0Outline / 描边悬停

描边常驻,悬停时渐变填充从左向右扫入。

Squiggle / 波纹文字组件预览文字动画 · v0.9.0Squiggle / 波纹文字

悬停时 SVG 湍流位移滤镜让笔画扭动。

Widthflip / 定宽翻词组件预览文字动画 · v0.9.0Widthflip / 定宽翻词

翻词时容器宽度平滑自适应,词面同步上翻。

Reflow Text / 排版翻转组件预览文字动画 · v0.9.0Reflow Text / 排版翻转

换词时整句重新排版,邻居词以 FLIP 动画平滑让位。

Marker / 划线高亮组件预览文字动画 · v0.9.0Marker / 划线高亮

进入视野后荧光笔从左划过重点词,可重播。

Pointer / 指针标注组件预览文字动画 · v0.9.0Pointer / 指针标注

手绘圈注沿路径描绘滑入,圈住所指的词。

在编辑器中浏览 ↗看看模板