🏫 江苏省海门中学主页

一个使用 Next.js 和 p5.js 开发的交互式主页，具有动态落球效果。

功能特性

• 动态落球动画：页面加载时，带有文字的彩色球体从顶部落下
• p5.js 创意编程：使用 p5.js 框架实现生成艺术效果
• 物理引擎：球体具有重力、弹跳和碰撞效果
• 响应式设计：完美适配桌面端和移动端
• 深色模式支持：自适应系统主题偏好
• 文字展示：球体包含"江苏省海门中学"及其英文名称的文字

开始使用

安装依赖

npm install

开发模式

npm run dev

打开 http://localhost:3000 查看网站。

构建生产版本

npm run build
npm start

自定义内容

修改球体文字

编辑 src/components/HomePage.tsx 文件中的 textChars 数组：

const textChars = [
  '江', '苏', '省', '海', '门', '中', '学',
  'H', 'a', 'i', 'm', 'e', 'n',
  // ... 添加或修改文字
];

修改球体颜色

编辑 colors 数组自定义球体颜色：

const colors = [
  '#3b82f6', // blue
  '#8b5cf6', // purple
  // ... 添加更多颜色
];

调整球体数量

在 setup 函数中修改 numBalls 变量：

const numBalls = 30; // 调整数量

技术栈

• Next.js 16 - React 框架
• TypeScript - 类型安全
• Tailwind CSS 4 - 样式框架
• React 19 - UI 库
• p5.js - 创意编程和生成艺术框架

部署

本项目可以轻松部署到各种平台：

• Vercel （推荐）
• Netlify
• Railway
• 任何支持 Node.js 的托管服务

许可证

MIT