TL;DR

• Copy and paste a master prompt that makes ChatGPT output a single-file, offline sleep-breathwork web app.
• Accurate timing with drift control; bedside-safe visuals; strong accessibility; optional wake-lock, sound, haptics, i18n; console timing QA.
• Full Master Prompt v1.2 appears below with Concise and Executive variants.

Intro

Calm apps are common. Calm, accurate, and accessible apps are rare. This prompt generates a production-readable, single-file breathing app with 4-7-8, Box, and Triangle techniques. It controls drift with requestAnimationFrame plus performance.now, protects photosensitive users, supports Reduce Motion, and offers a Quick Black-Out gesture for bedside use. No external assets. Copy. Paste. Save as index.html. Open and breathe.

The Custom Prompt. Full Master Prompt v1.2. Copy and paste.

Role: You are a Senior Front-End Engineer and Sleep-UX Designer who will build a premium, single-file sleep breathwork web app.
Goal: Produce one self-contained HTML file with embedded CSS and JavaScript. No external fonts, libraries, images, CDNs, analytics, or storage.
Audience and Tone: Calming, bedside-friendly UI for users who want gentle sleep guidance. Professional, accessible, plain language.

Functional Requirements
1) Breathing techniques. selectable.
   • 4-7-8. inhale 4 s. hold 7 s. exhale 8 s.
   • Box. 4-4-4-4. inhale. hold. exhale. hold.
   • Triangle. 4-4-4. inhale. hold. exhale.
2) Controls. Start. Pause. Resume. Stop. Technique selector disabled while a session is active.
3) Progress and Status. Cycle counter. progress bar. phase text. Breathe In. Hold. Breathe Out.
4) Accurate timing. phase error ≤ ±100 ms per phase over a 10 minute session. Maintain state on pause and resume.
   Use requestAnimationFrame for animation plus setTimeout with performance.now deltas for drift control. Guard against overlapping timers. Correct timing on visibilitychange.
5) Session handling. Do not allow technique switches mid-cycle. Safe Stop clears timers and RAF and resets UI cleanly.
6) Technique tips. Short, friendly blurbs about potential sleep benefits. Non-medical.

Visual and Interaction Requirements
1) Dark theme. deep blues and violets and black. sleep-friendly contrast.
2) Animated star or particle background. CSS keyframes or minimal JS. throttle on mobile.
3) Breathing circle at center. scale up on inhale. soft hold. scale down on exhale. color or halo shifts by phase.
4) Modern gradients and soft glows. large readable text at bedside distance.
5) Smooth and calming animations. CSS transforms and easing. avoid layout reflow. target 60 fps. degrade gently to 30 fps if needed.
6) Mobile responsive. small screens. portrait and landscape.

Accessibility and Wellness. baseline
• Semantic HTML. visible focus states with :focus-visible.
• ARIA live region that announces phase text. polite.
• Reduce Motion toggle that honors prefers-reduced-motion and a UI switch to damp animations.
• Color contrast ≥ WCAG AA. color-blind-safe palette.
• Optional gentle audio cue using Web Audio API and haptic pulse using navigator.vibrate with on or off toggles. default off.
• Safety note. Breathwork is optional wellness, not medical advice. Stop if you feel dizzy.

Additional Wellness and Safety
• Night luminance cap. avoid full white. keep large-area luminance low. deep navy background.
• Photosensitivity guard. no flashes above 3 Hz. large-area transitions ≥ 300 ms.
• Quick Black-Out. long-press anywhere for about 1.5 s to go full black. tap to restore. preserve session state.
• Screen Wake Lock toggle if available. default off.

Expanded Accessibility
• Text-Only Mode. disable animated circle and stars. show clear step text and progress only.
• High-Contrast Mode. alternate palette that meets WCAG AAA for text.
• Keyboard map. Space = Pause or Resume. S = Stop. 1 2 3 = select technique while idle only. Arrow Up or Down = adjust duration.
• RTL support. respect dir="rtl". mirror layout.
• Decorative graphics use aria-hidden="true". alerts use role="status".

Technical Constraints
• Single file only. no external requests or network calls.
• Use CSS transforms for animation and JS timers that combine requestAnimationFrame and setTimeout with performance.now correction.
• In-memory state only. no localStorage.
• Clean and commented code. separate sections for styles, markup, and scripts.
• Guard against overlapping timers. Stop must clear intervals, timeouts, RAF, audio, and haptics.

Performance and Power
• CPU budget. idle ≤ 2 percent. active ≤ 8 percent on mid-tier mobile. auto-throttle starfield or effects if limits are exceeded or on low-end heuristics.
• Target 60 fps. degrade gracefully to 30 fps if user prefers reduced motion or if throttling.
• Batch DOM reads and writes. restrict to transforms and opacity. avoid forced layout.

Internationalization
• Inline string map in simple JSON. select by navigator.language. English fallback.
• Respect RTL mirroring. use Intl.NumberFormat for counters.

Installability. single file
• Optional inline PWA metadata. data URL manifest and inline SVG icons. no external assets. share target off.

Defaults and Assumptions
• Default technique. 4-7-8.
• Default session length. 5 minutes. adjustable 1 to 20 minutes.
• Phase colors. suggested. Inhale = deep blue to purple gradient. Hold = indigo. Exhale = teal to violet fade.
• Background stars use CSS keyframes. throttle particle count on mobile.
• Typography uses system fonts only. no downloads.
• Buttons include accessible titles and aria-labels.
• Audio and haptics off. Wake Lock off. Text-Only and High-Contrast off.

Deliverable Format. strict
• Return exactly one code block tagged as html that contains a complete and valid <!DOCTYPE html> file with embedded <style> and <script>.
• Do not include commentary before or after the code block.
• The file must run offline when opened directly in a browser.

Acceptance Criteria
A) All three techniques follow the correct phase order and durations.
B) Start. Pause. Resume. Stop behave predictably. state persists across pause and resume.
C) Technique selector is disabled during an active session and re-enabled when stopped.
D) Circle scales smoothly by phase. color and halo change by phase. progress bar advances. phase text updates.
E) Timing accuracy meets ≤ ±100 ms per phase over 10 minutes. log summary to console after at least 3 cycles.
F) App is responsive from 320 px to 1440 px. text remains readable.
G) Accessibility. ARIA live announcements. contrast AA. focus-visible. Reduce Motion honored.
H) Single file. no external requests. passes HTML validation with no critical errors.
I) Photosensitivity safety. no flashes above 3 Hz. large-area transitions ≥ 300 ms.
J) Debug timing log. mean phase error ≤ 80 ms. 95th percentile ≤ 150 ms over at least 10 minutes.
K) Expanded accessibility. all interactive elements labeled. any modal or dialog traps focus. RTL works.
L) Performance gate. sustained smooth interaction. auto-throttle on CPU spikes. graceful 30 fps degrade if needed.
M) Quick Black-Out gesture works and restores state.

Evaluation Rubric for self-check
Score 1 to 5 on. Spec compliance. Timing accuracy. Accessibility. Performance and energy. Code clarity. Photosensitivity safety. Internationalization readiness.
Only ship if all scores are at least 4.

Non-Goals
• No accounts. analytics. telemetry. persistence. or cloud.
• No frameworks. build steps. or external assets.
• PWA metadata is inline only. no network fetches. no share target.

Suggestions to further improve. optional
• Session summaries in memory. average breaths and timing error.
• Custom durations with safe ranges and a Restore Defaults button.
• Guided intro overlay that explains the selected technique.
• Night-shift dimmer slider and auto-hide controls after inactivity.

Assumptions
• Target model. ChatGPT. ask for Claude or Gemini or Copilot variants if needed.
• Users prefer calm visuals and low battery use. The app is wellness oriented and not medical.

Usage Tips
• If output is truncated. say. Continue from the last full line of code.
• To tweak aesthetics. say. Regenerate with deeper blues and slower star speed.
• To verify timing. open DevTools and read the console timing log or enable any debug harness.

Variant A. Concise Prompt v1.2
Build a single-file sleep breathwork app with techniques 4-7-8. Box 4-4-4-4. Triangle 4-4-4. Central breathing circle that scales by phase. Dark starry background. Start. Pause. Resume. Stop. Selector disabled during session. Phase text. progress bar. cycle counter. Use rAF plus setTimeout with performance.now for ≤ ±100 ms per phase over 10 minutes. Correct on visibilitychange. Maintain state on pause and resume. Prevent overlapping timers. Accessibility. ARIA live. Reduce Motion toggle. AA contrast. large text. keyboard map. Space or S or 1-3 or Arrow Up or Down. RTL support. Text-Only and High-Contrast modes. Safety and comfort. luminance cap. photosensitivity guard. Quick Black-Out long press about 1.5 s. Optional toggles. sound. haptics. wake lock. all off by default. Performance. throttle effects on CPU spikes. degrade to 30 fps if needed. i18n inline string map. Return one html block only. no extra text.

Variant B. Executive. Spec Light v1.2
Create a polished. bedside-friendly breathing app in a single HTML file. Dark theme with subtle stars. a central circle that grows. holds. and shrinks. large readable labels. Provide three techniques. 4-7-8. Box. Triangle. with a simple control bar and live progress. Prioritize calm motion. accurate timing. and accessibility. ARIA live. Reduce Motion. Text-Only. High-Contrast. keyboard shortcuts. RTL. Include safety features. luminance cap. photosensitivity guard. Quick Black-Out. Optional wake-lock. sound. haptics. default off. No external assets. code well commented. Output only the complete HTML file.

What this prompt does

• Precision timing. rAF plus performance.now with visibility correction. Target phase error ≤ ±100 ms over long runs.
• Safety first. Night luminance cap. no flashes above 3 Hz. long transitions. Quick Black-Out on long press. wellness disclaimer.
• Accessibility. ARIA live announcements. Reduce Motion toggle. Text-Only and High-Contrast modes. keyboard map. RTL mirroring.
• Performance discipline. transforms and opacity only. starfield throttling. graceful 30 fps fallback. low CPU targets.
• Offline and private. one file. no network. optional inline PWA metadata. i18n string map.
• Ops friendly. console timing QA. optional wake lock. sound. haptics. all off by default.

Step by step usage

1. Paste the full prompt into a new ChatGPT chat.
2. Save the result as index.html.
3. Open the file in a browser on phone or desktop.
4. Run a quick function check. Start 4-7-8. test Pause and Resume and Stop. verify the selector is disabled during a session.
5. Open DevTools and read the console timing log. target ≤ 80 ms mean and ≤ 150 ms p95 after at least 10 minutes.
6. Toggle accessibility. Reduce Motion. Text-Only. High-Contrast. check focus rings and ARIA announcements.
7. Test safety. Long press anywhere about 1.5 s for Quick Black-Out. tap to restore. Optionally test Wake Lock with care. keep audio and haptics off for bedside use.

Applied example. Clinic Night Mode

Goal. minimal motion. AAA text. 10 minute default. no audio or haptics.
How. after the Master Prompt. append.
“Set Text-Only mode to true by default. star density low. default session 10 minutes. palette AAA indigo and teal. audio and haptics disabled. add a Clinic Mode badge.”
Result. static guidance UI. large AAA text. accurate pacing. zero sudden flashes. timing QA in the console. suitable for ward tablets.

References and links

• MDN. requestAnimationFrame. https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
• MDN. performance.now. https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
• MDN. Page Visibility API. https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
• MDN. prefers-reduced-motion. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
• MDN. ARIA live regions. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
• MDN. Screen Wake Lock API. https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API
• MDN. Web Audio API. https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
• MDN. Vibration API. https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
• MDN. Web App Manifest. https://developer.mozilla.org/en-US/docs/Web/Manifest
• W3C. WCAG Contrast. https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum
• W3C. Three flashes or below threshold. https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold.html

Conclusion

This master prompt creates a calm and accurate single-file breathwork app with strong accessibility and safety. You get precise timing, bedside-safe visuals, and zero dependencies. Copy and paste the prompt. save the output as index.html. open it offline. breathe. If you want a clinic preset or a travel preset. say the word and I will add them.