hatlas · VibeCoding前端

线上地址:hatlas.site

面向 vibecoding 与前端开发的常用效果图鉴（参考手册）：收录交互、动效、组件、移动端、图表与特效六大类共 166 个可交互演示，每个条目附可直接复用的实现，可作编写代码时的效果参考与素材库。

内容分类

区域	数量	内容
交互区域	40	开关、滑块、右键菜单、拖拽、翻页、滑动卡片、仪表盘等
动效区域	37	入场家族、加载器、悬停反馈、循环动效等
组件区域	33	按钮、表单控件、卡片、弹窗、标签页、命令面板等
移动区域	5	移动端常见交互模式
图表区域	39	架构图、流程图、时序图、甘特图、鱼骨图等 SVG 图表
特效区域	12	GSAP 驱动的高级动效：滚动视差/描边、逐字拆分、FLIP 布局、惯性投掷、形状变形、路径运动、物理弹射、乱码解码、手势识别、鼠标跟随

主要特性

• 浅色 / 深色双主题，一键切换并记忆偏好
• 全局动效暂停开关（尊重系统 reduced-motion，GSAP 全局时间线同步暂停）
• 搜索筛选 + Ctrl K 命令面板快速跳转
• 图表缩略图灯箱（缩放、拖动、滚轮）
• 目录导航带各区域实时计数
• 特效类区域基于本地化 GSAP 3.15（js/lib/，零 CDN 依赖）
• 代码抽屉：每张效果卡右下角「代码」，抽屉里是这条效果的完整实现（结构 + 样式 + 行为），可一键复制或「喂给 AI」；代码自包含——变量带 hatlas- 前缀防冲突、通用控件样式与小工具按需内联，复制即可用（特效区域需另带 GSAP 库）
• 分享友好：页面内置 Open Graph 标签，微信/QQ/Telegram 等分享链接时展示统一站点卡片（站名、标题、简介、logo）
• 使用指南弹窗与可关闭提示条：顶栏「使用指南」打开居中弹窗（背景模糊）；提示条每次进入都显示
• 响应式三档：≤640px 每行 1 卡 / 641–1319px 每行 2 卡 / ≥1320px 桌面 3 列；≤900px 隐藏悬浮目录与返回顶部，搜索提示键自动切换
• 附 SKILL 装备库单页：项目正在使用的前端与 UI 设计 Agent Skill 清单，可一键复制「喂给 AI」提示词

本地运行

双击 index.html 直接在浏览器打开即可——纯静态、零依赖、无构建，本地文件方式下全部功能（含图表 SVG 与特效区域）均正常。

如需通过 HTTP 服务访问（模拟真实部署环境），任选静态服务器托管项目根目录，唯一要求是 .svg 必须以 image/svg+xml 类型输出，否则图表区域缩略图/灯箱会裂成白块（图片解码失败）：

• Node：npx serve（自带正确 SVG MIME）
• Python：自定义 SimpleHTTPRequestHandler 并执行 mimetypes.add_type("image/svg+xml", ".svg")
• 不推荐 Windows 下的 python -m http.server：它把 .svg 按 text/plain 返回，浏览器拒绝渲染

目录结构

index.html        主页（六大类效果图鉴）
skill.html        SKILL 装备库单页
css/hatlas.css    设计系统 tokens / 壳 / 卡片 / 灯箱 / 搜索 / 命令面板
css/effects.css   各演示效果的样式与实现
js/hatlas.js      渲染 / 主题 / 搜索筛选 / 灯箱 / 命令面板 / 行为注册
js/hatlas-code.js 代码抽屉数据（构建脚本自动推导生成，图表区域无）
js/data.js        交互区域、动效区域数据
js/data2.js       组件区域、移动区域、图表区域数据
js/data3.js       特效区域数据（GSAP 演示）
js/ambient.js     角落粒子消散共享模块（主页与 skill 页共用）
js/skill.js       SKILL 页轻量引擎（手风琴 / 筛选 / 主题 / 复制）
js/skill-data.js  SKILL 页数据（15 项 Agent Skill）
js/lib/           GSAP 3.15.0 本地化库（核心 + 11 个插件，免 CDN）
charts/           39 张图表 SVG
img/              站点 logo、favicon 与分享封面（logo.png），演示配图在 img/demo/