AstroReact启动器

purrfectly-zen-astro — Astro 启动器模板

作者 fauziralpiandi

以猫为主题的冥想与正念练习网站模板，基于 Astro 与 React 构建，包含引导计时、呼吸动画和本地存储的纯前端逻辑。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

3 个预览视图

桌面端首页1 / 3

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

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

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

采集于 2026-10-04查看来源

值得关注的模板亮点

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

猫主题的冥想与正念练习界面，配猫插画与头像素材

交互式计时器，支持可定制的呼吸动画

预置 4-4-4-4 与 Purring Breath 两种呼吸节奏

纯客户端逻辑，无后端，练习状态用 localStorage 保存

Astro 基于文件的路由配合客户端导航，React 组件通过 @astrojs/react 集成

使用 Tailwind CSS、Framer Motion 与 Lucide React 构建界面与动效

模板详细介绍

Purrfectly Zen 是一个猫主题的冥想与正念 Web 应用模板，定位为帮助用户从噪音中抽离、回到平静与当下的练习页面。它使用 Astro 作为框架，并通过 @astrojs/react 集成 React 组件，样式使用 Tailwind CSS，动画使用 Framer Motion，图标使用 Lucide React。

模板的核心是引导式练习：提供带可定制呼吸动画的交互式计时器，并预置 4-4-4-4 与“Purring Breath”两种呼吸节奏。所有逻辑在客户端运行，没有后端，练习状态通过 localStorage 持久化。页面路由使用 Astro 基于文件的路由，并包含客户端导航。

项目结构上，React 组件放在 src/components（如 HomePage、ZenApp），Astro 布局放在 src/layouts（负责全局样式与 SEO），工具放在 src/lib，路由放在 src/pages，猫插画与头像等图片放在 public/images。自定义时可在 Layout.astro 中修改 CSS 变量（--primary、--background）与全局 SEO 标签，在 ZenApp.tsx 中增加呼吸模式或猫主题语句，或替换 public/images 中的图片以更换主题。

该模板采用 MIT 许可，可免费使用、修改、商用和分发代码，但演示图片、字体、图标等第三方素材需按各自许可单独核对；域名、托管、数据库、支付或 AI 等外部服务可能另外收费。README 未说明生产环境下的性能、可访问性或浏览器兼容性，使用前需自行验证。

AstroReact启动器

适合你的项目吗？

适用场景

搭建冥想、正念或呼吸练习类网站的前端起点
作为 Astro + React 混合渲染项目的学习与改造样本
替换图片与文案后用于宠物、放松或健康主题的展示页面

适合人群

熟悉 Astro 与 React、希望快速启动正念类项目的开发者
需要纯前端、无后端依赖的静态练习页面的个人或小团队
计划以猫或其他主题素材替换现有视觉的二次创作者

上手与定制指南

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

1
使用 pnpm install 或 npm install 安装依赖
2
运行 npm run dev 启动开发服务器，README 注明访问 http://localhost:5000
3
运行 npm run build 构建生产版本
4
修改 src/layouts/Layout.astro 中的 CSS 变量与 SEO 标签进行品牌定制
5
在 src/components/ZenApp.tsx 中扩展呼吸模式或文案，替换 public/images/ 中的图片更换主题

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

README 未提供 public/images 中猫插画、头像等演示素材的单独许可说明，替换或商用这些图片前需自行核实其授权。
README 指定开发服务器访问地址为 http://localhost:5000，实际端口可能因配置不同而变化，需以本地运行结果为准。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Swap out the images in `public/images/` to change the theme from cats to anything else
README 原文

Visit `http://localhost:5000` to see the magic.
README 原文

https://github.com/fauziralpiandi/purrfectly-zen-astro/blob/main/LICENSE https://github.com/fauziralpiandi/purrfectly-zen-astro/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-04。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: Astro Themes
资料与维护参考分: 资料较完整 · 92 / 100
技术栈: Astro · React
网站类型: 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-01-15
截图检查日期: 2026-10-04

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: d87510c938e407b858413bf34495150152c8adcd2a8289ff05def23b429c3c45

2026-10-04T00:44:31.994Z

来源文件 / 仓库

# 🐱 Purrfectly Zen Template

[![Purrfectly Zen](public/images/demo.png)](#purrfectly-zen)

> Find your zen. One breath, one paw print at a time.
>
> A cat-themed meditation and mindfulness web application designed to help you disconnect from noise and reconnect with what matters: peace, presence, and gentle purrs.

---

This project is a beautiful, interactive, and lightweight meditation app template built with **Astro**, **React**, and **Tailwind CSS**. It's designed for developers who want to jumpstart a mindfulness-focused project with a charming "cat-wisdom" aesthetic.

---

## ✨ Template Features

| Feature                     | Description                                                 |
| --------------------------- | ----------------------------------------------------------- |
| 🧘 **Guided Sessions**      | Interactive timer with customizable breathing animations.   |
| 🌬️ **Breathing Techniques** | Pre-configured 4-4-4-4 and "Purring Breath" patterns.       |
| 📱 **Astro Powered**        | Hybrid rendering for speed and SEO optimization.            |
| 🎨 **Design System**        | Warm, soft color palette with "Fredoka" and "Nunito" fonts. |
| ✨ **Micro-interactions**   | Smooth animations powered by Framer Motion.                 |
| 🆓 **Zero Backend**         | Pure client-side logic with `localStorage` persistence.     |

---

## 🚀 Technical Stack

- **Framework:** [Astro 5](https://astro.build/)
- **UI Library:** React (integrated via `@astrojs/react`)
- **Styling:** Tailwind CSS (v4 integration)
- **Animations:** Framer Motion
- **Icons:** Lucide React
- **Routing:** Built-in Astro file-based routing + client-side navigation

---

## 🛠️ Getting Started

### 1. Clone & Install

```bash
# Install dependencies
pnpm install # or npm install
```

### 2. Development

```bash
# Start the dev server
npm run dev
```

Visit `http://localhost:5000` to see the magic.

### 3. Build & Deploy

```bash
# Build for production
npm run build
```

---

## 📁 Project Structure

```
/src
├── components/   # React components (HomePage, ZenApp, etc.)
├── layouts/      # Astro layouts (Global styles & SEO)
├── lib/          # Utilities
└── pages/        # Astro routes
/public
└── images/       # Cat illustrations and portraits
```

---

## 🎨 Customization Tips

- **Branding:** Modify `src/layouts/Layout.astro` to change the CSS variables (`--primary`, `--background`) and update global SEO tags.
- **Content:** The main logic lives in `src/components/ZenApp.tsx`. You can easily add more breathing patterns or cat affirmations there.
- **Assets:** Swap out the images in `public/images/` to change the theme from cats to anything else (dogs, nature, etc.).

---

## 📝 License

[MIT](LICENSE) — Built for the community. Feel free to use, modify, and share.

Built with ❤️ and purrs. 🐾

反馈内容错误