Flash Affirmations Web App: Master Prompt and Guide

TLDR

• This master prompt generates a static, offline web app that flashes affirmations safely for focus and meditation.
• Output files: index.html, style.css, app.js, README.md. No libraries; no analytics.
• Core features: autosized stage, rotation modes, seeded shuffle, adaptive weights, jitter, Safety Mode, Kiosk Mode, PWA.
• Data tools: import and export JSON or CSV; localStorage and IndexedDB; session reports.
• Accessibility first: WCAG AA themes; reduced motion; keyboard map; RTL; screen reader safe mode.

Intro

Short visual affirmations can support focused attention when they are delivered with precision timing, safe frequency limits, and clear controls. This prompt turns any capable coding model into a senior front-end engineer for one session. It outputs a clean static site with a responsive stage, safe flash envelopes, deterministic scheduling, and an adaptive rotation that learns from user ratings. Everything runs fully client-side for privacy and calm use.

The Custom Prompt. Flash Affirmations Web App

Paste everything in this block as your very first message in a fresh chat. Then run in one shot.

Role
You are a senior front-end engineer. Deliver a single-page application that runs completely offline in the browser. No frameworks or external fonts. Vanilla HTML, CSS, and JavaScript only.
Objective
Create a focused tool that briefly flashes positive affirmations on a centered stage. Users supply multiple affirmations, configure the flash duration and the interval between flashes, choose a session length, and run a safe, accessible session.
Non-functional constraints
	• Client only, no network calls after first load.
	• No analytics, ads, or trackers.
	• Files: index.html, style.css, app.js, plus README.md.
	• Use semantic HTML, ARIA labels, and keyboard access.
	• Mobile and desktop support with a minimum 320 px width.

Core features
Flash display
	• Show one affirmation at a time in a centered display stage.
	• Flash visibility window configurable in milliseconds.
	• Background gently dims during a flash to increase contrast.
	• Modes for appearance: Hard flash, Soft fade, Forward mask, Backward mask, Sandwiched mask. Opacity adjustable 0.3 to 1.0, default 0.85.
Affirmations input and rotation
	• Multi-line textarea input, one affirmation per line.
	• Rotation modes: in-order, shuffle, seeded shuffle, weighted shuffle by user feedback.
	• Wrap to the first item at the end. Maintain index across flashes.
	• Optional tokens that auto-expand from a simple profile: {name}, {goal}, {date}.
Real-time controls
	• Flash duration slider: 50 to 500 ms, default 200 ms, step 10 ms.
	• Interval slider: 1 to 10 seconds, default 3.0 s, step 0.1 s.
	• Jitter control: off, Poisson or Gaussian jitter, amplitude 0 to 20 percent of interval.
	• Session timer: 1 to 30 minutes, plus Infinite.
	• Start, Pause or Resume, Stop buttons.
	• Keyboard shortcuts:
		○ Space = Start or Pause or Resume
		○ S = Stop
		○ Esc = Emergency Stop
		○ ArrowLeft or ArrowRight = previous or next item preview
		○ F = toggle full screen Kiosk mode
Status and guidance
	• Status bar shows: rotation mode, duration, interval, jitter, time remaining, index like 7/24.
	• First-load instructions are shown in the stage until Start is pressed.
Safety and focus
	• Hard limits to avoid risky frequencies: never more than 3 flashes per second.
	• Auto-pause on tab blur or window hide using the Page Visibility API.
	• Safety Mode toggle: locks conservative ranges, disables strobe-like patterns, shows a break reminder every 10 minutes.
	• Clear disclaimer and link to reputable resources on photosensitivity and eye strain.
	• Emergency Stop with Esc immediately clears the stage and halts timers.
Focus aids
	• Optional fixation dot or cross at center, size adjustable.
	• Optional short tone or mobile haptic at onset to help rhythm entry. Respect system reduced motion and mute states.
	• Kiosk Mode hides controls and uses full screen. Esc exits.

Text rendering rules
Auto sizing
	• Choose size using a clamp based on both character count and viewport. Example baseline:
fontSize = clamp(20px, 6vw - 0.08 * chars, 12vw)
	• After initial sizing, measure with getBoundingClientRect and downscale to ensure the text remains inside the stage.
Length tiers
	• 0 to 20 characters → large.
	• 21 to 40 characters → medium.
	• 41 to 60 characters → small.
	• 61 plus characters → extra small.
Wrapping and bounds
	• Center horizontally and vertically.
	• Word wrapping allowed. Never clip or overflow the stage.
	• Respect language rules for CJK scripts and prevent awkward breaks.

Session templates and protocols
	• Built-in presets: Focus Booster, Calm and Clarity, Confidence Prime, Custom.
	• Each preset defines duration, interval, jitter range, theme, fixation, and session time.
	• Users can save custom presets and export or import as JSON.

Adaptive scheduler
	• After a session, the user can rate items as Helpful, Neutral, or Distracting.
	• Weighted repetition increases show probability for Helpful, decreases for Distracting.
	• Spaced-repetition option increases spacing for repeated Helpful items.
	• Seeded random generator ensures reproducible sequences when desired.

Persistence and content tools
	• Save last session, settings, and text to localStorage.
	• Use IndexedDB for large affirmation sets.
	• Import from TXT, CSV, or JSON. Trim, deduplicate, remove empty lines.
	• Export sets and session reports to JSON or CSV.
	• Quick editor with line count, find and replace, and tags.

Data model, stored locally
JSON Schema, AffirmationSet


{
  "id": "string",
  "name": "string",
  "locale": "string",
  "tags": ["string"],
  "items": ["string"],
  "createdAt": "ISO-8601"
}
JSON Schema, SessionConfig


{
  "durationMs": 200,
  "intervalMs": 3000,
  "jitter": { "mode": "off|poisson|gaussian", "amplitudePct": 0 },
  "rotation": "inOrder|shuffle|seeded|weighted",
  "seed": 42,
  "theme": "light|dark|sepia|nightBlue|custom",
  "fixation": { "enabled": true, "style": "dot|cross", "sizePx": 8 },
  "safetyMode": true,
  "timer": "finite|infinite",
  "minutes": 10
}
JSON Schema, SessionReport


{
  "start": "ISO-8601",
  "end": "ISO-8601",
  "flashesShown": 123,
  "distribution": [{ "text": "string", "count": 5 }],
  "userRatings": [{ "text": "string", "rating": "helpful|neutral|distracting" }],
  "jitter": "off|poisson|gaussian",
  "seed": 42
}

Measurement and reporting
	• Timeline view of executed flashes with counts per item.
	• Post-session check-in with three questions. Store results locally and feed the adaptive weights.
	• Download SessionReport as JSON or CSV.

Accessibility and internationalization
	• High contrast Light and Dark themes, plus Sepia and Night Blue.
	• System theme support and a theme toggle.
	• Respect prefers-reduced-motion. Use gentle fades when enabled.
	• Keyboard reachable controls. ARIA labels for all inputs and buttons.
	• Right-to-left support and font fallbacks for multilingual content.
	• Screen reader safe mode that disables flashing and presents a non-visual flow.

PWA and offline packaging
	• Add a web app manifest and service worker for installable PWA behavior.
	• Precache all assets, version with cache busting.
	• Content Security Policy that blocks outbound requests and remote fonts.

Performance plan
	• First interactive under 1.5 seconds on mid-range mobile.
	• 60 fps during transitions. Use only opacity and transform for animation.
	• No layout thrash or forced reflow loops.
	• Scheduler uses performance.now() with a monotonic timeline and catch-up logic to avoid drift.
	• Idle between flashes to conserve battery.

Theming and customization
	• Theme presets: Light, Dark, Sepia, Night Blue.
	• Custom palette with safe defaults and WCAG AA contrast.
	• Font controls: family, weight, letter spacing, line height. One-click reset.

Testing and acceptance
Cross-browser matrix
	• Chromium, WebKit, and Gecko on desktop and mobile.
Unit and visual checks
	• Verify font sizing function and scheduler math.
	• Visual snapshots for each length tier across themes.
	• Accessibility checks for color contrast and keyboard navigation.
Behavior acceptance tests
	1. With five affirmations, default settings show the first flash instantly after Start, then subsequent flashes every 3 seconds, with 200 ms visibility.
	2. Tabbing away pauses the session and resumes on return.
	3. A 10-character item renders larger than a 50-character item.
	4. Very long text wraps within the stage and never overflows.
	5. Stopping resets the stage and keeps last settings in localStorage.
	6. Importing a TXT file with 10 lines yields a 10-item list.
	7. Safety Mode prevents settings that exceed 3 Hz.
	8. Esc cancels immediately.
	9. Kiosk Mode fills the screen, hides controls, and exits with Esc.
	10. Reduced motion preference uses soft fades rather than hard flashes.

Suggested UI layout
	• Left column or top panel: Textarea, Import, Export, sample sets, preset selector, tag filter.
	• Main area: Display stage with optional fixation aid.
	• Footer toolbar: Rotation mode, duration slider, interval slider, jitter control, session timer, Start, Pause or Resume, Stop, theme toggle, Safety Mode toggle.

Built-in sample affirmation sets
	• Focus Starter: five short statements for immediate clarity.
	• Calm Breath: slow cadence lines for longer intervals.
	• Confidence Prime: action-oriented statements for energy.

Developer notes
	• Keep constants for ranges, defaults, and safety limits in one file or module.
	• Use a seeded RNG for shuffle, so runs can be reproduced when a seed is provided.
	• Document keyboard shortcuts on first-load instructions and in the README.
	• Keep CSS simple and readable. Avoid magic numbers. Use CSS custom properties for theme colors.

One-shot build instruction for the AI
Build the complete app as a static site. Produce index.html, style.css, app.js, and README.md. Implement the display stage, autosizing with clamp plus measure and fit, rotation modes with seeded shuffle, adaptive scheduler with ratings, jitter options, fixation aid, masking styles, Kiosk Mode, Safety Mode, and Page Visibility auto-pause. Persist state with localStorage and IndexedDB. Add import and export for TXT, CSV, and JSON with deduplication and token expansion. Generate SessionReport and timeline, and allow CSV or JSON download. Package as a PWA with a service worker and strict CSP. Respect reduced motion, ensure WCAG AA contrast, and provide full keyboard access. Include unit tests or simple test utilities for sizing and scheduler math inside the JS file, guarded behind a developer toggle. Ensure cross-browser behavior, 60 fps transitions, and first interaction under 1.5 seconds.

What this prompt does

• Generates a complete static site with safe flash envelopes, deterministic scheduling, and adaptive rotation.
• Enforces Safety Mode; Page Visibility auto-pause; frequency caps at or below 3 Hz.
• Provides import and export of TXT, CSV, JSON with dedupe; token expansion for {name}, {goal}, {date}.
• Persists settings and large sets with localStorage and IndexedDB; ships session reports; timeline view.
• Packages as an installable PWA with strict CSP; no trackers; no network after first load.

How to use it

1. Paste the full prompt into your coding model; run once.
2. Save the generated files as index.html, style.css, app.js, README.md.
3. Open index.html locally; test default preset Focus Booster.
4. Import a TXT list; verify rotation and sizing; toggle Safety Mode.
5. Install as a PWA; test Kiosk Mode; export a SessionReport as JSON and CSV.

Step by step usage

• Enter affirmations; one per line; keep phrases short for strong sizing.
• Pick a preset; or set duration, interval, jitter; keep Safety Mode on for first runs.
• Select rotation: seeded shuffle for reproducibility during experiments.
• Start; use Space to pause or resume; S to stop; Esc for emergency stop; F for full screen.
• After the session rate items; download the SessionReport; import later to compare.

Applied example

Use case: A mindfulness coach runs 6 minute sessions for groups.
Settings: duration 180 ms; interval 3.2 s; jitter Gaussian at 10 percent; rotation seeded; Safety Mode on; fixation cross size 8 px.
Affirmations:

• I return to breath.
• I notice and release.
• Calm body; clear mind.
• Attention resets now.
• Be here; be kind.
  Tip: Export the set and a saved preset so students can import on their own devices and keep the same seed for comparable runs.

References and links

• WCAG 2.1 Quick Reference. Accessibility
• MDN. Page Visibility API
• MDN. Vibration API
• MDN. Web Audio API
• MDN. Service Worker API
• MDN. IndexedDB API
• MDN. Web App Manifest
• Epilepsy Foundation. Photosensitivity guidance
• web.dev. Learn PWA
• web.dev. Lighthouse performance measure

Conclusion

This prompt ships a careful tool for brief visual affirmations that respects human factors and browser limits. It keeps everything offline, accessible, and testable. Copy the prompt, run the one-shot build, then tune presets, themes, and content. Keep Safety Mode on for group work; export reports for comparison; and use seeded shuffles for reproducible practice.