Web3 × AI 官网模板 | React 19 + GSAP 高交互落地页，开箱即用

基于 React 19 + Vite 6 + GSAP 打造的 Web3 项目官网模板。开箱即用，替换品牌素材即可上线。

一个 Web3 项目的官网，是投资人与社区对你的第一印象。这套模板把滚动动画、移动端适配、多链购买菜单等耗时工程全部做完，你只需替换品牌素材与文案，半天内即可获得一个高品质官网。

模板亮点

1. 8 大区块，开箱即用

Hero（导航 + 主视觉）、Experiences（项目介绍）、Backed（投资机构）、Blockchain（产品能力）、Blog（动态资讯）、Community（社区）、Footer、Copyright 一应俱全，页面结构无需重构。

2. 专业级 GSAP 动画系统

• ScrollTrigger 滚动触发动画：区块随滚动进入视窗时依次入场，离开时反向退出
• SplitText 文字动效：标题逐字浮现的打字机效果
• stagger 交错编排：logo、卡片按节奏依次入场
• @gsap/react 集成：useGSAP 自动管理动画生命周期，无需手动清理

3. Web3 场景组件

• 多链购买菜单：内置 BSC / Ethereum / Arbitrum / Polygon 四条链
• 合约地址一键复制：复制成功后 Sonner Toast 即时反馈
• 认证标识位：CoinGecko / CoinMarketCap 展示位
• 社区入口：Discord / Twitter / Telegram

4. 完整响应式适配

• 桌面端完整导航、移动端汉堡菜单双套方案
• react-device-detect 按设备渲染，Swiper 移动端单卡 / 桌面端三卡自适应

5. 自动轮播

投资人 logo 流与 Blog 卡片均基于 Swiper 自动播放，支持悬停暂停、可点击分页。

6. 轻量高性能

不依赖重型 UI 框架，动画仅使用 transform / opacity 触发 GPU 加速，构建产物小、加载快。

技术栈

技术	版本	用途
React	19	UI 框架
Vite	6	构建工具
GSAP + @gsap/react	3.13	滚动动画 / 文字动效
Swiper	11	轮播
Sonner	2	Toast 通知
copy-to-clipboard	3	合约地址复制
react-device-detect	2	设备检测

项目结构

ai-website/
├── src/
│   ├── assets/              # 品牌素材（logo、链图标、投资机构 logo 等）
│   ├── components/          # 8 大区块组件
│   │   ├── Hero.jsx         # 导航 + 主视觉 + 多链购买菜单
│   │   ├── Experiences.jsx  # 项目介绍
│   │   ├── Backed.jsx       # 投资机构轮播
│   │   ├── BlockChain.jsx   # 产品能力
│   │   ├── Blog.jsx         # 资讯轮播
│   │   ├── Community.jsx    # 社区入口
│   │   ├── Footer.jsx
│   │   └── Copyright.jsx
│   ├── styles/              # Hero 样式
│   ├── App.jsx              # 页面组装
│   ├── App.css / index.css  # 全局样式与主题变量
│   └── main.jsx
├── vite.config.js
└── package.json

快速开始

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 生产构建
npm run build

# 预览构建产物
npm run preview

Node.js >= 18。

二次开发指南

需求	操作
更换品牌	替换 src/assets 中的 logo 与图片，同名覆盖即可
修改文案 / 链接	各组件内文案与 href 直接修改
更换主题色	修改 src/index.css 中 :root 的 CSS 变量
调整字号	:root 内置 --xxs ~ --xxxl 流式字号变量
增删区块	在 App.jsx 中按需增删组件，无需改动其他代码

适用场景

AI / 区块链项目官网、DAO 组织、DeFi / NFT 项目、交易所、技术产品落地页，也可作为高交互动画模板用于任何产品官网。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	2~3 周起	半天上线
动画品质	需反复调优	专业动效开箱即用
移动端适配	需额外开发	双端适配已完成
Web3 组件	需自行实现	多链菜单 / 合约复制已内置
维护成本	自行承担	结构清晰，改文案即可迭代

在线预览

npm run build 后将 dist 目录部署至 Vercel / Netlify 等任意静态托管即可。

http://case.fedshare.cn/web3_ai