MotionGlassUI

An interactive UI demonstration combining glass morphism effects with device motion sensors for immersive parallax interactions and physics-based animations.

Overview

MotionGlassUI showcases advanced SwiftUI techniques by integrating CoreMotion's gyroscope data with modern glass effect design. The app responds to device tilting with parallax effects, features draggable emoji elements with spring physics, and demonstrates interactive glass overlays.

Features

• Motion-Based Parallax: UI elements respond to device gyroscope tilting
• Draggable Elements: Physics-based draggable emoji with spring animations
• Glass Effect Overlays: Translucent frosted glass on lists and buttons
• Real-Time Motion Tracking: CoreMotion integration for device attitude
• Interactive Feedback: Visual responses to both motion and touch
• NavigationLink Integration: Motion effects persist through navigation

Technical Stack

• Framework: SwiftUI
• Motion Tracking: CoreMotion (CMMotionManager)
• iOS Version: iOS 15+
• Architecture: MotionManager with real-time device attitude tracking
• Animation: Spring physics and gesture-based animations

Key Learning Concepts

This project demonstrates:

• CoreMotion integration with SwiftUI
• Real-time sensor data processing
• Parallax effect implementation
• Drag gesture handling with physics
• Combining multiple animation types
• Observable object pattern for motion data

Project Structure

MotionGlassUI/
├── Managers/
│   └── MotionManager.swift      # CMMotionManager wrapper
├── Components/
│   ├── GlassContainer.swift     # Reusable glass effect
│   └── DraggableEmoji.swift     # Physics-based draggable
├── Views/
│   └── ContentView.swift        # Main interactive view
└── MotionGlassUIApp.swift

Code Highlights

Motion Manager

class MotionManager: ObservableObject {
    private var motionManager = CMMotionManager()
    @Published var roll: Double = 0.0
    @Published var pitch: Double = 0.0

    func startMotionUpdates() {
        motionManager.deviceMotionUpdateInterval = 0.02
        motionManager.startDeviceMotionUpdates(to: .main) { motion, error in
            guard let motion = motion else { return }
            self.roll = motion.attitude.roll
            self.pitch = motion.attitude.pitch
        }
    }
}

Parallax Effect

UI elements offset based on device tilt angles for immersive depth perception.

Draggable Physics

Spring-based animations with customizable stiffness and damping for natural motion.

Design Principles

• Motion Responsiveness: Smooth reaction to device orientation
• Physics Realism: Spring animations mimic real-world physics
• Visual Depth: Glass effects combined with parallax create 3D perception
• Gesture Integration: Multi-touch support with drag gestures

Skills Demonstrated

• CoreMotion framework integration
• Real-time sensor data handling
• Advanced SwiftUI animations
• Gesture recognizer implementation
• Observable object state management
• Performance optimization for 60fps motion tracking

Technical Challenges Solved

1. Smooth Motion Updates: 50Hz update rate (0.02s interval) for fluid motion
2. Main Thread Safety: Motion updates dispatched to main queue
3. Animation Performance: Optimized rendering for continuous motion
4. Gesture Conflicts: Proper handling of drag vs tap gestures

Use Cases

• Interactive UI/UX portfolios
• Motion-based game interfaces
• Immersive app experiences
• AR/VR preview concepts
• Advanced animation demonstrations

Future Enhancements

• Calibration for different device orientations
• Motion-based game mechanics
• 3D parallax with multiple layers
• Haptic feedback integration
• Recording motion patterns for playback

---

Author: Martynas Prascevicius Contact: mpcode@icloud.com Purpose: Advanced UI demonstration combining motion sensing with modern design