呼吸岛产品系统

打工人与学生群体普遍存在"假性休息"问题：工作学习间隙习惯刷短视频或继续盯着屏幕，不仅无法真正放松，反而加重疲劳。传统冥想 App 门槛高、付费墙多，难以融入碎片化场景。呼吸岛定位为轻量化的情绪急救网页，通过 3 分钟微任务、呼吸引导和情绪树洞，帮助用户在短时间内完成一次真正远离屏幕的休息，并逐步养成主动照顾自己的习惯。

产品包含两个版本，V1「3分钟呼吸岛」侧重功能完整性：支持心情选择、任务类型筛选、1/3/5 分钟时长调节、雨声/海浪/篝火等 Web Audio 程序化白噪音、SVG 圆形倒计时进度环、任务完成后 AI 生成朋友式温暖回应、放松日志与悄悄话统计、Canvas 一键生成分享卡片。

我负责产品定义、交互流程设计和前端代码实现。项目采用纯 HTML + CSS + JavaScript 单文件实现，无需后端和外部依赖。技术亮点包括：SVG 渐变进度环配合 CSS 动画实现倒计时；Web Audio API 通过白噪声叠加滤波器模拟雨声、海浪、篝火；CSS 变量统一设计 token，Canvas 绘制分享卡片并支持高清屏 2x 导出；localStorage 持久化用户数据和最近任务去重；