OB
אופיר ברנס
Builder · TLV
חזרה לכל הפרויקטים
PWA · 2026 · Personal Project

Tide

PWA לנשימה מודרכת — אורב זכוכית מרחף, חימים רכים, רטט מסונכרן, אסתטיקת wellness

Tide

על האפליקציה

Tide היא אפליקציית רשת מתקדמת (PWA) לנשימה מודרכת — פותחים, לוחצים, נושמים.

לא עוד אפליקציה עמוסה בפיצ'רים. Tide עושה דבר אחד נהדר: מלווה אותך דרך מחזור נשימה, עם אורב זכוכית שגדל וקטן בקצב הנכון, חימים רכים שמסמנים מעבר בין שלבים, רטט עדין שמסונכרן עם הנשימה.

נשימה היא הדבר היחיד שהמערכת העצבית האוטונומית מאפשרת לנו להשפיע עליו ישירות.

לחצו לנסות בעצמכםofir.zbang.net/tide

האפליקציה רצה כאן בייצור — אפשר להתקין על המסך הבית, ולהשתמש בכל מקום, גם בלי אינטרנט.

חמש שיטות נשימה מובנות

  • 4-7-8 · רגיעה — שיטת ד"ר אנדרו וייל. שאף 4 שניות, החזק 7, נשוף 8. הרגעה עמוקה לפני שינה.
  • Box · מיקוד — שיטת ה-Navy SEALs. 4-4-4-4. חידוד פוקוס לפני משימה.
  • Coherent · איזון — 5 שאיפה, 5 נשיפה. סינכרון של מערכת הלב והנשימה.
  • Deep · שינה — 5-2-7-1. הכנה איטית להירדמות.
  • Energize · אנרגיה — 6-1-4. דחיפה עדינה לעוררות.

עיצוב ברמה גבוהה

  • אורב זכוכית — שכבות gradient רדיאליות, תאורה דינמית, halo blur אנימטיבי. צבע משתנה לפי שלב הנשימה.
  • Progress ring — SVG עם stroke-dasharray מתעדכן בקצב dur של כל שלב, צבע מסונכרן עם הצבע של ה-orb.
  • רקע mesh-gradient — שלוש שכבות radial gradients עם blur 40px ואנימציה איטית.
  • חלקיקים מרחפים — 20 חלקיקים קטנים שעולים אקראית מלמטה למעלה.
  • מודלים sheet-style — bottom sheets שגולשים פנימה, בסגנון iOS native.
  • טיפוגרפיה refined — Heebo עם letter-spacing מותאם, tabular-nums למספרים, ניגוד גבוה.

טכנולוגיית Wellness אמיתית

  • Web Audio API — צלילי 432/528 Hz נוצרים בזמן אמת (לא קבצי mp3), תוך טיפול ב-AudioContext suspension.
  • Procedural ambient — brown noise נוצר ב-AudioBuffer ידנית, BiquadFilter ל-lowpass, LFO על gain ליצירת סימולציית "גלי ים".
  • Vibration API — דפוסי רטט שונים בכל מעבר שלב ([20,40,30] בשאיפה, [40,40,40] בנשיפה).
  • Wake Lock API — מסך נשאר דולק במהלך סשן, re-acquire אוטומטי על visibilitychange.
  • IndexedDB — sessions נשמרים עם משך, מחזורים, preset, timestamp.

סטטיסטיקה ו-streak

  • חישוב streak — ימים רצופים עם לפחות סשן אחד.
  • Heatmap 14 ימים — visualization עם 4 רמות צבע לפי כמות סשנים.
  • Stats grid — סך סשנים, דקות, מחזורים, סטריק שיא.
  • כל המידע מקומי — שום דבר לא נשלח לשרת. הפרטיות שלך מוחלטת.

הפילוסופיה

אפליקציות wellness רובן רועשות, מבקשות הרשמה, ממכרות אותך ב-subscription. Tide הפוך — שקטה, מקומית, חינמית, ללא חשבון, ללא tracking.

הקוד כולו ~28KB. נטען מילישנייה. עובד אוף-ליין. כי הדרך הכי טובה לעזור לאנשים להירגע היא להוציא את האפליקציה מהדרך.

· TECHNOLOGY ·
PWA Vanilla JS Web Audio API (procedural) Vibration API Wake Lock API IndexedDB Service Worker SVG Animation BiquadFilter LFO

פרויקטים קשורים.

· YOUR PROJECT NEXT ·

הפרויקט הבא שלך?

בוא נדבר