Silicon reflections and real-time shadows
Silicon's raised surfaces catch changing light as you turn the phone. The blue, pink, and gold reflections travel across the pieces. Each piece casts a soft shadow on the dark board below, making its height visible.
A logo with real-time physics
The pieces of the Leiolai logo can shift and collide before settling back into place. The fine connections between them bend with that movement. Watch a piece settle and you'll see its shadow settle with it.
Liquid Glass in its purest expression
Leiolai elevates Apple Liquid Glass to its purest expression. High-fidelity dynamic backgrounds with carefully curated color palettes accentuate Liquid Glass's refractive capabilities. Leiolai moves the glass in response to motion, creating an immersive feeling of depth, and adds emissive fluid particles within glass components.
Tilt your iPhone to see the elevated glass shift against the scene behind it, which creates a feeling of depth Liquid glass feels like it was born to showcase.
Liquid volume controls that stretch
Press the iPhone's volume rocker to bring up the glass volume controls. System volume has a white fill. Music uses your current rank's color, while Leiolai's voice has its own shifting liquid.
We wanted our volume rocker to feel familiar, yet more exciting than the default volume slider. That required a lot of intentionality in the subtle interactions you wouldn't think about. Like when you reach the top or the bottom of the slider, the tube stretches slightly. We wanted the volume to use real liquid physics and so yes, you can tilt the phone to flip your volume upside down.
An effort selector with liquid and haptics
We designed the effort selector around one continuous gesture. Hold and slide from Fast through Plus and Ultra to Plus Ultra, with the liquid rising to match the selected level.
We matched the haptics to that movement. Holding the selector starts a continuous swell that strengthens as you move up and eases as you move down. A small tick marks each level. Releasing your finger stops the swell and closes the selector around your choice.
A profile picker built around a glass lens
Choosing a profile icon meant choosing a finish too. We put those choices on separate axes: sideways for the icon, up and down for its finish. The clear glass lens brings the two together in the center.
For Orbit, we animated particles around the rings inside the lens and kept the smaller previews still. Haptic ticks mark each change as you browse.
These are the details we want people to notice when they open Leiolai. They're also the work behind our Apple Design Award ambition.