🎬 HIGH — Visual Storytelling Flow
(“Change your mental state on demand”)
🌑 Phase 1 – ENTRY: The Invitation
Purpose: Establish trust, curiosity, and scientific calm.
Emotional Tone: “Precision meets peace.”
Visuals:
- Abstract neural waves forming from darkness.
- Logo fades in, tagline:
“Your mind is adaptive. So is our sound.”
- Subtle binaural hum (40 Hz → 10 Hz fade).
Narrative Moment:
The user steps into a quiet digital space where sound feels alive.Motion is slow, gradients breathe, UI disappears into calm.
Action → “Begin” → moves to Mode Selection.
🌊 Phase 2 – SELECTION: The Choice of State
Purpose: Empower the user to define intent — calm, focus, sleep, or high energy.
Emotional Tone: “Control through simplicity.”
Visuals:
- 4 glowing spheres orbit gently — each representing a mental state:
- Calm – lavender pulse
- Focus – teal wave
- Sleep – deep indigo
- High Energy – amber glow
- Subtle oscillation in rhythm per state (e.g., Calm = slow 6 Hz, Focus = 10 Hz).
Narrative Moment:
The user picks a frequency, not just a mode — deciding how they want to feel.The app feels like a tuning instrument for the mind.
Action → Tap mode → Generation Screen.
⚙️ Phase 3 – CREATION: The Sound is Born
Purpose: Showcase the intelligence behind the experience.
Emotional Tone: “AI artistry.”
Visuals:
- Digital particles swirl, forming rhythmic geometry.
- Micro-copy cycles through phrases:
“Composing neural rhythm…” → “Balancing frequencies…” → “Tuning to you.”
- Light waveform builds until it syncs perfectly, then stabilises.
Narrative Moment:
The user witnesses sound being created for them in real time.The moment bridges science fiction and meditation — intelligent calm.
Action → Auto-transitions to Preparation Screen.
🎧 Phase 4 – PREPARATION: The Ritual
Purpose: Ground the user before immersion.
Emotional Tone: “Mindful readiness.”
Visuals:
- Gentle fade of the AI waves into a still gradient.
- Icons: Headphones • Volume • Duration.
- Optional toggle: “Include breathing overlay.”
Narrative Moment:
A brief ritual before entering — like dimming lights before a concert.The user adjusts, breathes, and taps “Start Session.”
🌌 Phase 5 – IMMERSION: The Experience
Purpose: Deliver the neuroacoustic state-shift.
Emotional Tone: “Immersive calm, guided by motion.”
Visuals:
- Central sphere/wave pulses in sync with entrainment frequency.
- Background gradient slowly evolves over time.
- Only minimal UI: timer, mode label, soft nudge.
- Subtle camera drift to simulate movement through a sound space.
Narrative Moment:
Time dissolves. The user sees sound as form.Every beat is a breath; every tone is intention.One nudge mid-way reminds them: “Too wired? Drop to Calm.”
Action → End or auto-fade to Feedback.
💬 Phase 6 – REFLECTION: The Dialogue
Purpose: Create a feedback loop — the system listens back.
Emotional Tone: “Empathy through AI.”
Visuals:
- The pulsing sphere slows, becoming almost still.
- UI slides up with 2–3 emotion sliders or emojis.
- Copy:
“How did that feel?”
“We’ll fine-tune your next session.”
Narrative Moment:
The machine becomes conversational — not analysing, but listening.Feedback is light, intuitive, and rewarded with animation (e.g., gentle colour bloom).
Action → Save Feedback → Summary.
🌤 Phase 7 – INTEGRATION: The Return
Purpose: Reinforce satisfaction and growth.
Emotional Tone: “Empowerment through awareness.”
Visuals:
- Calm outro sound (isochronic pulse fades to silence).
- Trend line appears: last 5 sessions, small positive uptick.
- Message:
“Your mind learned something today.”
- CTAs: “Replay”, “Try another state”, “Share your calm.”
Narrative Moment:
The user realises they’re shaping a personal neural signature — every session refines it.Calm transitions back to interface, inviting continuity.
🌐 Phase 8 – CONTINUITY: The System that Learns
Purpose: (Optional v1.1) Maintain engagement through insights.
Emotional Tone: “Evolving intelligence.”
Visuals:
- Dashboard of metrics:
- Focus Score
- Calm Minutes
- Top Mode
- Subtext:
“AI now knows your rhythm. Next session will adapt.”
Narrative Moment:
The user sees growth — not gamified, but meaningful.The app is not an app anymore; it’s a personal sound environment.
🎨 Figma / Miro Flow Representation
You can copy this Mermaid diagram syntax into tools like Figma’s FigJam, Miro, or Notion (with Mermaid support) to generate a visual flow automatically.
flowchart LR
A[Splash / Entry<br>“Science meets serenity”] --> B[Mode Selection<br>Choose state: Calm / Focus / Sleep / Energy]
B --> C[Generation<br>“Composing your personalised sound”]
C --> D[Preparation<br>Headphones • Volume • Duration]
D --> E[Listening Experience<br>Immersive visual + AI sound]
E --> F[Feedback<br>Quick reflection sliders]
F --> G[Summary<br>Session recap + progress graph]
G --> H[Dashboard / History<br>Optional – insights + trends]
H -->|Loop| B
🪄 Design Storytelling Notes for Figma
Stage | Emotion Curve | Design Cue | Animation Style |
Entry | Curiosity → Calm | Abstract neural visuals | Fade-in waves |
Selection | Empowerment | Motion per state | Circular orbit |
Generation | Anticipation | Particle build-up | Progressive intensity |
Preparation | Grounding | Static gradient | Gentle fade |
Listening | Immersion | Reactive visuals | Beat-synced pulsation |
Feedback | Reflection | Slow transitions | Expand/contract glow |
Summary | Satisfaction | Calm upward motion | Warm fade |
Dashboard | Continuity | Minimal data viz | Linear rise animation |