https://github.com/cromemadnd/arknightsui-react-template
A react template based on the UI style of Arknights.
https://github.com/cromemadnd/arknightsui-react-template
arknights headlessui react tailwindcss template
Last synced: 5 months ago
JSON representation
A react template based on the UI style of Arknights.
- Host: GitHub
- URL: https://github.com/cromemadnd/arknightsui-react-template
- Owner: Cromemadnd
- License: mit
- Created: 2025-04-06T10:17:24.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-04-09T11:14:57.000Z (9 months ago)
- Last Synced: 2025-06-11T13:59:25.899Z (7 months ago)
- Topics: arknights, headlessui, react, tailwindcss, template
- Language: TypeScript
- Homepage:
- Size: 37 MB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Arknights UI React Template
### 本项目仅作学习与练习用途，与《明日方舟》游戏本体无关联，版权归鹰角网络所有。若有侵权，请联系本人删除。
## 项目简介
这是一个基于《明日方舟》游戏UI风格的网页模板，使用React 19 (Vite + TS) + Tailwind CSS + Headless UI开发，旨在方便相关二次创作。
点击隐藏按钮可以隐藏UI，隐藏时点击助理立绘可以显示UI。点击左上角设置按钮播放/暂停BGM。
试着仿照游戏内的重力感应效果，做了UI根据鼠标位置进行3D变换的效果。
（也写了重力感应的代码，但是不知为啥不生效）
请勿将本项目用于商业用途。
## 安装指南
```bash
# 克隆仓库
git clone https://github.com/Cromemadnd/ArknightsUI-React-Template.git
# 安装依赖
npm install
# 启动开发服务器
npm run dev
```
## 贡献指南
欢迎提交Pull Request或Issue来改进本项目。
### TODO
1. 补充按钮图标
2. 完善主题切换系统
3. 修复移动端重力感应
4. 完善细节
## 许可证
[MIT License](./LICENSE)
## 使用的素材
### 字体
[Samigirian Serif](https://github.com/Siphercase/Samigirian)
[思源黑体 CN VF](https://www.fonts.net.cn/font-39307199570.html)
[方正准雅宋 GBK](https://www.fonts.net.cn/font-32533345155.html)
[8BitOperator](https://www.1001freefonts.com/8-bit-operator.font)
[Novecento Wide Normal](https://github.com/TimWangZi/The-font-of-Arknights/blob/master/font/Novecento-Wide-Normal-2.otf)
### svg图标
左上角图标与加号图标来源: [iconfont](https://www.iconfont.cn/)
电池图标与招募图标、等级图标、隐藏与切换按钮为自制。
### 龙门币、合成玉、源石图标，背景图片与BGM
均来自[PRTS.wiki](https://prts.wiki)。
### 按键点击音效
来自游戏录制。
### 助理立绘
本人使用[Tensor.Art](https://tusiart.com/)生成，不持有版权。