# Retro Cursor-Inspired Animations in Jetpack Compose

DevFeed: [Retro Cursor-Inspired Animations in Jetpack Compose](<https://devfeed.tech/articles/animated-pixie-dust-cursor-and-more-32035.md>)

Original publisher: [Read original article](<https://www.maiatoday.net/p/animated-pixie-dust-cursor-and-more/>)

Published: 2022-05-24T20:11:19Z

Content type: tutorial

Language: en

Sources: [maiatoday](<https://devfeed.tech/sources/maiatoday.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [Code](<https://devfeed.tech/topics/code.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>)

Tags: [90s-website](<https://devfeed.tech/tags/90s-website.md>), [animate](<https://devfeed.tech/tags/animate.md>), [animation](<https://devfeed.tech/tags/animation.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [code](<https://devfeed.tech/tags/code.md>), [compose](<https://devfeed.tech/tags/compose.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [mobile](<https://devfeed.tech/tags/mobile.md>)

## AI overview

A tutorial describing Jetpack Compose implementations of retro cursor-inspired mobile animations. It covers gesture-controlled draggable content, an animated lifesaver candy, a pulsing heart, and a pixie-dust particle effect.

## Source excerpt

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. Detect gestures and draw a composable lambda on screen based on the gestures - CursorVisible Build a few animating composables An animating lifesaver candy /Sweet A pulsing pink and red heart Build a screen where I can switch the different animating composables in the CursorVisible composable Build pixie dust animation by repurposing my confitti code First of all I needed a Composeable 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. @Composable fun CursorVisible(content: @Composable () -> Unit) { val boxSize = 100.dp val boxPx = with(LocalDensity.current) { boxSize.toPx() } var offset by remember { mutableStateOf(Offset(0f, 0f)) } var visible by remember { mutableStateOf(false) } Box(modifier = Modifier .fillMaxSize() .pointerInput(Unit) { detectTapGestures { offset = it - Offset(boxPx/2, boxPx/2) visible = !visible } } ) { if (visible) { Box( Modifier .offset { offset.round() } .size(boxSize) .pointerInput(Unit) { detectDragGestures { change, dragAmount -> change.consumeAllChanges() offset += dragAmount } } ) { content() } } } } 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. @Composable fun LifeSaver(rainbow: List<Color> = SkittlesRainbow) { val color by