expo-orb 0.2.0 → 0.2.2

package/README.md

@@ -124,6 +124,214 @@ export default function App() {
 }
 ```
 
+---
+
+## Breathing Exercise Component
+
+A guided breathing exercise component with morphing blob animation, progress ring, and text cues. Supports custom breathing patterns and built-in presets.
+
+### Breathing Demo
+
+| iOS | Android |
+|:---:|:-------:|
+| ![iOS Breathing Demo](https://raw.githubusercontent.com/enso-works/expo-orb-animation/main/docs/breathing-ios.gif) | ![Android Breathing Demo](https://raw.githubusercontent.com/enso-works/expo-orb-animation/main/docs/breathing-android.gif) |
+
+### Basic Usage
+
+```tsx
+import {
+  ExpoBreathingExerciseView,
+  startBreathingExercise,
+  stopBreathingExercise,
+  getBreathingPreset,
+} from 'expo-orb';
+
+function BreathingScreen() {
+  const handleStart = () => {
+    // Use a built-in preset
+    startBreathingExercise(getBreathingPreset('box'));
+  };
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <ExpoBreathingExerciseView
+        style={{ width: 300, height: 300 }}
+        blobColors={['#7c3aed', '#3b82f6', '#ec4899']}
+        showProgressRing={true}
+        showTextCue={true}
+        onPhaseChange={(e) => console.log('Phase:', e.nativeEvent.label)}
+        onExerciseComplete={(e) => console.log('Done! Cycles:', e.nativeEvent.totalCycles)}
+      />
+      <Button title="Start" onPress={handleStart} />
+      <Button title="Stop" onPress={stopBreathingExercise} />
+    </View>
+  );
+}
+```
+
+### Breathing Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `blobColors` | `ColorValue[]` | `['green', 'blue', 'pink']` | Gradient colors for the morphing blob |
+| `innerBlobColor` | `ColorValue` | `'white'` | Color of the inner blob |
+| `glowColor` | `ColorValue` | `'white'` | Color of the glow effects |
+| `particleColor` | `ColorValue` | `'white'` | Color of floating particles |
+| `progressRingColor` | `ColorValue` | `'white'` | Color of the progress ring |
+| `textColor` | `ColorValue` | `'white'` | Color of the instruction text |
+| `showProgressRing` | `boolean` | `true` | Show/hide the progress ring |
+| `showTextCue` | `boolean` | `true` | Show/hide the instruction text (e.g., "Breathe In") |
+| `showInnerBlob` | `boolean` | `true` | Show/hide the inner blob |
+| `showShadow` | `boolean` | `true` | Show/hide drop shadow |
+| `showParticles` | `boolean` | `true` | Show/hide floating particles |
+| `showWavyBlobs` | `boolean` | `true` | Show/hide wavy blob overlays |
+| `showGlowEffects` | `boolean` | `true` | Show/hide rotating glow effects |
+| `pointCount` | `number` | `8` | Number of points for blob morphing |
+| `wobbleIntensity` | `number` | `0.5` | Intensity of wobble animation (0-1) |
+| `style` | `StyleProp<ViewStyle>` | - | Container style (set width/height here) |
+
+### Breathing Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `onPhaseChange` | `{ phase, label, phaseIndex, cycle }` | Fired when the breathing phase changes |
+| `onExerciseComplete` | `{ totalCycles, totalDuration }` | Fired when all cycles complete |
+
+### Breathing Control Functions
+
+```tsx
+import {
+  startBreathingExercise,
+  stopBreathingExercise,
+  pauseBreathingExercise,
+  resumeBreathingExercise,
+  getBreathingPreset,
+} from 'expo-orb';
+```
+
+| Function | Description |
+|----------|-------------|
+| `startBreathingExercise(pattern)` | Start the exercise with a custom pattern or preset |
+| `stopBreathingExercise()` | Stop the current exercise |
+| `pauseBreathingExercise()` | Pause the current exercise |
+| `resumeBreathingExercise()` | Resume a paused exercise |
+| `getBreathingPreset(name)` | Get a built-in preset by name |
+
+### Built-in Presets
+
+| Preset | Pattern | Cycles | Description |
+|--------|---------|--------|-------------|
+| `'relaxing'` | 4s in, 7s hold, 8s out | 4 | 4-7-8 technique for relaxation |
+| `'box'` | 4s in, 4s hold, 4s out, 4s hold | 4 | Box breathing for focus |
+| `'energizing'` | 2s in, 2s out | 10 | Quick breathing for energy |
+| `'calming'` | 4s in, 6s out | 6 | Extended exhale for calm |
+
+### Custom Breathing Patterns
+
+Create your own breathing patterns:
+
+```tsx
+import { startBreathingExercise, BreathingPattern } from 'expo-orb';
+
+const customPattern: BreathingPattern = {
+  phases: [
+    { phase: 'inhale', duration: 5000, targetScale: 1.35, label: 'Breathe In' },
+    { phase: 'holdIn', duration: 3000, targetScale: 1.35, label: 'Hold' },
+    { phase: 'exhale', duration: 7000, targetScale: 0.75, label: 'Breathe Out' },
+    { phase: 'holdOut', duration: 2000, targetScale: 0.75, label: 'Rest' },
+  ],
+  cycles: 5, // undefined for infinite
+};
+
+startBreathingExercise(customPattern);
+```
+
+### Phase Types
+
+| Phase | Description |
+|-------|-------------|
+| `'inhale'` | Breathing in - blob expands |
+| `'holdIn'` | Holding breath after inhale |
+| `'exhale'` | Breathing out - blob contracts |
+| `'holdOut'` | Holding breath after exhale |
+
+### Complete Breathing Example
+
+```tsx
+import * as React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  ExpoBreathingExerciseView,
+  startBreathingExercise,
+  stopBreathingExercise,
+  pauseBreathingExercise,
+  resumeBreathingExercise,
+  getBreathingPreset,
+  BreathingPreset,
+} from 'expo-orb';
+
+export default function BreathingApp() {
+  const [currentPhase, setCurrentPhase] = React.useState('');
+  const [isPaused, setIsPaused] = React.useState(false);
+
+  const startPreset = (preset: BreathingPreset) => {
+    setIsPaused(false);
+    startBreathingExercise(getBreathingPreset(preset));
+  };
+
+  return (
+    <View style={styles.container}>
+      <ExpoBreathingExerciseView
+        style={styles.breathingView}
+        blobColors={['#667eea', '#764ba2', '#f093fb']}
+        progressRingColor="#ffffff"
+        textColor="#ffffff"
+        showProgressRing={true}
+        showTextCue={true}
+        showParticles={true}
+        onPhaseChange={(e) => setCurrentPhase(e.nativeEvent.label)}
+        onExerciseComplete={() => setCurrentPhase('Complete!')}
+      />
+
+      <View style={styles.presets}>
+        <TouchableOpacity onPress={() => startPreset('box')}>
+          <Text>Box</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => startPreset('relaxing')}>
+          <Text>Relaxing</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => startPreset('calming')}>
+          <Text>Calming</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.controls}>
+        <TouchableOpacity onPress={() => {
+          if (isPaused) {
+            resumeBreathingExercise();
+          } else {
+            pauseBreathingExercise();
+          }
+          setIsPaused(!isPaused);
+        }}>
+          <Text>{isPaused ? 'Resume' : 'Pause'}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={stopBreathingExercise}>
+          <Text>Stop</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  breathingView: { width: 280, height: 280 },
+  presets: { flexDirection: 'row', gap: 16, marginTop: 32 },
+  controls: { flexDirection: 'row', gap: 24, marginTop: 16 },
+});
+```
+
 ## License
 
 MIT

package/android/build.gradle

@@ -56,5 +56,7 @@ dependencies {
   implementation 'androidx.compose.ui:ui-graphics'
   implementation 'androidx.compose.foundation:foundation'
   implementation 'androidx.compose.runtime:runtime'
+  implementation 'androidx.compose.material3:material3'
+  implementation 'androidx.compose.animation:animation'
   implementation 'androidx.activity:activity-compose:1.8.2'
 }

package/android/src/main/java/expo/modules/breathing/BreathingConfiguration.kt

@@ -9,12 +9,17 @@ data class BreathingConfiguration(
         Color(0xFF804DB3)   // Purple
     ),
     val innerBlobColor: Color = Color.White.copy(alpha = 0.3f),
+    val glowColor: Color = Color.White,
+    val particleColor: Color = Color.White,
     val progressRingColor: Color = Color.White.copy(alpha = 0.5f),
     val textColor: Color = Color.White,
     val showProgressRing: Boolean = true,
     val showTextCue: Boolean = true,
     val showInnerBlob: Boolean = true,
     val showShadow: Boolean = true,
-    val pointCount: Int = 28,
+    val showParticles: Boolean = true,
+    val showWavyBlobs: Boolean = true,
+    val showGlowEffects: Boolean = true,
+    val pointCount: Int = 8,
     val wobbleIntensity: Double = 1.0
 )

package/android/src/main/java/expo/modules/breathing/BreathingExerciseView.kt

@@ -1,8 +1,12 @@
 package expo.modules.breathing
 
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -13,10 +17,30 @@ import androidx.compose.runtime.setValue
 import androidx.compose.runtime.withFrameNanos
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Outline
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
+import expo.modules.orb.ParticlesView
+import expo.modules.orb.RotationDirection
+import expo.modules.orb.SimpleRotatingGlow
+import expo.modules.orb.WavyBlobView
+import kotlin.math.PI
+import kotlin.math.cos
 import kotlin.math.min
+import kotlin.math.pow
+import kotlin.math.sin
+import kotlin.math.tan
 import kotlin.random.Random
 
 @Composable
@@ -26,12 +50,15 @@ fun BreathingExerciseView(
 ) {
     // Frame-based animation state
     var frameTime by remember { mutableLongStateOf(System.nanoTime()) }
+    var elapsedTime by remember { mutableStateOf(0.0) }
 
     // Continuous animation loop
     LaunchedEffect(Unit) {
+        val startTime = System.nanoTime()
         while (true) {
             withFrameNanos { currentTime ->
                 frameTime = currentTime
+                elapsedTime = (currentTime - startTime) / 1_000_000_000.0
             }
         }
     }
@@ -46,53 +73,122 @@ fun BreathingExerciseView(
     // Update animation state
     val animationState = updateAnimationState(frameTime, config)
 
+    // Create blob shape for clipping
+    val blobShape = remember(animationState.scale, animationState.wobbleOffsets, config.pointCount) {
+        MorphingBlobShape(
+            baseRadius = animationState.scale.toFloat() * 0.7f,
+            pointCount = config.pointCount,
+            offsets = animationState.wobbleOffsets
+        )
+    }
+
     Box(
-        modifier = modifier
-            .aspectRatio(1f),
+        modifier = modifier.aspectRatio(1f),
         contentAlignment = Alignment.Center
     ) {
         // Progress ring (behind blob)
-        if (config.showProgressRing) {
+        if (config.showProgressRing && animationState.isActive) {
             ProgressRingView(
                 progress = animationState.phaseProgress,
                 color = config.progressRingColor,
-                lineWidth = 8f,
-                modifier = Modifier
-                    .fillMaxSize(0.95f)
+                lineWidth = 4f,
+                modifier = Modifier.fillMaxSize(0.95f)
             )
         }
 
-        // Main morphing blob with shadow
+        // Main blob with all effects
         Box(
             modifier = Modifier
                 .fillMaxSize()
-                .then(
-                    if (config.showShadow) {
-                        Modifier.drawBehind {
-                            // Simple shadow approximation
-                            drawCircle(
-                                color = config.blobColors.firstOrNull()?.copy(alpha = 0.3f) ?: Color.Transparent,
-                                radius = size.minDimension / 2 * animationState.scale.toFloat() * 0.7f,
-                                center = center.copy(y = center.y + 8.dp.toPx())
-                            )
-                        }
-                    } else Modifier
-                ),
-            contentAlignment = Alignment.Center
+                .graphicsLayer { clip = false }
         ) {
-            MorphingBlobView(
-                baseRadius = animationState.scale.toFloat() * 0.7f,
-                pointCount = config.pointCount,
-                offsets = animationState.wobbleOffsets,
-                colors = config.blobColors,
-                innerColor = config.innerBlobColor,
-                showInnerBlob = config.showInnerBlob,
-                modifier = Modifier.fillMaxSize()
-            )
+            // Shadow
+            if (config.showShadow) {
+                BreathingShadow(
+                    colors = config.blobColors,
+                    scale = animationState.scale.toFloat(),
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .graphicsLayer { clip = false }
+                )
+            }
+
+            // Main blob content clipped to morphing shape
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .clip(blobShape)
+            ) {
+                // Background gradient
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(
+                            brush = Brush.verticalGradient(
+                                colors = config.blobColors.reversed()
+                            )
+                        )
+                )
+
+                // Base depth glows
+                BaseDepthGlows(
+                    glowColor = config.glowColor,
+                    elapsedTime = elapsedTime,
+                    modifier = Modifier.fillMaxSize()
+                )
+
+                // Wavy blobs
+                if (config.showWavyBlobs) {
+                    WavyBlobLayer(
+                        elapsedTime = elapsedTime,
+                        modifier = Modifier.fillMaxSize()
+                    )
+                }
+
+                // Core glow effects
+                if (config.showGlowEffects) {
+                    CoreGlowEffects(
+                        glowColor = config.glowColor,
+                        elapsedTime = elapsedTime,
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .padding(8.dp)
+                    )
+                }
+
+                // Particles
+                if (config.showParticles) {
+                    ParticlesView(
+                        color = config.particleColor,
+                        particleCount = 15,
+                        speedRange = 10f..20f,
+                        sizeRange = 1f..3f,
+                        opacityRange = 0.1f..0.4f,
+                        elapsedTime = elapsedTime,
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .blur(1.dp)
+                    )
+                    ParticlesView(
+                        color = config.particleColor,
+                        particleCount = 10,
+                        speedRange = 20f..35f,
+                        sizeRange = 0.5f..2f,
+                        opacityRange = 0.3f..0.7f,
+                        elapsedTime = elapsedTime,
+                        modifier = Modifier.fillMaxSize()
+                    )
+                }
+
+                // Inner glow overlay
+                InnerGlowOverlay(
+                    modifier = Modifier.fillMaxSize()
+                )
+            }
         }
 
-        // Text cue
-        if (config.showTextCue) {
+        // Text cue (on top)
+        if (config.showTextCue && animationState.label.isNotEmpty()) {
             BreathingTextCue(
                 text = animationState.label,
                 color = config.textColor
@@ -101,27 +197,261 @@ fun BreathingExerciseView(
     }
 }
 
+// Custom shape for clipping
+private class MorphingBlobShape(
+    private val baseRadius: Float,
+    private val pointCount: Int,
+    private val offsets: List<Double>
+) : Shape {
+    override fun createOutline(
+        size: androidx.compose.ui.geometry.Size,
+        layoutDirection: LayoutDirection,
+        density: Density
+    ): Outline {
+        val path = Path()
+        if (pointCount < 3) return Outline.Generic(path)
+
+        val minDim = min(size.width, size.height)
+        val center = Offset(size.width / 2f, size.height / 2f)
+        val effectiveRadius = baseRadius * minDim / 2f
+
+        // Generate points around the circle with offsets
+        val points = mutableListOf<Offset>()
+        for (i in 0 until pointCount) {
+            val angle = (i.toDouble() / pointCount) * 2 * PI - PI / 2
+            val offset = if (i < offsets.size) offsets[i] else 0.0
+            val radius = effectiveRadius * (1.0 + offset).toFloat()
+
+            points.add(
+                Offset(
+                    x = center.x + (cos(angle) * radius).toFloat(),
+                    y = center.y + (sin(angle) * radius).toFloat()
+                )
+            )
+        }
+
+        // Tangent coefficient for smooth cubic bezier curves
+        val tangentCoeff = ((4.0 / 3.0) * tan(PI / (2.0 * pointCount))).toFloat()
+
+        // Start at first point
+        path.moveTo(points[0].x, points[0].y)
+
+        // Draw cubic bezier curves between each pair of points
+        for (i in 0 until pointCount) {
+            val current = points[i]
+            val next = points[(i + 1) % pointCount]
+
+            val currentAngle = (i.toDouble() / pointCount) * 2 * PI - PI / 2
+            val nextAngle = (((i + 1) % pointCount).toDouble() / pointCount) * 2 * PI - PI / 2
+
+            val currentOffset = if (i < offsets.size) offsets[i] else 0.0
+            val currentRadius = effectiveRadius * (1.0 + currentOffset).toFloat()
+            val currentTangentLength = currentRadius * tangentCoeff
+
+            val nextOffset = if ((i + 1) % pointCount < offsets.size) offsets[(i + 1) % pointCount] else 0.0
+            val nextRadius = effectiveRadius * (1.0 + nextOffset).toFloat()
+            val nextTangentLength = nextRadius * tangentCoeff
+
+            val control1 = Offset(
+                x = current.x + (cos(currentAngle + PI / 2) * currentTangentLength).toFloat(),
+                y = current.y + (sin(currentAngle + PI / 2) * currentTangentLength).toFloat()
+            )
+
+            val control2 = Offset(
+                x = next.x + (cos(nextAngle - PI / 2) * nextTangentLength).toFloat(),
+                y = next.y + (sin(nextAngle - PI / 2) * nextTangentLength).toFloat()
+            )
+
+            path.cubicTo(
+                control1.x, control1.y,
+                control2.x, control2.y,
+                next.x, next.y
+            )
+        }
+
+        path.close()
+        return Outline.Generic(path)
+    }
+}
+
 private data class AnimationState(
     val scale: Double,
     val wobbleOffsets: List<Double>,
     val phaseProgress: Double,
-    val label: String
+    val label: String,
+    val isActive: Boolean
 )
 
+@Composable
+private fun BaseDepthGlows(
+    glowColor: Color,
+    elapsedTime: Double,
+    modifier: Modifier = Modifier
+) {
+    val speed = 18.0
+    Box(modifier = modifier) {
+        SimpleRotatingGlow(
+            color = glowColor,
+            rotationSpeed = speed * 0.75,
+            direction = RotationDirection.COUNTER_CLOCKWISE,
+            elapsedTime = elapsedTime,
+            alpha = 0.5f,
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(4.dp)
+                .blur(8.dp)
+        )
+        SimpleRotatingGlow(
+            color = glowColor.copy(alpha = 0.5f),
+            rotationSpeed = speed * 0.25,
+            direction = RotationDirection.CLOCKWISE,
+            elapsedTime = elapsedTime,
+            alpha = 0.3f,
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(8.dp)
+                .blur(4.dp)
+        )
+    }
+}
+
+@Composable
+private fun CoreGlowEffects(
+    glowColor: Color,
+    elapsedTime: Double,
+    modifier: Modifier = Modifier
+) {
+    val speed = 18.0
+    val glowIntensity = 0.8
+    Box(modifier = modifier) {
+        SimpleRotatingGlow(
+            color = glowColor,
+            rotationSpeed = speed * 1.2,
+            direction = RotationDirection.CLOCKWISE,
+            elapsedTime = elapsedTime,
+            alpha = (glowIntensity * 0.8).toFloat(),
+            modifier = Modifier
+                .fillMaxSize()
+                .blur(12.dp)
+        )
+        SimpleRotatingGlow(
+            color = glowColor,
+            rotationSpeed = speed * 0.9,
+            direction = RotationDirection.CLOCKWISE,
+            elapsedTime = elapsedTime,
+            alpha = (glowIntensity * 0.6).toFloat(),
+            modifier = Modifier
+                .fillMaxSize()
+                .blur(8.dp)
+        )
+    }
+}
+
+@Composable
+private fun WavyBlobLayer(
+    elapsedTime: Double,
+    modifier: Modifier = Modifier
+) {
+    val blobSpeed = 20.0
+    Box(modifier = modifier) {
+        WavyBlobView(
+            color = Color.White.copy(alpha = 0.4f),
+            loopDuration = 60.0 / blobSpeed * 1.75,
+            elapsedTime = elapsedTime,
+            modifier = Modifier
+                .fillMaxSize()
+                .scale(1.5f)
+                .offset(y = 40.dp)
+                .blur(2.dp)
+        )
+        WavyBlobView(
+            color = Color.White.copy(alpha = 0.25f),
+            loopDuration = 60.0 / blobSpeed * 2.25,
+            elapsedTime = elapsedTime,
+            modifier = Modifier
+                .fillMaxSize()
+                .scale(1.2f)
+                .offset(y = (-40).dp)
+                .graphicsLayer { rotationZ = 90f }
+                .blur(2.dp)
+        )
+    }
+}
+
+@Composable
+private fun InnerGlowOverlay(modifier: Modifier = Modifier) {
+    Canvas(modifier = modifier) {
+        val center = Offset(size.width / 2f, size.height / 2f)
+        val radius = min(size.width, size.height) / 2f
+
+        drawCircle(
+            brush = Brush.verticalGradient(
+                colors = listOf(Color.Transparent, Color.White.copy(alpha = 0.15f)),
+            ),
+            radius = radius,
+            center = center
+        )
+    }
+}
+
+@Composable
+private fun BreathingShadow(
+    colors: List<Color>,
+    scale: Float,
+    modifier: Modifier = Modifier
+) {
+    Box(modifier = modifier) {
+        // Soft outer shadow
+        Canvas(
+            modifier = Modifier
+                .fillMaxSize()
+                .offset(y = 8.dp)
+                .blur(24.dp)
+                .graphicsLayer { alpha = 0.3f }
+        ) {
+            drawCircle(
+                brush = Brush.verticalGradient(colors.reversed()),
+                radius = size.minDimension / 2f * scale * 0.7f
+            )
+        }
+        // Closer shadow
+        Canvas(
+            modifier = Modifier
+                .fillMaxSize()
+                .offset(y = 4.dp)
+                .blur(12.dp)
+                .graphicsLayer { alpha = 0.5f }
+        ) {
+            drawCircle(
+                brush = Brush.verticalGradient(colors.reversed()),
+                radius = size.minDimension / 2f * scale * 0.7f
+            )
+        }
+    }
+}
+
+private fun easeOutCubic(t: Double): Double {
+    val t1 = t - 1
+    return t1 * t1 * t1 + 1
+}
+
 private fun updateAnimationState(
     frameTime: Long,
     config: BreathingConfiguration
 ): AnimationState {
     val state = BreathingSharedState
 
-    // Handle different states
+    // Always update wobble animation
+    updateWobble(frameTime, config)
+
     return when (state.state) {
         BreathingExerciseState.STOPPED, BreathingExerciseState.COMPLETE -> {
             AnimationState(
                 scale = 1.0,
-                wobbleOffsets = List(config.pointCount) { 0.0 },
+                wobbleOffsets = state.wobbleOffsets.toList(),
                 phaseProgress = 0.0,
-                label = ""
+                label = "",
+                isActive = false
             )
         }
 
@@ -130,7 +460,8 @@ private fun updateAnimationState(
                 scale = state.currentScale,
                 wobbleOffsets = state.wobbleOffsets.toList(),
                 phaseProgress = state.phaseProgress,
-                label = state.currentLabel
+                label = state.currentLabel,
+                isActive = true
             )
         }
 
@@ -138,22 +469,49 @@ private fun updateAnimationState(
             // Update phase timing
             updatePhaseState(frameTime)
 
-            // Interpolate scale toward target
-            val dt = (frameTime - state.lastWobbleUpdate) / 1_000_000_000.0
-            state.lastWobbleUpdate = frameTime
-
-            // Smooth scale interpolation
-            val scaleFactor = min(1.0, dt * 3.0)
-            state.currentScale = state.currentScale + (state.targetScale - state.currentScale) * scaleFactor
+            // Calculate scale and progress based on phase
+            val currentPhaseConfig = if (state.phases.isEmpty()) null else state.phases[state.currentPhaseIndex]
+            val scale: Double
+            val ringProgress: Double
+
+            if (currentPhaseConfig != null) {
+                when (currentPhaseConfig.phase) {
+                    BreathPhase.INHALE -> {
+                        val easedProgress = easeOutCubic(state.phaseProgress)
+                        scale = state.startScale + (state.targetScale - state.startScale) * easedProgress
+                        ringProgress = easedProgress
+                    }
+                    BreathPhase.EXHALE -> {
+                        val easedProgress = easeOutCubic(state.phaseProgress)
+                        scale = state.startScale + (state.targetScale - state.startScale) * easedProgress
+                        ringProgress = 1.0 - easedProgress
+                    }
+                    BreathPhase.HOLD_IN -> {
+                        scale = state.targetScale
+                        ringProgress = 1.0
+                    }
+                    BreathPhase.HOLD_OUT -> {
+                        scale = state.targetScale
+                        ringProgress = 0.0
+                    }
+                    BreathPhase.IDLE -> {
+                        scale = state.targetScale
+                        ringProgress = 0.0
+                    }
+                }
+            } else {
+                scale = 1.0
+                ringProgress = 0.0
+            }
 
-            // Update wobble animation
-            updateWobble(frameTime, config)
+            state.currentScale = scale
 
             AnimationState(
-                scale = state.currentScale,
+                scale = scale,
                 wobbleOffsets = state.wobbleOffsets.toList(),
-                phaseProgress = state.phaseProgress,
-                label = state.currentLabel
+                phaseProgress = ringProgress,
+                label = state.currentLabel,
+                isActive = true
             )
         }
     }
@@ -194,6 +552,7 @@ private fun updatePhaseState(frameTime: Long) {
         val newPhaseConfig = state.phases[state.currentPhaseIndex]
         state.currentPhase = newPhaseConfig.phase
         state.currentLabel = newPhaseConfig.label
+        state.startScale = state.currentScale
         state.targetScale = newPhaseConfig.targetScale
         state.phaseProgress = 0.0
 
@@ -216,7 +575,6 @@ private fun updatePhaseState(frameTime: Long) {
 
 private fun updateWobble(frameTime: Long, config: BreathingConfiguration) {
     val state = BreathingSharedState
-    val wobbleUpdateInterval = 0.8  // New targets every 0.8 seconds
 
     // Ensure arrays are sized correctly
     if (state.wobbleOffsets.size != config.pointCount) {
@@ -224,21 +582,26 @@ private fun updateWobble(frameTime: Long, config: BreathingConfiguration) {
         state.wobbleTargets = MutableList(config.pointCount) { 0.0 }
     }
 
-    // Check if we need new random targets
+    // Check if we need new random targets (slower, more organic)
     val timeSinceLastTarget = (frameTime - state.lastWobbleTargetUpdate) / 1_000_000_000.0
-    if (timeSinceLastTarget > wobbleUpdateInterval || state.wobbleTargets.all { it == 0.0 }) {
+    if (timeSinceLastTarget > 1.8 || state.wobbleTargets.all { it == 0.0 }) {
         state.lastWobbleTargetUpdate = frameTime
         val intensity = state.wobbleIntensity * config.wobbleIntensity
-        val maxOffset = 0.08 * intensity  // Max 8% radius variation at full intensity
+        val maxOffset = 0.18 * intensity
 
         for (i in 0 until config.pointCount) {
-            state.wobbleTargets[i] = Random.nextDouble(-maxOffset, maxOffset)
+            val phase = i.toDouble() / config.pointCount * 2.0 * PI
+            val wave1 = sin(phase * 2 + Random.nextDouble()) * 0.6
+            val wave2 = cos(phase * 3 + Random.nextDouble()) * 0.4
+            val baseOffset = Random.nextDouble(-maxOffset, maxOffset)
+            state.wobbleTargets[i] = baseOffset * (1.0 + wave1 + wave2) * 0.5
         }
     }
 
-    // Interpolate offsets toward targets
-    val interpolationSpeed = 4.0
+    // Smoothly interpolate offsets toward targets
     val dt = (frameTime - state.lastWobbleUpdate) / 1_000_000_000.0
+    state.lastWobbleUpdate = frameTime
+    val interpolationSpeed = 1.8
     val factor = min(1.0, dt * interpolationSpeed)
 
     for (i in 0 until min(state.wobbleOffsets.size, state.wobbleTargets.size)) {

package/android/src/main/java/expo/modules/breathing/BreathingSharedState.kt

@@ -53,6 +53,9 @@ object BreathingSharedState {
     @Volatile
     var targetScale: Double = 1.0
 
+    @Volatile
+    var startScale: Double = 1.0  // Scale at start of current phase
+
     @Volatile
     var currentPhase: BreathPhase = BreathPhase.IDLE
 
@@ -95,6 +98,7 @@ object BreathingSharedState {
         currentCycle = 0
         currentScale = 1.0
         targetScale = 1.0
+        startScale = 1.0
         currentPhase = BreathPhase.IDLE
         currentLabel = ""
         phaseProgress = 0.0

package/android/src/main/java/expo/modules/breathing/BreathingTextCue.kt

@@ -9,7 +9,10 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shadow
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
 
@@ -32,9 +35,16 @@ fun BreathingTextCue(
         ) { currentText ->
             Text(
                 text = currentText,
-                color = color,
-                fontSize = 24.sp,
-                fontWeight = FontWeight.Medium
+                style = TextStyle(
+                    color = color,
+                    fontSize = 24.sp,
+                    fontWeight = FontWeight.SemiBold,
+                    shadow = Shadow(
+                        color = Color.Black.copy(alpha = 0.5f),
+                        offset = Offset(0f, 2f),
+                        blurRadius = 8f
+                    )
+                )
             )
         }
     }

package/android/src/main/java/expo/modules/breathing/ExpoBreathingExerciseModule.kt

@@ -74,6 +74,26 @@ class ExpoBreathingExerciseModule : Module() {
                 view.setShowShadow(value)
             }
 
+            Prop("showParticles") { view: ExpoBreathingExerciseView, value: Boolean ->
+                view.setShowParticles(value)
+            }
+
+            Prop("showWavyBlobs") { view: ExpoBreathingExerciseView, value: Boolean ->
+                view.setShowWavyBlobs(value)
+            }
+
+            Prop("showGlowEffects") { view: ExpoBreathingExerciseView, value: Boolean ->
+                view.setShowGlowEffects(value)
+            }
+
+            Prop("glowColor") { view: ExpoBreathingExerciseView, color: Any ->
+                view.setGlowColor(parseColor(color))
+            }
+
+            Prop("particleColor") { view: ExpoBreathingExerciseView, color: Any ->
+                view.setParticleColor(parseColor(color))
+            }
+
             Prop("pointCount") { view: ExpoBreathingExerciseView, value: Int ->
                 view.setPointCount(value)
             }
@@ -130,6 +150,7 @@ class ExpoBreathingExerciseModule : Module() {
         val firstPhase = phases[0]
         state.currentPhase = firstPhase.phase
         state.currentLabel = firstPhase.label
+        state.startScale = 1.0
         state.targetScale = firstPhase.targetScale
         state.currentScale = 1.0
         state.phaseProgress = 0.0

package/android/src/main/java/expo/modules/breathing/ExpoBreathingExerciseView.kt

@@ -14,6 +14,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.unit.dp
 import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
 
 class ExpoBreathingExerciseView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
@@ -120,4 +121,24 @@ class ExpoBreathingExerciseView(context: Context, appContext: AppContext) : Expo
     fun setWobbleIntensity(value: Double) {
         config = config.copy(wobbleIntensity = value.coerceIn(0.0, 1.0))
     }
+
+    fun setGlowColor(color: Int) {
+        config = config.copy(glowColor = Color(color))
+    }
+
+    fun setParticleColor(color: Int) {
+        config = config.copy(particleColor = Color(color))
+    }
+
+    fun setShowParticles(value: Boolean) {
+        config = config.copy(showParticles = value)
+    }
+
+    fun setShowWavyBlobs(value: Boolean) {
+        config = config.copy(showWavyBlobs = value)
+    }
+
+    fun setShowGlowEffects(value: Boolean) {
+        config = config.copy(showGlowEffects = value)
+    }
 }

package/ios/Breathing/BreathingExerciseView.swift

@@ -93,21 +93,21 @@ public struct BreathingExerciseView: View {
 
     private var particleView: some View {
         ZStack {
-            ParticlesView(
+            BreathingParticlesView(
                 color: config.particleColor,
+                particleCount: 15,
                 speedRange: 10...20,
-                sizeRange: 0.5...1,
-                particleCount: 10,
-                opacityRange: 0...0.3
+                sizeRange: 1...3,
+                opacityRange: 0.1...0.4
             )
             .blur(radius: 1)
 
-            ParticlesView(
+            BreathingParticlesView(
                 color: config.particleColor,
-                speedRange: 20...30,
-                sizeRange: 0.2...1,
                 particleCount: 10,
-                opacityRange: 0.3...0.8
+                speedRange: 20...35,
+                sizeRange: 0.5...2,
+                opacityRange: 0.3...0.7
             )
         }
         .blendMode(.plusLighter)

package/ios/Breathing/BreathingParticlesView.swift

@@ -0,0 +1,81 @@
+import SwiftUI
+
+/// Pure SwiftUI particle system - no SpriteKit, no console warnings
+struct BreathingParticlesView: View {
+    let color: Color
+    let particleCount: Int
+    let speedRange: ClosedRange<Double>
+    let sizeRange: ClosedRange<CGFloat>
+    let opacityRange: ClosedRange<Double>
+
+    init(
+        color: Color = .white,
+        particleCount: Int = 20,
+        speedRange: ClosedRange<Double> = 10...30,
+        sizeRange: ClosedRange<CGFloat> = 0.5...2.0,
+        opacityRange: ClosedRange<Double> = 0.1...0.8
+    ) {
+        self.color = color
+        self.particleCount = particleCount
+        self.speedRange = speedRange
+        self.sizeRange = sizeRange
+        self.opacityRange = opacityRange
+    }
+
+    var body: some View {
+        TimelineView(.animation) { timeline in
+            Canvas { context, size in
+                let time = timeline.date.timeIntervalSinceReferenceDate
+
+                for i in 0..<particleCount {
+                    // Use deterministic seed based on particle index
+                    let seed = Double(i) * 1.618033988749895 // Golden ratio for good distribution
+
+                    // Particle properties derived from seed
+                    let baseX = fract(seed * 0.7)
+                    let _ = fract(seed * 1.3) // Reserved for future horizontal variation
+                    let particleSpeed = speedRange.lowerBound + fract(seed * 2.1) * (speedRange.upperBound - speedRange.lowerBound)
+                    let particleSize = sizeRange.lowerBound + CGFloat(fract(seed * 3.7)) * (sizeRange.upperBound - sizeRange.lowerBound)
+                    let baseOpacity = opacityRange.lowerBound + fract(seed * 4.3) * (opacityRange.upperBound - opacityRange.lowerBound)
+                    let lifetime = 2.0 + fract(seed * 5.1) * 2.0 // 2-4 seconds
+
+                    // Calculate current position in lifecycle
+                    let phase = fract((time * particleSpeed / 100.0 + seed) / lifetime)
+
+                    // Y position: rise from bottom to top
+                    let y = size.height * (1.0 - phase)
+
+                    // X position: slight horizontal drift
+                    let drift = sin(time * 0.5 + seed * 10) * 20
+                    let x = baseX * size.width + drift
+
+                    // Opacity: fade in and out
+                    let fadeIn = min(1.0, phase * 5.0) // Quick fade in
+                    let fadeOut = min(1.0, (1.0 - phase) * 3.0) // Slower fade out
+                    let opacity = baseOpacity * fadeIn * fadeOut
+
+                    // Scale: grow then shrink
+                    let scalePhase = phase < 0.3 ? phase / 0.3 : (1.0 - (phase - 0.3) / 0.7)
+                    let scale = 0.5 + scalePhase * 0.5
+
+                    // Draw particle
+                    let rect = CGRect(
+                        x: x - particleSize * scale / 2,
+                        y: y - particleSize * scale / 2,
+                        width: particleSize * scale,
+                        height: particleSize * scale
+                    )
+
+                    context.fill(
+                        Circle().path(in: rect),
+                        with: .color(color.opacity(opacity))
+                    )
+                }
+            }
+        }
+    }
+
+    private func fract(_ x: Double) -> Double {
+        x - floor(x)
+    }
+}

package/ios/Breathing/BreathingTextCue.swift

@@ -6,9 +6,9 @@ struct BreathingTextCue: View {
 
     var body: some View {
         Text(text)
-            .font(.system(size: 24, weight: .medium, design: .rounded))
+            .font(.system(size: 24, weight: .semibold, design: .rounded))
             .foregroundColor(color)
-            .shadow(color: color.opacity(0.5), radius: 4, x: 0, y: 2)
+            .shadow(color: Color.black.opacity(0.5), radius: 8, x: 0, y: 2)
             .animation(.easeInOut(duration: 0.3), value: text)
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-orb",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Animated orb and breathing exercise components for React Native (iOS, Android)",
   "main": "build/index.js",
   "types": "build/index.d.ts",