Sticker Wall – Creating the holo effect in SwiftUI ✨ The holo effect is a linear gradient layer, which changes its offset values depending on the relative pitch position and its rotation depending on the relative roll position of the iPhone. Here are the key takeaways, which I have... never thought about (including why I pause when I move the device in the video) 👇show more

The "sparkle" layer ✨ Probably the most important layer in creating a compelling holo effect with the following details: - changes its opacity value between 0-70% depending on the device relative pitch position - uses Plus Lighter blending mode so it adapts more to its environment - applied directly with the gradient layer, so they act together as a single effect

What is "relative" pitch and "relative" roll and why we need them? 👇 When I started with CMMotionManager I realized that the values were always relative to a flat table position rather than my current hand position. As soon as I start the app I take a snapshot of the initial pitch value of the device, so "relative" pitch is always the value changes relative to this initial pitch value, which always depends on the position in which the app was launched. 🎉 Which lead me to the next challenge of always restarting the app when I changed the way I hold the phone or put it on a table...😂👇

Introducing a position detection timer ⏳ Since the "initial" pitch/roll/yaw positions were always captured when I started the app, it couldn't detect when you put the device down on a table or you changed the way you hold the phone. Solution: - take a snapshot of the current relative pitch value - if the difference between the relative pitch and the snapshot is less then 0.02, so you keep the phone relatively still (keep in mind you cannot keep it still at 0.0, it's a super sensitive sensor), you go ahead and update the initial pitch value This is what you can see in the first video when I keep the phone steady and the entire holo effect resets itself and reorients to the new position. 😍 Which leads us to our final challenge as our phone is using 99% of its CPU and its burning hot at this point...😂👇

In my prototype each sticker is a separate View, so each had its own pitch/roll/yaw values, CMMotionManager and timers, which of course caused the device to overheat with 99% of CPU usage. Solution: - move all motion related code to a separate and single ObservableObject, which can be used consistently in all views - keep track of the timer changes and limit to only run it every 2-5 seconds - use a single timer for all value changes - only trigger all value changes once in a timer cycle, so basically limit the changes and timers as much as possible Now my CPU is much happier at around 45%, which of course is still not production-ready, but at least useable after really simple changes. 🎉

I believe "designing" all these details would have been impossible in @sketch or @figma, but all of these were so crucial and fundamental to how the overall interaction and holo effect is working today ✨ Definitely go and watch this incredible episode about designing with @Apple SwiftUI by @philipcdavis and @dillwanner 👌

Here is a screen recording with even more details ✨ Summary: - Holo effect with additional white sparkle layer - reacting to pitch/roll changes - resetting motion values when the device rests for more than 2 seconds with minimal motion - keeping battery and performance in mind - providing "dev/config" controls in context to tweak values just to feel right Hope you'll find this behind-the-scenes look valuable, and next up we'll focus on combining gestures together alongside with auto z-index based on interactions 💯 Consider following this tweet if you're interested 🙌

I tried to achieve the same effect for my app, but yours is much better 😃💯

Looks amazing! 🤩🔥

😱🤯☠️Awesome work

Thank you so much! 🙌🙌