Split Text: Scatter

Introduction

The Split Text: Scatter example shows how to create a dynamic text animation where individual characters scatter away from the pointer based on its movement speed and direction. This uses three Motion APIs: the splitText function from Motion+ to break text into individual characters, the hover function to detect when the pointer moves over each character, and the animate function to create smooth spring animations.

The splitText function automatically splits text into characters or words, making it easy to animate each piece independently. Combined with Motion's gesture detection and animation functions, we can create sophisticated interactive effects with minimal code.