水面再怎麼起風，湖心總有一個靜止的點。
一個安靜的正念練習所——不是拿來「讀」的網站，是拿來「練」的工具。四週入門課程、七個互動練習、 親子／工作／日常三個生活情境，全部離線可用，所有紀錄只存在你自己的裝置上。
線上版： https://chenhan20.github.io/still-point/（push 之後生效，見部署）
| 今天 | 學習 | 練習 |
|---|---|---|
 |
 |
 |
深色「深湖」／淺色「晨霧」雙主題，跟隨系統或手動切換。視覺母題是「湖心一點」的漣漪—— App 圖示、首頁、呼吸動畫、完成練習的那一刻，都是同一個圖形。
- 完整指南——從第一次坐下到四週之後，一頁講完整條路：練什麼、怎麼開始、工具怎麼挑、 正念與心流的關係、常見問題。迷路時回這一頁。
- 開始之前（三篇）——正念是什麼、姿勢與時間、怎麼使用本站。
- 四週課程——每週一篇導讀＋七天練習計畫，每天 3–15 分鐘，首頁自動指路，練完自動打卡：
- 安住於呼吸（建立「錨」）
- 回到身體（身體掃描與壓力訊號）
- 想法與情緒（念頭不是事實、RAIN）
- 帶著正念生活（非正式練習與慈心）
- 生活情境（三篇）——親子之間（含郭葉珍教授的觀點）、工作與心流、日常的微練習。
- 進階週——第五週：開放的覺察、以聲音為對象、正念聆聽，給練完四週的人一條延伸路。
- 親子情境集（七篇，隨時查閱）——出門拖拉、功課與成績、孩子崩潰、青春期話少、3C 拉鋸、 頂嘴與髒話、當孩子說出很重的話。一篇一個場景：先照顧自己，再接住孩子。
- 隨身讀（六篇，隨時查閱）——無聊是注意力的健身房、等待的時間都是你的、憤怒的解剖學、 對自己溫柔不是放過自己、初心、為什麼總是「吐氣長一點」。
- 好好睡覺（兩篇，隨時查閱）——睡前十分鐘的儀式、睡不著與半夜醒來，附睡前練習直達。
| 工具 | 長度 | 給什麼時刻 |
|---|---|---|
| STOP 一分鐘 | 約 1.5 分 | 快要被情緒帶走：爆炸之前，或之後 |
| 三分鐘呼吸空間 | 3 分 | 會議之間、接小孩之前的退一步 |
| RAIN 情緒急救 | 自己的步調 | 情緒很滿、心裡過不去，可寫筆記 |
| 呼吸練習 | 1–10 分 | 安定／盒式／4-7-8 三種節奏，圓圈隨吸吐開合 |
| 身體掃描 | 5–15 分 | 從腳到頭的引導，身體緊繃或睡前 |
| 靜坐計時 | 3–30 分 | 磬聲開始與結束，可隱藏倒數、每 5 分輕響 |
| 慈心練習 | 5–10 分 | 對自己太嚴格的日子 |
每次練習自動記錄；在 App 之外練的（專心聽講、正念行走）可以在紀錄頁手動補記。 紀錄頁有連續天數、月曆熱度、練習後心情與隨手記，支援 JSON 匯出／匯入備份。
用 Safari 開啟網站 → 點下方「分享」→「加入主畫面」。之後全螢幕開啟、離線可用，就像一般 App。
兩個 iOS 限制先說在前面：側邊靜音撥桿撥下時磬聲可能不響（畫面提示不受影響）； 網頁在背景會被凍結，練習時請讓螢幕亮著——App 會自動要求螢幕喚醒鎖（Wake Lock）， 計時採絕對時間戳，即使被切走再回來，秒數也不會亂。
Vite + React + TypeScript，執行期相依只有 React 本身。幾個值得一提的選擇：
- Hash 路由（自寫，約 40 行）——GitHub Pages 子路徑下不需要 404 重導技巧，重新整理永遠有效。
- PWA（vite-plugin-pwa / Workbox）——整站預快取約 400KB，完全離線可用； Google Fonts（Noto Serif TC 標題字）採執行期快取，第一次載入後離線也有襯線字。
- 磬聲用 Web Audio 即時合成——四個泛音加微失諧模擬缽音，零音檔資產； 在「開始」按鈕的手勢裡解鎖 AudioContext，符合 iOS 規定。
- 計時引擎——以
Date.now()絕對時間計算，setInterval只負責重繪； 分頁被暫停、螢幕熄滅再回來都不失準。進行中自動取得 Wake Lock。 - App 圖示由純 Node 腳本逐像素繪製（
scripts/generate-icons.mjs）—— 自帶 PNG 編碼器（zlib + CRC32），距離場抗鋸齒畫出漣漪，零相依。 - 內容即資料——課程不是散落的 HTML，是
src/content/下的 typed data 模組，見下節。
src/
├── content/ # 所有課程內容（typed data）
│ ├── types.ts # Block／Lesson／Section 型別與 helpers
│ ├── start.ts # 開始之前三篇
│ ├── weeks.ts # 四週課程（導讀 + 每日計畫）
│ ├── life.ts # 親子／工作／日常
│ ├── guide.ts # 完整指南
│ └── index.ts # 課程順序與進度邏輯
├── tools/ # 七個練習工具
│ ├── registry.ts # 工具目錄（名稱、時長、分類）
│ ├── scripts.ts # 引導腳本（身體掃描、STOP、呼吸空間、慈心）
│ ├── Breathing.tsx / Sit.tsx / Guided.tsx / Rain.tsx
├── components/ # RippleMark（漣漪）、GuidedPlayer、ProgressRing、Calendar…
├── lib/ # router（hash）、storage（localStorage）、audio（磬）、clock（計時）
├── pages/ # 今天／練習／學習／紀錄／指南／關於
└── styles/global.css # 設計 tokens 與全站樣式（深湖／晨霧雙主題）
npm install
npm run dev # 開發伺服器（http://localhost:5173/still-point/）
npm run build # 型別檢查 + 產出 dist/
npm run preview # 預覽正式建置，含 Service Worker（http://localhost:4173/still-point/）
npm run icons # 重新產生 public/icons/*.png- push 到
main，deploy.yml 自動建置並部署。 - 第一次需到 repo Settings → Pages → Build and deployment → Source 選 GitHub Actions。
- 網址：
https://<username>.github.io/still-point/。
Base path 由 CI 依 repo 名稱自動設定（使用者頁面 *.github.io 會自動改用根路徑），repo 改名不用改程式。
內容都是資料，改起來像填表：
- 加一天練習：在
weeks.ts該週的lessons加一行day(8, '當日一句話', { tool: 'sit', label: '靜坐', minutes: 10 })。 - 加一篇文章：任一 section 的
lessons加一個kind: 'read'的物件， 內文用 block 組成——p（段落）、h（小標）、ul（清單）、quote（引文）、tip（小練習框）、go（站內連結）——樣式自動套用。 - 加一個工具：
src/tools/寫元件、registry.ts登錄、ToolPage.tsx加一個 case。 - 改引導詞：
tools/scripts.ts，每步是{ t: '文字', sec: 秒數 }，會依選擇的長度等比縮放。
沒有帳號、沒有伺服器、沒有分析追蹤。練習紀錄、心情、筆記全部存在裝置的 localStorage， 可隨時在「紀錄」頁匯出 JSON 備份、匯入還原，或一鍵清除。
整理自現代正念訓練的公開知識：喬・卡巴金（Jon Kabat-Zinn）的正念減壓（MBSR）與 正念認知療法（MBCT）傳統；RAIN 由塔拉・布萊克（Tara Brach）等老師推廣。主要參考—— Mindful.org〈What is Mindfulness?〉、 華人正念減壓中心蔡宛蓁心理師的〈心流〉一文、 以及郭葉珍教授（國立臺北教育大學）的教養與正念觀點（完整出處見網站「關於」頁）。
正念練習不能取代醫療與心理專業協助。若有嚴重情緒困擾，請尋求專業支持—— 在台灣：安心專線 1925、生命線 1995、張老師 1980。