Next.jsTypeScriptReact游戏站

Bytey — Next.js 游戏站模板

作者 VoxDroid

Bytey：将编程过程游戏化的暗色宠物养成界面模板，基于Next.js与TypeScript。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

暗色模式沉浸式游戏 UI，视觉风格统一

基于 Next.js 13+、TypeScript、Tailwind CSS 构建

Framer Motion 实现宠物动画与交互动效

模块化组件设计，便于扩展和定制

内置背包、收藏品、每日任务等面板（UI 为主）

提供实时在线演示，可快速体验效果

模板详细介绍

Bytey 是一个用 Next.js 和 TypeScript 构建的“游戏化编程伴侣”界面模板，核心概念是让一只虚拟宠物随着你的编码活动成长。项目提供了一套完整的暗色模式 UI，包含宠物展示、状态条、背包、收藏品图鉴、每日任务和商店等面板，并配有 Framer Motion 驱动的交互动画。整体视觉风格偏向沉浸式游戏，适合作为互动网页游戏的界面起点。

当前版本的重点在 UI 呈现，仅实现了最基础的游戏逻辑（如宠物状态展示和简单的交互），交易、GitHub 集成、宠物完整进化等均未实现，README 也明确标注了这些限制。因此，它更适合作为前端原型或设计参考，而非开箱即用的完整产品。若想投入生产，你需要自行补充后端服务、数据持久化以及完整的游戏规则逻辑。

项目结构清晰，组件划分明确（如 pet-visual、inventory-panel 等），并使用了 Zustand 管理宠物状态，方便在此基础上扩展。部署方面，官方提供了 Vercel 在线演示，本地运行只需 Node.js 18+ 和常规的 npm 安装步骤。

可直接运行网页游戏

适合你的项目吗？

适用场景

构建编程学习或开发者工具的 gamified 前端界面
作为虚拟宠物养成类游戏的 UI 原型
学习 Next.js 与 Tailwind CSS 组合的暗色主题设计
快速搭建一个带交互效果的演示项目

适合人群

前端开发者，尤其是 React/Next.js 技术栈
需要游戏化界面模板的产品经理或设计师
对虚拟宠物互动感兴趣的爱好者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆仓库后，需 Node.js 18+ 环境，执行 npm install 安装依赖，再运行 npm run dev 启动开发服务器。
2
默认端口为 3000。
3
注意项目仅支持暗色模式，且当前无后端集成，所有数据均为静态或本地状态。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

MIT许可证允许免费使用、修改、分发和商用，仅需保留版权与许可声明。README未附加额外限制。

使用时需要遵守

保留原作者版权声明和 MIT 许可证声明。
保留版权声明和许可声明于所有副本或实质部分

额外费用与待核对事项

README未明确说明游戏截图、预览图片等素材的授权范围

查看原文依据

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software
许可证原文