# 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