Micro Interactions & Motion Design
A showcase of motion experiments and interactive prototypes created across various Sky projects. Each one explores how movement, responsiveness, and feedback can make digital experiences feel smoother, more human, and more connected.
Framer played a key role in this process, allowing me to prototype with precision, share live previews, and collaborate seamlessly with developers.
Sky Protect
In the early concept phase of Sky Protect, stakeholders wanted the discovery section to feel more dynamic and engaging. I explored ways to bring the new product bundles to life using scroll-linked animations, subtle parallax movement, and layered transitions, adding depth and motion without overwhelming the content.
A pin-to-scroll animation, the iPhone minimises from a fullscreen view to a mid-left whilst the text and image within the phone changes
A pin-to-scroll, the image reduces in size from fullscreen and lands into a landscape iPhone. Whilst the user is scrolling the images inside the iPhone change
See Prototype here
Sky Watch
The Sky Watch page sits within Sky’s distinctive blue world, the only part of the brand ecosystem to do so. As part of a wider refresh introducing the new Sky Essential and Sky Ultimate packages, I explored how motion could elevate the experience. This included integrating Lottie animations, hover-based thumbnail scale effects, and the signature Sky shimmer, used sparingly to bring polish and energy to key interactions.
A lottie animated ticker carousel, with a timed loading circle, the other components either have a filled in box or scale upwards by about 2px pixels
See Prototype here
Sky Cinema
To celebrate the upcoming release of Wicked: For Good, stakeholders wanted something fun, unexpected, and never seen before on Sky Cinema. Drawing inspiration from Google’s playful search animations, I explored a lighthearted interaction to mark the occasion. In my prototype, a popcorn bucket icon sits subtly in the corner, once clicked, it shakes and triggers a burst of popcorn across the screen, either in a single explosive moment or through a steady, looping cascade. Each popcorn kernel was designed in SVG format for smooth, scalable animation.
When clicked, the popcorn bucket on the bottom left shakes, and theres a consistent flowing lops of popcorn, until clicked again
See Prototype here
When clicked, the popcorn bucket on the bottom left shakes and there's a brief explosion of popcorn throughout the page
See Prototype here