GitHub - ArjunJadeja/texty: A Compose Multiplatform Library to display text with various styles, effects and animations

🎨 Create stunning and beautifully styled composable texts across platforms ✨

📚 Table of Contents

💡 About
📣 Mentions
🎭 Styles Overview
🛠️ Installation
🚀 How to Use
📦 Samples
❤️ Support
🤝 Contribution
🔗 Connect
🙏 Credits
📄 License

💡 About

Texty is built on top of Jetpack Compose Foundation's Basic Text. It is a highly configurable Compose Multiplatform library that allows you to display text in various styles and has utility functions like loading and time keeping. Whether you're building an Android, iOS, desktop, or web application, it provides a unified API to create dynamic and visually appealing text displays.

📣 Mentions

🎭 Styles Overview

Texty offers a variety of styles to create dynamic and engaging text displays. Here's a quick overview of the available styles:

Normal Styles

List Styles

Motion | OneByOne | Sliding List | Scrolling List

Utility Styles

Loading | Time Keeping

Normal Styles

1. Sliding

A fluid display style where text gracefully slides in a chosen direction, creating a smooth, continuous flow that adds motion and elegance to your content.

Default Implementation: Texty(text = text, displayStyle = DisplayStyle.Sliding())

Configuration: DisplayStyle.Sliding(direction: SlidingDirection, duration: Long, repeat: Repeat, onComplete: () -> Unit)

SlidingSample.mov

@Composable
fun Message(message: String) {
    Texty(
        text = message,
        displayStyle = DisplayStyle.Sliding(
            direction = SlidingDirection.TOWARDS_START,
            duration = 12_000L,
            repeat = Repeat.Continuous
        )
    )
}

2. Scrolling

A dynamic style where text flows smoothly in a selected direction - top or bottom. With adjustable duration and repeat options, it captivates and engages viewers effortlessly.

Default Implementation: Texty(text = text, displayStyle = DisplayStyle.Scrolling())

Configuration: DisplayStyle.Scrolling(direction: SlidingDirection, duration: Long, repeat: Repeat, onComplete: () -> Unit)

ScrollingSample.mov

@Composable
fun EndCredits(credits: String) {
    var showMovieName by remember { mutableStateOf(false) }
    if (showMovieName) Texty(text = "The Quantum Paradox")
    else {
        Texty(
            text = credits,
            displayStyle = DisplayStyle.Scrolling(
                direction = ScrollingDirection.TOWARDS_TOP,
                duration = 30_000L,
                repeat = Repeat.Once,
                onComplete = { showMovieName = true }
            )
        )
    }
}

3. Blinking

A dynamic style that makes text blink with versatile options: blink once, infinitely, for a set time, or a specified count. The blink delay is customizable for added flexibility.

Default Implementation: Texty(text = text, displayStyle = DisplayStyle.Blinking())

Configuration: DisplayStyle.Blinking(interval: Long, repeat: Repeat, onBlink: () -> Unit)

BlinkingSample.mov

@Composable
fun Offer(message: String) {
    var currentColor by remember { mutableStateOf(color1) }
    Texty(
        text = message,
        displayStyle = DisplayStyle.Blinking(
            interval = interval,
            repeat = Repeat.Continuous,
            onBlink = { currentColor = if (currentColor == color1) color2 else color1 }
        )
    )
}

4. Fading

A smooth transition style where text fades in and out. Configurable options include fade duration and fade type, with a callback when the fade completes, allowing for seamless integration into various animations.

Default Implementation: Texty(text = text, displayStyle = DisplayStyle.Fading(type = FadingType.IN))

Configuration: DisplayStyle.Fading(type: FadingType, duration: Long, onComplete: () -> Unit)

FadingSample.mov

@Composable
fun ShowQuote(
    quote: Quote,
    isFadingIn: Boolean,
    onFadeComplete: () -> Unit
) {
    Texty(
        text = quote.text,
        displayStyle = DisplayStyle.Fading(
            type = if (isFadingIn) FadingType.IN else FadingType.OUT,
            duration = 2000L,
            onComplete = onFadeComplete
        )
    )
}

5. Revealing

An engaging style where text is revealed character by character or by total time. Offers configurable options for reveal patterns, delays, and cover text, with a callback when the animation completes. Perfect for adding suspense or a gradual reveal effect.

Default Implementation: Texty(text = text, displayStyle = DisplayStyle.Revealing())

Configuration: DisplayStyle.Revealing(cover: RevealingCover, pattern: RevealingPattern, type: RevealingType, delayBeforeRevealing: Long, onComplete: () -> Unit)

RevealingSample.mov

@Composable
fun ShowWord(wordOfTheDay: String) {
    Texty(
        text = wordOfTheDay,
        displayStyle = DisplayStyle.Revealing(
            delayBeforeRevealing = 500L,
            pattern = RevealingPattern.CENTER_TO_SIDES,
            type = RevealingType.ByEachCharacter(delayInMillis = 200L)
        )
    )
}

6. StickAndReveal

A captivating style where a cover sticks to the surface before being revealed, simulating a realistic poster or banner effect. With adjustable delays and directions, it adds drama and depth to your animations.

Default Implementation: Texty(text = content, displayStyle = DisplayStyle.StickAndReveal())

Configuration: DisplayStyle.StickAndReveal(cover: String?, coverStickingDirection: TransitionDirection, coverStickingDelay: Long, delayBeforeReveal: Long, revealingDirection: TransitionDirection, revealingDelay: Long, onComplete: () -> Unit)

StickAndRevealSample.mov

@Composable
fun ShowPoster(content: String, cover: String) {
    Texty(
        text = content,
        displayStyle = DisplayStyle.StickAndReveal(
            cover = cover,
            coverStickingDirection = TransitionDirection.TOP_TO_BOTTOM,
            coverStickingDelay = 80L,
            delayBeforeReveal = 1000L,
            revealingDirection = TransitionDirection.BOTTOM_TO_TOP,
            revealingDelay = 70L
        )
    )
}

7. Typing

A typewriter-inspired style that mimics the appearance of text being typed. Ideal for creating a dynamic, real-time effect.

Default Implementation: Texty(text = text, displayStyle = DisplayStyle.Typing())

Configuration: DisplayStyle.Typing(typingDelayPerChar: Long, onTextDisplayed: () -> Unit)

TypingSample.mov

@Composable
fun ChatBubble(message: String) {
    Texty(
        text = message,
        displayStyle = DisplayStyle.Typing(typingDelayPerChar = 50L)
    )
}

8. Basic

The classic one without any effects that focuses on readability with simple, unadorned typography. Ideal for clear and straightforward text presentation.

Default Implementation: Texty(text = text)

Configuration: DisplayStyle.Basic(onTextDisplayed: () -> Unit)

BasicSample.mov

@Composable
fun NeonSign(signText: String) {
    Texty(
        text = signText,
        displayStyle = DisplayStyle.Basic()
    )
}

List Styles

1. Motion

A dynamic style that animates text or frames sequentially, creating a smooth flow. With customizable display delay and flexible repeat options, it delivers continuous motion, perfect for animations or creating a cinematic feel.

Default Implementation: Texty(textList = frames, displayStyle = ListDisplayStyle.Motion())

Configuration: ListDisplayStyle.Motion(delayBeforeNext: Long, repeat: Repeat, onComplete: () -> Unit)

MotionSample.mov

@Composable
fun PikachuAnimation(pikachuFrames: List<String>) {
    Texty(
        textList = pikachuFrames,
        displayStyle = ListDisplayStyle.Motion(
            delayBeforeNext = 80L,
            repeat = Repeat.Continuous
        )
    )
}

2. OneByOne

A fluid, sequential text display where each word or character gracefully appears with customizable effects—Basic, Fading, or Typing.

Default Implementation: Texty(textList = textList, displayStyle = ListDisplayStyle.OneByOne())

Configuration: ListDisplayStyle.OneByOne(transitionStyle: TransitionStyle, displayDuration: Long, transitionInDuration: Long, transitionOutDuration: Long, repeat: Repeat, onComplete: () -> Unit)

OneByOneSample.mov

@Composable
fun NewsHeadlines(headlines: List<String>) {
    Texty(
        textList = headlines,
        displayStyle = ListDisplayStyle.OneByOne(
            transitionStyle = TransitionStyle.TYPING,
            displayDuration = 2000L,
            transitionInDuration = 2000L,
            transitionOutDuration = 2000L,
            repeat = Repeat.Continuous
        )
    )
}

3. Sliding List

Same like Sliding but here you can pass list of strings and can add separator for displaying the items in the list.

Default Implementation: Texty(textList = textList, displayStyle = ListDisplayStyle.SlidingList())

Configuration: ListDisplayStyle.SlidingList(separator: String?, direction: SlidingDirection, duration: Long, repeat: Repeat, onComplete: () -> Unit)

SlidingListSample.mov

@Composable
fun PresentStudents(students: List<String>) {
    Texty(
        textList = students,
        displayStyle = ListDisplayStyle.SlidingList(
            separator = " <-> ",
            direction = SlidingDirection.TOWARDS_START,
            duration = 15000L,
            repeat = Repeat.Continuous
        )
    )
}

4. Scrolling List

Same like normal Scrolling but here you can pass list of strings.

Default Implementation: Texty(textList = frames, displayStyle = ListDisplayStyle.ScrollingList())

Configuration: ListDisplayStyle.ScrollingList(spacing: Dp, direction: ScrollingDirection, duration: Long, repeat: Repeat, onComplete: () -> Unit)

ScrollingListSample.mov

@Composable
fun ScrollingCredits(credits: List<String>) {
    Texty(
        textList = credits,
        displayStyle = ListDisplayStyle.ScrollingList(
            spacing = 16.dp,
            direction = ScrollingDirection.TOWARDS_TOP,
            duration = 30000L,
            repeat = Repeat.Once
        )
    )
}

Utility Styles

1. Loading

A versatile style offering various loading animations, including spinner, circular, box, and music bars. Each type features customizable cycle duration, with the music bar option allowing for adjustable bar count.

Default Implementation: Texty(utility = Utility.Loading())

Configuration: Utility.Loading(type: LoadingType)

LoadingSample.mov

@Composable
fun ShowLoading() {
    Texty(
        utility = Utility.Loading(
            type = LoadingType.Spinner(cycleDurationInMillis = 500)
        )
    )
    Texty(
        utility = Utility.Loading(
            type = LoadingType.Circular(cycleDurationInMillis = 500)
        )
    )
    Texty(
        utility = Utility.Loading(
            type = LoadingType.MusicBar(barCount = 3)
        )
    )
}

2. Time Keeping

A utility style that displays time in a customizable format, with options for live updates and an adjustable update interval. Perfect for real-time time tracking.

Default Implementation: Texty(utility = Utility.TimeKeeping())

Configuration: Utility.TimeKeeping(format: String, liveUpdate: Boolean, updateInterval: kotlin.time.Duration)

TimeKeepingSample.mov

@Composable
fun ShowTimeKeeping() {
    Texty(
        utility = Utility.TimeKeeping(
            format = "yyyy-MM-dd HH:mm:ss",
            liveUpdate = true
        )
    )
    Texty(
        utility = Utility.TimeKeeping(
            format = "HH:mm:ss",
            liveUpdate = true,
            updateInterval = 1.seconds
        )
    )
}

🛠️ Installation

To use Texty in your project, add the following dependency to your module's build.gradle.kts file:

For Android projects:

dependencies {
    implementation("com.arjunjadeja:texty-android:1.0.0-alpha")
}

For Kotlin Multiplatform projects:

kotlin {
    sourceSets {
        commonMain {
            dependencies {
                implementation("com.arjunjadeja:texty:1.0.0-alpha")
            }
        }
    }
}

Make sure you have mavenCentral() in your list of repositories.

For setting up the project locally:

If you want to set up the Texty project in your local development environment, please refer to the Project Setup Guide.

🚀 How to Use

Texty offers three main ways to create styled text:

Normal Text Display:

import com.arjunjadeja.texty.Texty
import com.arjunjadeja.texty.DisplayStyle

@Composable
fun TextyExample() {
    Texty(
        text = "Hello, Texty!",
        displayStyle = DisplayStyle.Typing()
    )
}

List of Texts Display:

import com.arjunjadeja.texty.Texty
import com.arjunjadeja.texty.ListDisplayStyle

@Composable
fun TextyListExample() {
    Texty(
        textList = listOf("First", "Second", "Third"),
        displayStyle = ListDisplayStyle.OneByOne()
    )
}

Utility Display:

import com.arjunjadeja.texty.Texty
import com.arjunjadeja.texty.Utility

@Composable
fun TextyUtilityExample() {
    Texty(
        utility = Utility.Loading()
    )
}

Choose the appropriate Texty function based on your needs. Each function offers various display styles and customization options to create engaging text effects.

📦 Samples

Check out Releases to download the latest android sample APK (3 MB) and macOS dmg file.
Check the sample module for multiple variations and sample implementations of each style.

❤️ Support

If you find Texty useful or interesting, consider supporting the project:

⭐ Star the repository to show your appreciation.
👀 Watch the repository to get notified on future updates.
👤 Follow me ArjunJadeja for updates and new projects.

Your support helps make Texty better!

🤝 Contribution

You can get involved by:

Trying out the library and sharing feedback
Suggesting improvements or reporting issues
Contributing code or documentation
Assisting with testing and bug fixes

Check Roadmap and Contribution Guidelines for more info. All contributions are welcomed and appreciated.

🔗 Connect

Feel free to connect with me for discussing open-source, projects, or anything tech! 😊

Arjun Jadeja - LinkedIn

🙏 Credits

Amit Shekhar for guidance and support 😇
How to write a Compose Multiplatform Library
Compose Multiplatform Wizard for easy setup from terrakok
Publishing KMP Library to Maven central
Darshana Jadeja for helping out with designs 🤗

📄 License

Copyright (C) 2024 Arjun Jadeja (arjunjadeja.com)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Name		Name	Last commit message	Last commit date
Latest commit History 47 Commits
assets		assets
gradle		gradle
sample		sample
texty		texty
.gitignore		.gitignore
Guidelines.md		Guidelines.md
LICENSE		LICENSE
README.md		README.md
Roadmap.md		Roadmap.md
SetUpGuide.md		SetUpGuide.md
build.gradle.kts		build.gradle.kts
gradle.properties		gradle.properties
gradlew		gradlew
gradlew.bat		gradlew.bat
settings.gradle.kts		settings.gradle.kts

License

ArjunJadeja/texty

Folders and files

Latest commit

History

Repository files navigation

📚 Table of Contents

💡 About

📣 Mentions

🎭 Styles Overview

Normal Styles

List Styles

Utility Styles

Normal Styles

1. Sliding

2. Scrolling

3. Blinking

4. Fading

5. Revealing

6. StickAndReveal

7. Typing

8. Basic

List Styles

1. Motion

2. OneByOne

3. Sliding List

4. Scrolling List

Utility Styles

1. Loading

2. Time Keeping

🛠️ Installation

For Android projects:

For Kotlin Multiplatform projects:

For setting up the project locally:

🚀 How to Use

📦 Samples

❤️ Support

🤝 Contribution

🔗 Connect

🙏 Credits

📄 License

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Packages