expo-orb 0.1.0 → 0.2.0

package/ios/Breathing/MorphingBlobView.swift

@@ -0,0 +1,242 @@
+import SwiftUI
+
+struct MorphingBlobView: View {
+    let baseRadius: CGFloat
+    let pointCount: Int
+    let offsets: [Double]
+    let colors: [Color]
+    let innerColor: Color
+    let showInnerBlob: Bool
+    var elapsedTime: Double = 0
+
+    var body: some View {
+        GeometryReader { geometry in
+            let size = min(geometry.size.width, geometry.size.height)
+            let center = CGPoint(x: size / 2, y: size / 2)
+            let effectiveRadius = baseRadius * size / 2
+
+            ZStack {
+                // Main blob with linear gradient fill (like OrbView)
+                MorphingBlobShape(
+                    center: center,
+                    baseRadius: effectiveRadius,
+                    pointCount: pointCount,
+                    offsets: offsets
+                )
+                .fill(
+                    LinearGradient(
+                        colors: colors,
+                        startPoint: .bottom,
+                        endPoint: .top
+                    )
+                )
+
+                // Inner glow overlay (like OrbView's realisticInnerGlows)
+                MorphingBlobShape(
+                    center: center,
+                    baseRadius: effectiveRadius,
+                    pointCount: pointCount,
+                    offsets: offsets
+                )
+                .stroke(
+                    LinearGradient(
+                        colors: [.white.opacity(0.6), .clear],
+                        startPoint: .bottom,
+                        endPoint: .top
+                    ),
+                    lineWidth: 3
+                )
+                .blur(radius: 4)
+                .blendMode(.plusLighter)
+
+                // Inner animated blob like OrbView's WavyBlobView
+                if showInnerBlob {
+                    InnerWavyBlob(
+                        center: center,
+                        baseRadius: effectiveRadius * 0.55,
+                        color: innerColor,
+                        elapsedTime: elapsedTime
+                    )
+                    .blur(radius: 10)
+                    .blendMode(.plusLighter)
+                }
+            }
+        }
+    }
+}
+
+// Inner blob with time-based animation like WavyBlobView
+struct InnerWavyBlob: View {
+    let center: CGPoint
+    let baseRadius: CGFloat
+    let color: Color
+    let elapsedTime: Double
+
+    private let pointCount = 6
+    private let loopDuration: Double = 4.0
+
+    var body: some View {
+        Canvas { context, size in
+            let angle = (elapsedTime.truncatingRemainder(dividingBy: loopDuration) / loopDuration) * 2 * .pi
+
+            var path = Path()
+
+            // Generate points with time-based smooth movement
+            var points: [CGPoint] = []
+            for i in 0..<pointCount {
+                let baseAngle = (Double(i) / Double(pointCount)) * 2 * .pi
+                let phaseOffset = Double(i) * .pi / 3
+
+                // Smooth oscillating offsets
+                let radiusOffset = sin(angle * 2 + phaseOffset) * 0.15 + cos(angle * 1.5 + phaseOffset * 0.7) * 0.1
+                let angleOffset = cos(angle + phaseOffset) * 0.1
+
+                let r = baseRadius * (1.0 + radiusOffset)
+                let a = baseAngle + angleOffset
+
+                points.append(CGPoint(
+                    x: center.x + cos(a) * r,
+                    y: center.y + sin(a) * r
+                ))
+            }
+
+            // Start path
+            path.move(to: points[0])
+
+            // Create smooth curves between points
+            let handleLength = baseRadius * 0.5
+
+            for i in 0..<pointCount {
+                let current = points[i]
+                let next = points[(i + 1) % pointCount]
+
+                let currentAngle = atan2(current.y - center.y, current.x - center.x)
+                let nextAngle = atan2(next.y - center.y, next.x - center.x)
+
+                let control1 = CGPoint(
+                    x: current.x + cos(currentAngle + .pi / 2) * handleLength,
+                    y: current.y + sin(currentAngle + .pi / 2) * handleLength
+                )
+
+                let control2 = CGPoint(
+                    x: next.x + cos(nextAngle - .pi / 2) * handleLength,
+                    y: next.y + sin(nextAngle - .pi / 2) * handleLength
+                )
+
+                path.addCurve(to: next, control1: control1, control2: control2)
+            }
+
+            path.closeSubpath()
+            context.fill(path, with: .color(color))
+        }
+    }
+}
+
+struct MorphingBlobShape: Shape {
+    var center: CGPoint
+    var baseRadius: CGFloat
+    var pointCount: Int
+    var offsets: [Double]
+
+    var animatableData: AnimatableVector {
+        get { AnimatableVector(values: offsets) }
+        set { offsets = newValue.values }
+    }
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+
+        guard pointCount >= 3 else { return path }
+
+        // Generate points around the circle with offsets
+        var points: [CGPoint] = []
+        for i in 0..<pointCount {
+            let angle = (Double(i) / Double(pointCount)) * 2 * .pi - .pi / 2
+            let offset = i < offsets.count ? offsets[i] : 0
+            let radius = baseRadius * (1.0 + offset)
+
+            points.append(CGPoint(
+                x: center.x + CGFloat(cos(angle)) * radius,
+                y: center.y + CGFloat(sin(angle)) * radius
+            ))
+        }
+
+        // Tangent coefficient for smooth cubic bezier curves
+        let tangentCoeff = CGFloat((4.0 / 3.0) * tan(.pi / (2.0 * Double(pointCount))))
+
+        // Start at first point
+        path.move(to: points[0])
+
+        // Draw cubic bezier curves between each pair of points
+        for i in 0..<pointCount {
+            let current = points[i]
+            let next = points[(i + 1) % pointCount]
+
+            let currentAngle = (Double(i) / Double(pointCount)) * 2 * .pi - .pi / 2
+            let nextAngle = (Double((i + 1) % pointCount) / Double(pointCount)) * 2 * .pi - .pi / 2
+
+            let currentOffset = i < offsets.count ? offsets[i] : 0
+            let currentRadius = baseRadius * CGFloat(1.0 + currentOffset)
+            let currentTangentLength = currentRadius * tangentCoeff
+
+            let nextOffset = (i + 1) % pointCount < offsets.count ? offsets[(i + 1) % pointCount] : 0
+            let nextRadius = baseRadius * CGFloat(1.0 + nextOffset)
+            let nextTangentLength = nextRadius * tangentCoeff
+
+            let control1 = CGPoint(
+                x: current.x + CGFloat(cos(currentAngle + .pi / 2)) * currentTangentLength,
+                y: current.y + CGFloat(sin(currentAngle + .pi / 2)) * currentTangentLength
+            )
+
+            let control2 = CGPoint(
+                x: next.x + CGFloat(cos(nextAngle - .pi / 2)) * nextTangentLength,
+                y: next.y + CGFloat(sin(nextAngle - .pi / 2)) * nextTangentLength
+            )
+
+            path.addCurve(to: next, control1: control1, control2: control2)
+        }
+
+        path.closeSubpath()
+        return path
+    }
+}
+
+struct AnimatableVector: VectorArithmetic {
+    var values: [Double]
+
+    static var zero: AnimatableVector {
+        AnimatableVector(values: [])
+    }
+
+    static func + (lhs: AnimatableVector, rhs: AnimatableVector) -> AnimatableVector {
+        let maxCount = max(lhs.values.count, rhs.values.count)
+        var result = [Double](repeating: 0, count: maxCount)
+        for i in 0..<maxCount {
+            let l = i < lhs.values.count ? lhs.values[i] : 0
+            let r = i < rhs.values.count ? rhs.values[i] : 0
+            result[i] = l + r
+        }
+        return AnimatableVector(values: result)
+    }
+
+    static func - (lhs: AnimatableVector, rhs: AnimatableVector) -> AnimatableVector {
+        let maxCount = max(lhs.values.count, rhs.values.count)
+        var result = [Double](repeating: 0, count: maxCount)
+        for i in 0..<maxCount {
+            let l = i < lhs.values.count ? lhs.values[i] : 0
+            let r = i < rhs.values.count ? rhs.values[i] : 0
+            result[i] = l - r
+        }
+        return AnimatableVector(values: result)
+    }
+
+    mutating func scale(by rhs: Double) {
+        for i in 0..<values.count {
+            values[i] *= rhs
+        }
+    }
+
+    var magnitudeSquared: Double {
+        values.reduce(0) { $0 + $1 * $1 }
+    }
+}

package/ios/Breathing/ProgressRingView.swift

@@ -0,0 +1,27 @@
+import SwiftUI
+
+struct ProgressRingView: View {
+    let progress: Double
+    let color: Color
+    let lineWidth: CGFloat
+    let size: CGFloat
+
+    var body: some View {
+        ZStack {
+            // Background ring
+            Circle()
+                .stroke(color.opacity(0.2), lineWidth: lineWidth)
+                .frame(width: size, height: size)
+
+            // Progress arc
+            Circle()
+                .trim(from: 0, to: CGFloat(min(max(progress, 0), 1)))
+                .stroke(
+                    color,
+                    style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)
+                )
+                .frame(width: size, height: size)
+                .rotationEffect(.degrees(-90))
+        }
+    }
+}

package/ios/ExpoBreathingExerciseModule.swift

@@ -0,0 +1,182 @@
+import ExpoModulesCore
+import UIKit
+
+public class ExpoBreathingExerciseModule: Module {
+    public func definition() -> ModuleDefinition {
+        Name("ExpoBreathingExercise")
+
+        Events("onPhaseChange", "onExerciseComplete")
+
+        Function("startBreathingExercise") { (pattern: [String: Any]) in
+            DispatchQueue.main.async {
+                self.startExercise(pattern: pattern)
+            }
+        }
+
+        Function("stopBreathingExercise") {
+            DispatchQueue.main.async {
+                BreathingSharedState.shared.reset()
+            }
+        }
+
+        Function("pauseBreathingExercise") {
+            DispatchQueue.main.async {
+                let state = BreathingSharedState.shared
+                if state.state == .running {
+                    state.state = .paused
+                    state.pauseTime = Date()
+                }
+            }
+        }
+
+        Function("resumeBreathingExercise") {
+            DispatchQueue.main.async {
+                let state = BreathingSharedState.shared
+                if state.state == .paused, let pauseTime = state.pauseTime {
+                    let pauseDuration = Date().timeIntervalSince(pauseTime)
+                    state.phaseStartTime = state.phaseStartTime.addingTimeInterval(pauseDuration)
+                    state.exerciseStartTime = state.exerciseStartTime.addingTimeInterval(pauseDuration)
+                    state.state = .running
+                    state.pauseTime = nil
+                }
+            }
+        }
+
+        View(ExpoBreathingExerciseView.self) {
+            Events("onPhaseChange", "onExerciseComplete")
+
+            Prop("blobColors") { (view: ExpoBreathingExerciseView, colors: [UIColor]) in
+                view.updateProps { $0.blobColors = colors }
+            }
+
+            Prop("innerBlobColor") { (view: ExpoBreathingExerciseView, color: UIColor) in
+                view.updateProps { $0.innerBlobColor = color }
+            }
+
+            Prop("glowColor") { (view: ExpoBreathingExerciseView, color: UIColor) in
+                view.updateProps { $0.glowColor = color }
+            }
+
+            Prop("particleColor") { (view: ExpoBreathingExerciseView, color: UIColor) in
+                view.updateProps { $0.particleColor = color }
+            }
+
+            Prop("progressRingColor") { (view: ExpoBreathingExerciseView, color: UIColor) in
+                view.updateProps { $0.progressRingColor = color }
+            }
+
+            Prop("textColor") { (view: ExpoBreathingExerciseView, color: UIColor) in
+                view.updateProps { $0.textColor = color }
+            }
+
+            Prop("showProgressRing") { (view: ExpoBreathingExerciseView, value: Bool) in
+                view.updateProps { $0.showProgressRing = value }
+            }
+
+            Prop("showTextCue") { (view: ExpoBreathingExerciseView, value: Bool) in
+                view.updateProps { $0.showTextCue = value }
+            }
+
+            Prop("showInnerBlob") { (view: ExpoBreathingExerciseView, value: Bool) in
+                view.updateProps { $0.showInnerBlob = value }
+            }
+
+            Prop("showShadow") { (view: ExpoBreathingExerciseView, value: Bool) in
+                view.updateProps { $0.showShadow = value }
+            }
+
+            Prop("showParticles") { (view: ExpoBreathingExerciseView, value: Bool) in
+                view.updateProps { $0.showParticles = value }
+            }
+
+            Prop("showWavyBlobs") { (view: ExpoBreathingExerciseView, value: Bool) in
+                view.updateProps { $0.showWavyBlobs = value }
+            }
+
+            Prop("showGlowEffects") { (view: ExpoBreathingExerciseView, value: Bool) in
+                view.updateProps { $0.showGlowEffects = value }
+            }
+
+            Prop("pointCount") { (view: ExpoBreathingExerciseView, value: Int) in
+                view.updateProps { $0.pointCount = value }
+            }
+
+            Prop("wobbleIntensity") { (view: ExpoBreathingExerciseView, value: Double) in
+                view.updateProps { $0.wobbleIntensity = value }
+            }
+        }
+    }
+
+    private func startExercise(pattern: [String: Any]) {
+        let state = BreathingSharedState.shared
+        state.reset()
+
+        // Parse phases
+        guard let phasesArray = pattern["phases"] as? [[String: Any]] else {
+            return
+        }
+
+        var phases: [BreathPhaseConfig] = []
+        for phaseDict in phasesArray {
+            guard let phaseString = phaseDict["phase"] as? String,
+                  let duration = phaseDict["duration"] as? Double,
+                  let targetScale = phaseDict["targetScale"] as? Double,
+                  let label = phaseDict["label"] as? String else {
+                continue
+            }
+
+            let phase: BreathPhase
+            switch phaseString {
+            case "inhale": phase = .inhale
+            case "holdIn": phase = .holdIn
+            case "exhale": phase = .exhale
+            case "holdOut": phase = .holdOut
+            default: continue
+            }
+
+            phases.append(BreathPhaseConfig(
+                phase: phase,
+                duration: duration / 1000.0,  // Convert ms to seconds
+                targetScale: targetScale,
+                label: label
+            ))
+        }
+
+        guard !phases.isEmpty else { return }
+
+        // Parse cycles
+        if let cycles = pattern["cycles"] as? Int {
+            state.totalCycles = cycles
+        } else {
+            state.totalCycles = nil
+        }
+
+        // Setup state
+        state.phases = phases
+        state.currentPhaseIndex = 0
+        state.currentCycle = 0
+        state.phaseStartTime = Date()
+        state.exerciseStartTime = Date()
+
+        // Set initial phase values
+        let firstPhase = phases[0]
+        state.currentPhase = firstPhase.phase
+        state.currentLabel = firstPhase.label
+        state.startScale = 1.0    // Start scale for first phase
+        state.targetScale = firstPhase.targetScale
+        state.currentScale = 1.0  // Start at base scale
+        state.phaseProgress = 0
+
+        // Set initial wobble intensity
+        switch firstPhase.phase {
+        case .inhale, .exhale:
+            state.wobbleIntensity = 1.0
+        case .holdIn, .holdOut:
+            state.wobbleIntensity = 0.3
+        case .idle:
+            state.wobbleIntensity = 0.5
+        }
+
+        state.state = .running
+    }
+}

package/ios/ExpoBreathingExerciseView.swift

@@ -0,0 +1,124 @@
+import ExpoModulesCore
+import SwiftUI
+
+private final class BreathingConfigurationModel: ObservableObject {
+    @Published var configuration: BreathingConfiguration
+
+    init(configuration: BreathingConfiguration) {
+        self.configuration = configuration
+    }
+}
+
+private struct BreathingContainerView: View {
+    @ObservedObject var model: BreathingConfigurationModel
+
+    var body: some View {
+        BreathingExerciseView(configuration: model.configuration)
+    }
+}
+
+struct BreathingProps {
+    private static let defaultBlobColors: [UIColor] = [
+        UIColor(red: 0.4, green: 0.7, blue: 0.9, alpha: 1.0),
+        UIColor(red: 0.3, green: 0.5, blue: 0.8, alpha: 1.0),
+        UIColor(red: 0.5, green: 0.3, blue: 0.7, alpha: 1.0)
+    ]
+
+    var blobColors: [UIColor] = BreathingProps.defaultBlobColors
+    var innerBlobColor: UIColor = UIColor.white.withAlphaComponent(0.3)
+    var glowColor: UIColor = .white
+    var particleColor: UIColor = .white
+    var progressRingColor: UIColor = UIColor.white.withAlphaComponent(0.5)
+    var textColor: UIColor = .white
+    var showProgressRing: Bool = true
+    var showTextCue: Bool = true
+    var showInnerBlob: Bool = true
+    var showShadow: Bool = true
+    var showParticles: Bool = true
+    var showWavyBlobs: Bool = true
+    var showGlowEffects: Bool = true
+    var pointCount: Int = 8
+    var wobbleIntensity: Double = 1.0
+
+    func makeConfiguration() -> BreathingConfiguration {
+        let resolvedBlobColors = blobColors.count >= 2
+            ? blobColors
+            : BreathingProps.defaultBlobColors
+
+        return BreathingConfiguration(
+            blobColors: resolvedBlobColors.map { Color(uiColor: $0) },
+            innerBlobColor: Color(uiColor: innerBlobColor),
+            glowColor: Color(uiColor: glowColor),
+            particleColor: Color(uiColor: particleColor),
+            progressRingColor: Color(uiColor: progressRingColor),
+            textColor: Color(uiColor: textColor),
+            showProgressRing: showProgressRing,
+            showTextCue: showTextCue,
+            showInnerBlob: showInnerBlob,
+            showShadow: showShadow,
+            showParticles: showParticles,
+            showWavyBlobs: showWavyBlobs,
+            showGlowEffects: showGlowEffects,
+            pointCount: max(6, pointCount),
+            wobbleIntensity: max(0, min(1, wobbleIntensity))
+        )
+    }
+}
+
+class ExpoBreathingExerciseView: ExpoView {
+    private var props = BreathingProps()
+    private let model: BreathingConfigurationModel
+    private let hostingController: UIHostingController<BreathingContainerView>
+
+    private let onPhaseChange = EventDispatcher()
+    private let onExerciseComplete = EventDispatcher()
+
+    required init(appContext: AppContext? = nil) {
+        let initialConfig = BreathingConfiguration()
+        let model = BreathingConfigurationModel(configuration: initialConfig)
+        self.model = model
+        self.hostingController = UIHostingController(rootView: BreathingContainerView(model: model))
+
+        super.init(appContext: appContext)
+
+        clipsToBounds = false
+        hostingController.view.backgroundColor = .clear
+        hostingController.view.clipsToBounds = false
+        hostingController.view.isOpaque = false
+        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
+        addSubview(hostingController.view)
+
+        NSLayoutConstraint.activate([
+            hostingController.view.leadingAnchor.constraint(equalTo: leadingAnchor),
+            hostingController.view.trailingAnchor.constraint(equalTo: trailingAnchor),
+            hostingController.view.topAnchor.constraint(equalTo: topAnchor),
+            hostingController.view.bottomAnchor.constraint(equalTo: bottomAnchor),
+        ])
+
+        // Setup callbacks
+        setupCallbacks()
+    }
+
+    private func setupCallbacks() {
+        BreathingSharedState.shared.onPhaseChange = { [weak self] phase, label, phaseIndex, cycle in
+            self?.onPhaseChange([
+                "phase": phase.rawValue,
+                "label": label,
+                "phaseIndex": phaseIndex,
+                "cycle": cycle
+            ])
+        }
+
+        BreathingSharedState.shared.onExerciseComplete = { [weak self] totalCycles, totalDuration in
+            self?.onExerciseComplete([
+                "totalCycles": totalCycles,
+                "totalDuration": totalDuration
+            ])
+        }
+    }
+
+    func updateProps(_ update: (inout BreathingProps) -> Void) {
+        update(&props)
+        model.configuration = props.makeConfiguration()
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-orb",
-  "version": "0.1.0",
-  "description": "Animated orb component for React Native (iOS, Android, Web)",
+  "version": "0.2.0",
+  "description": "Animated orb and breathing exercise components for React Native (iOS, Android)",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "scripts": {
@@ -21,16 +21,19 @@
     "expo-orb",
     "orb",
     "animation",
+    "breathing",
+    "breathing-exercise",
+    "meditation",
     "ios",
     "android"
   ],
-  "repository": "https://github.com/enso-works/expo-orb",
+  "repository": "https://github.com/enso-works/expo-orb-animation",
   "bugs": {
-    "url": "https://github.com/enso-works/expo-orb/issues"
+    "url": "https://github.com/enso-works/expo-orb-animation/issues"
   },
   "author": "Ensar Bavrk <ensar.bavrk@gmail.com> (https://github.com/enso-works)",
   "license": "MIT",
-  "homepage": "https://github.com/enso-works/expo-orb#readme",
+  "homepage": "https://github.com/enso-works/expo-orb-animation#readme",
   "dependencies": {},
   "devDependencies": {
     "@types/react": "~19.1.0",

package/src/ExpoBreathingExercise.types.ts

@@ -0,0 +1,50 @@
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+
+export type BreathPhase = 'inhale' | 'holdIn' | 'exhale' | 'holdOut';
+
+export interface BreathPhaseConfig {
+  phase: BreathPhase;
+  duration: number;      // milliseconds
+  targetScale: number;   // e.g., 1.0 to 1.3
+  label: string;         // "Breathe In"
+}
+
+export interface BreathingPattern {
+  phases: BreathPhaseConfig[];
+  cycles?: number;       // undefined = infinite
+}
+
+export type BreathingPreset = 'relaxing' | 'box' | 'energizing' | 'calming';
+
+export interface PhaseChangeEvent {
+  phase: BreathPhase;
+  label: string;
+  phaseIndex: number;
+  cycle: number;
+}
+
+export interface ExerciseCompleteEvent {
+  totalCycles: number;
+  totalDuration: number;
+}
+
+export interface ExpoBreathingExerciseViewProps {
+  blobColors?: ColorValue[];
+  innerBlobColor?: ColorValue;
+  glowColor?: ColorValue;
+  particleColor?: ColorValue;
+  progressRingColor?: ColorValue;
+  textColor?: ColorValue;
+  showProgressRing?: boolean;
+  showTextCue?: boolean;
+  showInnerBlob?: boolean;
+  showShadow?: boolean;
+  showParticles?: boolean;
+  showWavyBlobs?: boolean;
+  showGlowEffects?: boolean;
+  pointCount?: number;           // Morphing points (default: 8)
+  wobbleIntensity?: number;      // 0-1
+  onPhaseChange?: (event: { nativeEvent: PhaseChangeEvent }) => void;
+  onExerciseComplete?: (event: { nativeEvent: ExerciseCompleteEvent }) => void;
+  style?: StyleProp<ViewStyle>;
+}