Apple Intelligence ripple: Step-by-step tutorial
Matt Perry
In this tutorial, we're going to build the Apple Intelligence ripple example step-by-step.
This example is rated expert difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Apple Intelligence ripple tutorial
is exclusive to Motion+
290+ examples & 35+ tutorials
Premium APIs
Visual editor for VS Code
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
Introduction
The Apple Intelligence Ripple example is an experimental attempt at emulating the ripple animation on iOS, triggered by holding down the iPhone side button.
The original effect is a complex distortion achieved with GPU shaders. This replication, however, uses standard web technologies to create a similar feel. It relies on cloning a UI element and animating CSS properties like mix-blend-mode, filter, and mask-image. While it doesn't achieve the same fidelity as the original, the techniques involved are interesting to explore.
This kind of one-off, complex animation is a great use case for Motion's imperative animate function. It's perfect for animations that aren't tied directly to React state and gives us the control to manually trigger and sequence effects within other logic, like (in this case) cloning a DOM element.
