# Spline +: SwiftUI: Building a Device Tilt-Controlled 3D Portal Experience 📱 Source: https://www.youtube.com/watch?v=-LQUQsFJjDk Recap page: https://rapidrecap.app/video/-LQUQsFJjDk Generated: 2025-12-08T16:34:43.005+00:00 --- ## Quick Overview The video successfully demonstrates how to build an interactive 3D portal scene using Spline, integrating it into a SwiftUI application to achieve gyroscope-controlled device tilt responsiveness via the Spline Code API and Apple's Core Motion framework. **Key Points:** - The final result is an interactive 3D scene where the rendered portal rotates smoothly based on the device's physical tilt (gyroscope data). - The 3D scene was created in Spline, featuring a card-like structure containing a swirling 'S' shape within a box environment, utilizing glass and rainbow materials for depth and visual appeal. - Integration into SwiftUI requires adding the 'SplineRuntime' package dependency to the Xcode project. - In the SwiftUI code, a custom 'MotionManager' class utilizing Core Motion starts collecting accelerometer data at 100 FPS and maps the Y-axis acceleration to rotation angles between -90 and 90 degrees. - Exponential smoothing (0.15 smooth, 0.3 responsive) is applied to the calculated rotation values to ensure buttery-smooth visual feedback. - The scene object named 'Subject' in Spline is targeted in the SwiftUI code to receive the smoothed rotation values, linking device motion to the 3D object's rotation. ![Screenshot at 00:08: The Xcode code highlights the initialization of the MotionManager class, which is set up as an ObservableObject to handle Core Motion updates and publish accelerometer data for SwiftUI consumption.](https://ss.rapidrecap.app/screens/-LQUQsFJjDk/00-00-08.png) **Context:** This tutorial guides developers through creating an immersive 3D experience in an iOS application using the Spline Code API for seamless integration of Spline scenes into SwiftUI. The core concept involves using device motion data, specifically from the accelerometer/gyroscope via Apple's Core Motion framework, to dynamically control the rotation of a 3D object within the scene, creating a gyroscope-controlled 'portal' effect. ## Detailed Analysis The tutorial details the process of creating an interactive 3D portal experience in SwiftUI controlled by device tilt. First, the 3D scene is designed in Spline, involving creating a card shape, extruding it, and applying materials like glass and rainbow patterns to the inner swirling element to achieve depth and visual interest (00:16-01:12). A crucial step involves exporting the Spline scene for iOS and adding the 'SplineRuntime' package dependency to the Xcode project (08:47-09:54). In the SwiftUI code, a custom 'MotionManager' class is implemented using Core Motion to access device accelerometer data (10:26). This manager starts collecting data at 100 FPS (00:52). The raw accelerometer data is then mapped to target rotation angles for the X and Y axes, with specific logic to map the Y-axis acceleration (v) between -0.5 and 1.0 to rotation angles between 90 and -90 degrees, respectively (12:13-12:24). Exponential smoothing (0.15 smooth, 0.3 responsive) is applied to these target rotations to prevent jerky movement (12:44). Finally, these smoothed rotation values are used to update the rotation property of the 3D object named 'Subject' within the Spline scene, resulting in a fluid, gyroscope-responsive 3D portal view on the mobile device (12:57-13:10). ### Spline Scene Construction - Creating a card shape with 40 corner radius and 800 extrusion (01:26-01:50) - Duplicating the card object and naming it 'Box' to serve as the background container (01:43-01:46) - Applying a glass material with zero blur to the box to make the background transparent (03:27-03:34) - Applying a cross pattern material to the box walls for a grid effect (05:27-05:55) - Creating the main 'Path' shape (the S-curve) using the path tool and setting its dimensions (02:05-02:20) - Applying a rainbow material with a linear blend and 20% opacity to the path object (03:52-04:11) - Applying a 'Mask' material blend mode and adjusting the linear gradient ramp colors to create the final purple/blue gradient look on the path (04:34-04:44) ### SwiftUI Integration and Motion Handling - Adding the 'SplineRuntime' package dependency to the Xcode project (09:41-09:54) - Implementing a 'MotionManager' class using Core Motion to access accelerometer data (10:37-10:51) - Mapping raw accelerometer Y-axis data to target rotation values between -90 and 90 degrees (12:13-12:24) - Applying exponential smoothing (0.15 smooth, 0.3 responsive) to rotation values to ensure smooth response (12:42-12:48) - Updating the 3D object named 'Subject' rotation properties using the smoothed rotation values (12:57-13:00) ### Final Result Demonstration - The resulting application shows the 3D portal responding in real-time to device tilt on both the simulator and an actual iPhone device (11:09-11:17, 13:03-13:17) ![Screenshot at 00:01: The initial view showing the 'Portal' title and the S-shaped 3D object displayed on a phone screen overlay against a dynamic blue background.](https://ss.rapidrecap.app/screens/-LQUQsFJjDk/00-00-01.png) ![Screenshot at 00:08: The Xcode IDE displaying the MotionManager class implementation, which imports CoreMotion and sets up accelerometer data updates at 100 FPS.](https://ss.rapidrecap.app/screens/-LQUQsFJjDk/00-00-08.png) ![Screenshot at 01:15: The Spline editor interface showing the creation of the S-shaped path object used for the main 3D element inside the portal.](https://ss.rapidrecap.app/screens/-LQUQsFJjDk/00-01-15.png) ![Screenshot at 03:51: The material settings panel in Spline, showing the application of a 'Glass' material layer to the background box object, resulting in partial transparency.](https://ss.rapidrecap.app/screens/-LQUQsFJjDk/00-03-51.png) ![Screenshot at 12:18: A close-up view of the SwiftUI code showing the logic that maps the device's Y-axis accelerometer data to target rotation angles between -60 and 60 degrees.](https://ss.rapidrecap.app/screens/-LQUQsFJjDk/00-12-18.png)