Animated Pixie Dust Cursor and more

Pixie Dust cursor

Another installment of the 90s web aesthetic experiments. In the 9Os animated cursors were all the rage. On a mobile device of course we don’t have the concept of a cursor. There are gestures that can be detected: touches and drags. So for this project I split up the following pieces to code:

The benefits of this approach are the animating composables can be reused as progress indicators or other elements that appear or disappear to reward customers on their actions.

1. Detect gestures and draw a composable lambda on screen based on the gestures — CursorVisible
2. Build a few animating composables: Pulsing Heart and spinning lifesaver
3. Build a screen where I can switch the different animating composables in the CursorVisible composable
4. Build pixie dust animation by repurposing my confetti code

First of all I needed a composable which would take a content and could allow me to drag another composable around. Here's the code for this. It makes the content visible and invisible on a tap and lets you drag the content.

CursorVisible composable

This CursorVisible can have content of anything. So I made a lifesaver sweet/candy that changes colour and a pulsing red and magenta heart.

The lifesaver is just circles and arcs drawn on the canvas and then some parameters such as angle and colour animated.

Drawing the lifesaver

There is a rainbowState that loops through a list of colours by using keyframes.

rainbowState

The pulsing heart is a heart shape which uses a looping animation that adjust the colour and the scale to get the pulsing effect.

The heart shape:

Heart Shape

The shaped used in the heart:

And the animated pulsing heart:

HeartPulse

Last but not least the fairy/pixie dust. For this one I made a GlitterBox which would be the container for the glitter flecks. The state of the glitter and the glitter fleck code is a particle system similar to what I used in the confetti modifier. You can see that in action in the Github repo or read the description in an older blog post.

Putting it all together I have a simple outside box with a little magenta cursor box that can be dragged around on the screen. The position of the magenta box is fed into the particle system on the onDrag calls and the glitter flecks are generated.

Here’s the glitter box:

GlitterBox

And there you have it three 90s retro animated cursor inspired animations in Jetpack Compose. Read the whole project in this git repo.

Originally published at https://www.maiatoday.net on May 24, 2022.