curvedtext-kmp

Render text along circular arcs — upward or downward — with auto-sizing canvas, full typographic styling, and a drop-in UI component for decorative curved text.

#wasm
#ui
#graphics
#desktop
#compose-ui
#compose-multiplatform
#compose

Suggest an edit

Android JVMJVMKotlin/NativeWasm

GitHub stars0

Authorsdelacrixmorgan

Open issues0

LicenseGNU General Public License v3.0

Creation date13 days ago

Last activity11 days ago

Latest release0.0.2 (11 days ago)

GitHub repository Wiki page

CurvedText - KMP Curved TextView 🌈

A Kotlin Multiplatform Compose library that lets you render text curved along a circular arc — like a rainbow ☀️ or a frown 🙃. Works across Android, iOS, Desktop, and WebAssembly!

✨ Features

🌈 Upward curves — rainbow / smile style
🙃 Downward curves — frown / arc style
🎨 Fully styleable — color, font size, weight, family, letter spacing, decorations
📐 Auto-sizing canvas — the composable sizes itself to fit the text perfectly
🧩 Drop-in Composable — works just like Text()

📱 Platform Support

Platform	Supported
Android	✅
iOS	✅
Desktop (JVM)	✅
WebAssembly	✅

🚀 Installation

Add the dependency to your commonMain source set:

// build.gradle.kts
commonMain.dependencies {
    implementation("com.dontsaybojio:curvedtext:x.x.x")
}

🛠️ Usage

Basic upward curve (rainbow 🌈)

CurvedText(
    text = "Hello Rainbow Text!",
    radius = 200.dp
)

Downward curve (frown 🙃)

CurvedText(
    text = "Curved Downward",
    radius = (-150).dp,
    color = Color.Blue
)

With custom style

CurvedText(
    text = "CURVED HEADLINE",
    radius = 150.dp,
    style = MaterialTheme.typography.headlineSmall.copy(
        fontWeight = FontWeight.Bold,
        color = Color(0xFF6200EE)
    )
)

Mixing individual parameters

CurvedText(
    text = "Stylish Curve ✨",
    radius = 120.dp,
    fontSize = 20.sp,
    fontWeight = FontWeight.SemiBold,
    color = Color(0xFFFF6B35),
    letterSpacing = 2.sp
)

💡 Tip: A larger radius creates a gentler, more subtle curve. A smaller radius creates a tighter, more dramatic arc!

📖 API Reference

`CurvedText`

@Composable
fun CurvedText(
    text: String,
    radius: Dp,
    modifier: Modifier = Modifier,
    style: TextStyle = LocalTextStyle.current,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
)

Parameter	Type	Description
`text`	`String`	The text to display along the curve
`radius`	`Dp`	Curve radius. Positive = upward (smile 😊), Negative = downward (frown 🙁). Larger absolute values = gentler curve
`modifier`	`Modifier`	Standard Compose modifier
`style`	`TextStyle`	Base text style — merged with individual parameters
`color`	`Color`	Text color. Falls back to the color in `style` if unspecified
`fontSize`	`TextUnit`	Font size
`fontStyle`	`FontStyle?`	Italic, normal, etc.
`fontWeight`	`FontWeight?`	Bold, medium, thin, etc.
`fontFamily`	`FontFamily?`	Custom font family
`letterSpacing`	`TextUnit`	Space between characters
`textDecoration`	`TextDecoration?`	Underline, line-through, etc.

🙌 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request on GitHub. Whether it's a bug fix, a new feature idea, or just improving the docs — all help is appreciated! 💪