动画特效

snk 贪吃蛇贡献图

snk 是一个把 GitHub 贡献热力图变成贪吃蛇动画的趣味工具,蛇会按格子逐个“吃掉”你的提交记录,输出为动态 SVG 或 GIF。常用于装饰 GitHub 个人主页 README,可通过 GitHub Action 每日自动生成,并支持自定义配色(github-dark / github-light 等),同时提供 npm 包。

canvas-confetti

一个基于 HTML5 Canvas 的轻量级 JavaScript 礼花(confetti)动画库,让开发者轻松为网页添加庆祝彩带特效。可自定义粒子数量、角度、扩散、速度、重力等参数,内置方块/圆形/星形及自定义 SVG、emoji 形状,并提供 disableForReducedMotion 选项尊重用户的减弱动效偏好。

impress.js

一个基于 CSS3 变换(transform)与过渡(transition)的网页演示框架,灵感来自 Prezi。它在一块无限画布上通过定位、旋转、缩放元素来组织幻灯片,支持 3D 视觉效果和演讲者视图,让演示突破传统幻灯片的线性限制。

tsParticles

一个零依赖的 TypeScript 粒子特效库,可轻松创建高度可定制的粒子动画、彩带爆炸和烟花效果,常用作网页动态背景。内置雪花、烟花、彩纸等 20 多种预设,并提供 React、Vue、Angular、Svelte、Solid、Web Components 等众多框架的官方组件。

Matter.js

一个面向 Web 的 JavaScript 2D 刚体物理引擎,让开发者无需从零编写物理计算即可在浏览器中实现真实的物理模拟。支持刚体、复合体、凸/凹多边形等物体,提供广/中/窄三阶段碰撞检测、约束、重力、事件系统、射线投射查询、静止休眠与时间缩放优化,内置 Canvas 渲染器并支持插件扩展,可在浏览器和 Node.js 中运行。

gallery 照片墙

一个用 React + CSS3 实现的交互式照片墙演示项目。点击图片可随机重排布局、将图片移到中心或翻转,底部导航按钮可定位展示对应图片。主要用于学习 React 组件交互与 CSS3 transform/transition 动画。

css3d-wall 3D照片墙

基于 Three.js CSS3DRenderer 的三维照片墙/头像墙项目,适合大屏签到墙、员工展示等场景。支持异步加载数据动态渲染,并提供 OrbitControls、TrackballControls 等交互控制和彩带动画效果。

可视化图表

Chart.js

Chart.js 是一个简单灵活的开源 JavaScript 图表库,基于 HTML5 Canvas 渲染,提供 8 种图表类型并支持混合图表、多种坐标轴和丰富动画。响应式设计、支持 Tree-shaking(最小可至 14KB),可处理百万级数据点,是前端数据可视化的常用方案。

Mermaid

一个用文本语法生成图表和流程图的开源 JavaScript 库。开发者用类似代码的简洁文本即可描述流程图、时序图、甘特图等,使图表可纳入版本控制并方便嵌入文档;提供在线实时预览编辑器,并被大量平台与工具集成。

GLTF → React Three Fiber

一个在线转换工具,将拖入的 GLTF 3D 模型文件自动转换为 React Three Fiber 组件代码,免去手写繁琐声明式代码。由 Poimandres 社区维护,灵感来自命令行工具 gltfjsx,降低在 React 项目中使用 3D 模型的门槛。

glTF Report

一个在线的 glTF/GLB 3D 模型检查与分析工具,可在浏览器中拖入模型查看网格、材质、纹理、动画等详细统计信息,并能借助 glTF-Transform 对模型进行压缩与优化。由 glTF-Transform 作者 Don McCurdy 开发,常用于排查模型体积和性能问题。

DataV.GeoAtlas 地理小工具

阿里云 DataV 提供的免费地理边界数据工具,可在线选择中国各级行政区(省、市、区县),下载对应的 GeoJSON 边界数据。它解决了制作地图可视化时获取行政区划边界数据的难题,常配合 ECharts、DataV 等可视化工具使用。

L7 Editor

蚂蚁 AntV 团队基于 L7 地理空间可视化引擎打造的在线地理数据绘制工具。支持在地图上绘制点、线、面等地理要素,编辑其属性并导出为 GeoJSON 等格式,适合快速制作和处理地理空间数据。

L7(AntV 地理可视化)

蚂蚁 AntV 出品的地理空间数据可视化分析引擎 L7 的文档/示例页面,本页演示行政区域数据的基础可视化。L7 以图形符号学为理论基础,支持点、线、面、热力、3D 等多种地图可视化图层,用于构建大规模地理数据应用。

Markmap

一个将 Markdown 转换为思维导图的开源工具,理念是 markdown + mindmap。它能把 Markdown 文档/大纲实时可视化为可交互的思维导图,提供在线 REPL 试用、VSCode 扩展及供开发者集成的 API。

geojson.io

一个由 Mapbox 驱动的在线 GeoJSON 编辑与可视化工具。可在地图上直接绘制点、线、面,导入/导出 GeoJSON、KML、CSV 等格式数据,并实时编辑要素属性,常用于快速制作和调试地理数据。

WordArt

一个在线词云(Word Cloud)生成工具,无需平面设计经验即可创建独特的词云图。可自定义词汇、形状、字体、颜色和布局,频率更高的词显示更大,还支持将作品制成马克杯、鼠标垫等周边商品。

deck.gl

由 vis.gl(Uber 开源) 出品的大规模数据可视化框架,基于 WebGL/WebGPU 实现 GPU 加速渲染。擅长在地图上流畅展示数百万级地理空间数据点,提供散点、热力、弧线、网格、3D 等多种图层,可与 Mapbox 等地图库无缝集成,广泛用于城市、交通、科学等数据可视化。

3D Geographic Map

一个部署在 Vercel 上的 3D 地理地图演示项目,以三维立体方式渲染地理信息与地图数据,提供交互式的地图浏览与可视化展示。属于地图/地理数据可视化的 Demo 应用。

媒体视频

Plyr

一个用原生 JavaScript 编写的轻量级媒体播放器库,为 HTML5 视频/音频以及 YouTube、Vimeo 提供统一的 API 和外观。它注重可访问性(支持 WebVTT 字幕、屏幕阅读器、键盘操作),界面可通过 CSS 变量高度自定义,并支持 hls.js/Shaka/dash.js 流媒体、画中画和倍速播放。

Flipbook

一个在线翻页书(电子杂志/画册)制作与阅读工具,可将 PDF 转换为具有逼真翻页动画的数字翻书。适合发布电子杂志、产品手册、画册等,支持嵌入分享,让静态文档拥有沉浸式的翻阅体验。

动画库

GSAP MotionPath 演示合集(CodePen)

GSAP 官方在 CodePen 上整理的 MotionPath(路径运动)插件 How-To 演示合集,集中展示如何让元素沿 SVG 路径或自定义路径做动画。适合学习 GSAP MotionPathPlugin 的各种用法与效果。

React Spring

react-spring 是 React 上的一个动画库。它基于弹簧物理原理实现,尽可能的使元素的动画轨迹与真实世界更接近,更易于我们理解与使用

animejs

anime.js是一款功能强大的javascript动画库,anime.js 可以和CSS3 属性,SVG,DOM 元素和JS 对象一起工作,制作出各种高性能,平滑过渡的动画效果。

MOVING LETTERS

anime.js 字符效果库

可视化库

React Three Fiber

React-three-fiber 是 three.js 的 React 渲染器。使用可重用、独立的组件以声明方式构建您的场景,这些组件对状态做出反应,易于交互并且可以参与 React 的生态系统。

three.js

创建一个易于使用、轻量级、跨浏览器的通用 3D 库

D3

用于使用 Web 标准可视化数据。 D3 帮助您使用 SVG、Canvas 和 HTML 使数据栩栩如生。

Cytoscape.js

Cytoscape.js 是一个功能齐全的图论库。可以用于建模或可视化关系数据。Cytoscape.js 包含一个图论模型和一个可选的渲染器来显示交互式图形

Mapbox GL JS

Mapbox GL JS 是一个客户端 JavaScript 库,用于使用 Mapbox 的现代地图技术构建网络地图和网络应用程序

ZRender

ZRender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

PixiJS

Pixi是一个非常快的2D sprite渲染引擎。可以轻松地使用JavaScript和其他HTML5技术制作游戏和应用程序

Fabric.js

Fabric.js 是一个强大而简单的Javascript HTML5 画布库

G2

G2 是一套简洁的渐进式可视化语法,用于报表搭建、数据探索以及可视化叙事。