# 90s website

Published articles for 90s website.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## 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

## Welcome you are visitor number 12345

DevFeed: [Welcome you are visitor number 12345](<https://devfeed.tech/articles/welcome-you-are-visitor-number-12345-32085.md>)

Original publisher: [Read original article](<https://www.maiatoday.net/p/welcome-you-are-visitor-number-12345/>)

Published: 2021-07-12T19:44:03Z

Content type: tutorial

Language: en

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

Topics: [ui](<https://devfeed.tech/topics/ui.md>), [Code](<https://devfeed.tech/topics/code.md>), [navigation](<https://devfeed.tech/topics/navigation.md>)

Tags: [90s-website](<https://devfeed.tech/tags/90s-website.md>), [animate](<https://devfeed.tech/tags/animate.md>), [code](<https://devfeed.tech/tags/code.md>), [components](<https://devfeed.tech/tags/components.md>), [compose](<https://devfeed.tech/tags/compose.md>), [coroutine](<https://devfeed.tech/tags/coroutine.md>), [snippet](<https://devfeed.tech/tags/snippet.md>), [state](<https://devfeed.tech/tags/state.md>), [stateflow](<https://devfeed.tech/tags/stateflow.md>), [stateless](<https://devfeed.tech/tags/stateless.md>), [ui](<https://devfeed.tech/tags/ui.md>), [viewmodel](<https://devfeed.tech/tags/viewmodel.md>), [visitor-counter](<https://devfeed.tech/tags/visitor-counter.md>)

### AI overview

A tutorial on building an animated visitor counter in a classic 1990s website style. It explains how to animate each digit independently, manage the counter and counting direction in a view model, keep composable UI components stateless and reusable, and connect the screen through navigation and Hilt.

### Source excerpt

Another step forward in recreating the icon 90s website look is the hit counter, visitor counter or web counter in classic squemorphic odometer style. I was inspired by a recent episode of Code with Italians where they animated a time field. I wanted to change the counter component to animate each number individually to get that odometer look. Before doing this though there was a question of state. I wanted to make a counter that would auto increment in a coroutine. It had to change direction up or down if you tapped it. To do this I decided to store the state and the counting direction in a view model. This allowed me to keep the components as stateless as possible. The components are re-usable because the logic that makes the numbers go up or down is held outside of the composable functions. The recommendation from Google is when you use a view model to hold state, keep it close to the root screen. I made a screen for my visitor counter and added it to my navigation code. Since I already had Hilt enabled in the project it was pretty easy to get hold of the viewmodel. The code snippet in the Navigation looks like this: NavHost(navController, startDestination = "overview") { //... other routes go here composable(route = "counter") { val viewModel: CounterViewModel = hiltViewModel() //<--- get the viewmodel from Hilt val count by viewModel.counter.collectAsState() //<--- the viewmodel exposes the counter as a StateFlow CounterScreen( count = count, onClick = { viewModel.onClick() } // <--- the viewmodel provides a method for when the element is clicked ) } } The CounterScreen is stateless and gets the value of the counter and the event handler as parameters. The CounterScreen has a Counter composable. The role of the Counter composable is to create a row of individual odometer numbers from the passed values. Also it should intercept a click and call the click handler. @Composable fun Counter( onClick: () -> Unit, count: Int, width: Int ) { val displayWidth = maxOf(3,

## Animating Rainbow Text

DevFeed: [Animating Rainbow Text](<https://devfeed.tech/articles/animating-rainbow-text-32036.md>)

Original publisher: [Read original article](<https://www.maiatoday.net/p/animating-rainbow-text/>)

Published: 2021-06-26T22:13:10Z

Content type: tutorial

Language: en

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

Topics: [Compose](<https://devfeed.tech/topics/compose.md>), [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [color](<https://devfeed.tech/topics/color.md>), [Font](<https://devfeed.tech/topics/font.md>), [Website](<https://devfeed.tech/topics/website.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>), [code](<https://devfeed.tech/tags/code.md>), [color](<https://devfeed.tech/tags/color.md>), [compose](<https://devfeed.tech/tags/compose.md>), [jetpack](<https://devfeed.tech/tags/jetpack.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [rainbow](<https://devfeed.tech/tags/rainbow.md>), [recompose](<https://devfeed.tech/tags/recompose.md>), [repo](<https://devfeed.tech/tags/repo.md>), [test](<https://devfeed.tech/tags/test.md>), [typography](<https://devfeed.tech/tags/typography.md>)

### AI overview

A tutorial on building animated rainbow text with Jetpack Compose. It covers custom colors and typography, per-character coloring, continuous transitions, keyframes, and staggered animations, with a test screen and source repository.

### Source excerpt

Do you remember web pages in the nineties? Everything was pulsing, rotating and animating. I am exploring Jetpack Compose animations and I figured if I can reproduce a 90s web page look, I can do anything. Also June is the month of Rainbows. So to kick off this series I am building animating rainbow text. First I need a rainbow. It needs to be flexible enough for me to be able to swap in any rainbow. val RainbowRed = Color(0xFFDA034E) val RainbowOrange = Color(0xFFFF9800) val RainbowYellow = Color(0xFFFFEB3B) val RainbowGreen = Color(0xFF4CAF50) val RainbowBlue = Color(0xFF2196F3) val RainbowIndigo = Color(0xFF3F51B5) val RainbowViolet = Color(0xFF9C27B0) val SkittlesRainbow = listOf( RainbowRed, RainbowOrange, RainbowYellow, RainbowGreen, RainbowBlue, RainbowIndigo, RainbowViolet ) Since web pages in the nineties used Times New Roman and Helvetica, I added a free version of a serif font. I chose Source Serif. I included the ttf files in the project and made a FontFamily and hooked this into the theme. val SourceSerif = FontFamily( Font(R.font.source_serif_pro_regular), Font(R.font.source_serif_pro_bold, FontWeight.Bold), Font(R.font.source_serif_pro_light, FontWeight.Light), Font(R.font.source_serif_pro_black, FontWeight.Black), Font(R.font.source_serif_pro_extra_light, FontWeight.ExtraLight), ) val Typography = Typography(defaultFontFamily = SourceSerif) MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content ) Next I made a composable that would colour each letter of a string. This simple composable took as many text parameters in and then split the string colouring each character to the colour of the rainbow in the parameter. The startColor index is used to pick which colour the first letter will be. @Composable fun MultiColorText( modifier: Modifier = Modifier, text: String, style: TextStyle = LocalTextStyle.current, rainbow: List<Color> = SkittlesRainbow, startColor: Int = 0, ) { Row(modifier) { var index = startColor for (l