CreatorStarMap - AI创作者星图

一个展示AI创作者社区的互动式星图可视化应用。通过动态星空效果和流畅的动画交互，以独特的方式连接和展示AI创作者们。

🌟 项目背景

本项目源于「乔木自由分享群」，这是一个AI爱好者和创作者互相学习交流的社群。群友们通过公众号自荐的方式，分享各自的创作内容和AI实践经验。为了更好地展示和发现这些优质的创作者，我们创建了这个互动式的星图，让每位创作者都如星空中的明星一般闪闪发光。

🎯 项目目标：通过创新的可视化方式，帮助大家发现优质的AI创作者，促进知识分享与交流。

📸 项目预览

🎬 动态演示

🖼️ 界面截图

🎥 详细介绍视频

https://github.com/geekjourneyx/CreatorStarMap/blob/main/intro.mp4

✨ 特性

• 🌌 沉浸式星空体验 - 多层视差滚动背景，营造深邃星空氛围
• ⭐ 交互式星图 - 每个创作者都是一颗可点击的星星
• 🎭 流畅动画 - 基于GSAP和Flip插件的高性能动画效果
• 🔍 实时搜索 - 支持按名称、介绍或作者进行快速筛选
• 🎲 灵感碰撞 - 随机发现功能，探索意想不到的创作者
• 📱 响应式设计 - 适配各种屏幕尺寸和设备

🚀 快速开始

本地运行

# 克隆仓库
git clone https://github.com/geekjourneyx/CreatorStarMap.git

# 进入项目目录
cd CreatorStarMap

# 直接在浏览器中打开 index.html
open index.html

无需任何构建工具或依赖安装，项目使用纯HTML/CSS/JavaScript构建。

在线体验

访问 CreatorStarMap 演示 立即体验。

🏗️ 项目结构

CreatorStarMap/
├── index.html          # 主页面，包含完整的UI和交互逻辑
├── data.js             # 创作者数据存储
├── data.csv            # 原始数据源（CSV格式）
├── README.md           # 项目说明文档
├── CLAUDE.md           # AI辅助开发指南
└── .gitignore          # Git忽略文件

💡 技术架构

• 前端框架: 原生JavaScript（零框架依赖）
• 动画引擎: GSAP 3.12.5
  • 核心库：高性能动画和缓动
  • Flip插件：流畅的状态转换动画
• 样式方案: 现代CSS + Flexbox布局
• 数据格式: JavaScript对象数组

🎨 核心功能

星图可视化

• 创作者以发光星星的形式展示
• 支持悬停放大和名称显示
• 开场时星星从中心向外扩散的欢迎动画

详情卡片

• 点击星星弹出创作者详细信息
• 包含公众号名称、简介、作者和联系方式
• 使用Flip动画实现丝滑的展开/收起效果

搜索与过滤

• 实时搜索框，支持中文输入
• 按创作者名称、简介内容或作者昵称进行匹配
• 未匹配项自动降低透明度

灵感碰撞

• 一键随机发现功能
• 炫酷的宇宙缩放和星星重新分布动画
• 自动展示随机选中的创作者详情

📊 数据管理

数据结构

每个创作者包含以下信息：

{
  "name": "创作者公众号名称",
  "intro": "一句话介绍", 
  "author": "作者昵称",
  "wechat": "微信联系方式"
}

添加新创作者

1. 在 data.csv 中添加新行数据
2. 将CSV数据转换为JavaScript格式
3. 更新 data.js 中的 accounts 数组
4. 刷新页面即可看到新增的星星

🎯 性能优化

• 使用 will-change: transform, opacity 优化动画性能
• CDN加载GSAP库，提升首次访问速度
• 纯静态资源，支持CDN分发
• 响应式图片和字体加载优化

🤝 贡献指南

欢迎提交Issue和Pull Request！

1. Fork本仓库
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙋‍♂️ 联系方式

如有问题或建议，欢迎通过以下方式联系：

• 项目Issues: GitHub Issues
• 微信群：乔木自由分享群
• 项目维护：@geekjourneyx

---

⭐ 如果这个项目对你有帮助，请给个Star支持一下！