Enhance apps with vibrant, customizable confetti animations using a lightweight library. Features include adjustable speed, direction, colors, shapes, and seamless integration with Compose.
A lightweight Kotlin/Compose Multiplatform library to add vibrant, customizable confetti animations to your apps.
Installation • Quick start • Documentation • Recipes • Sample project
This library is based on the incredible work of @DanielMartinus on his Android Konfetti library and has been adapted for Kotlin Multiplatform and Compose Multiplatform.
dependencies {
implementation("io.github.vinceglb:confettikit:0.8.0")
}
ConfettiKit requires Kotlin 2.1.0 or higher.
The simplest way to get the party started is:
ConfettiKit(
modifier = Modifier.fillMaxSize(),
parties = listOf(
Party(emitter = Emitter(duration = 5.seconds).perSecond(30))
)
)
That's it! You've got confetti! 🎊
A Party configuration object controls every aspect of your confetti animation. While you only need an Emitter to get started, understanding each property helps you create exactly the effect you want.
Party(
angle = 90, // Straight up
spread = 45, // 45-degree spread
)
The direction and spread of your confetti is controlled by several properties:
angle
Angle.TOP, Angle.RIGHT, Angle.BOTTOM, Angle.LEFTspread
Spread.SMALL, Spread.WIDE and Spread.ROUNDParty(
speed = 20f, // Base speed
maxSpeed = 30f, // Maximum speed
damping = 0.95f // Speed decay
)
Control how fast your confetti moves and how it slows down:
speed
maxSpeed
speed and maxSpeeddamping
Party(
colors = listOf(0xfce18a, 0xff726d, 0xf4306d),
shapes = listOf(Shape.Square, Shape.Circle),
size = listOf(Size.SMALL, Size.MEDIUM)
)
Customize how your confetti looks:
colors
shapes
Shape.Circle, Shape.Square, and sizes
Size.SMALL, Size.MEDIUM and Size.LARGEParty(
timeToLive = 3000, // 3 seconds lifetime
fadeOutEnabled = true, // Fade out at end
delay = 500, // Start after 500ms
position = Position.Relative(0.5, 0.5),
rotation = Rotation.enabled()
)
Control the timing and behavior of your confetti:
timeToLive
fadeOutEnabled
delay
position
rotation
Rotation.enabled() to enable rotationRotation.disabled() to disable rotationThe Emitter controls how many pieces of confetti are created and how often:
// Burst of 100 pieces over 100ms
Emitter(duration = 100, TimeUnit.MILLISECONDS).max(100)
// Continuous stream of 30 pieces per second for 5 seconds
Emitter(duration = 5, TimeUnit.SECONDS).perSecond(30)
ConfettiKit is designed to work seamlessly with Compose. You can use it as a Composable function in your UI:
ConfettiKit(
modifier = Modifier.fillMaxSize(),
parties = parties,
onParticleSystemStarted = { system, activeSystems ->
// Called when a party animation starts
},
onParticleSystemEnded = { system, activeSystems ->
// Called when a party animation ends
}
)
onParticleSystemStarted
PartySystem that started and the count of currently active systemsonParticleSystemEnded
PartySystem that ended and the count of remaining active systemsCreate a burst of confetti that explodes from a single point:
fun explode(): List<Party> {
return listOf(
Party(
speed = 0f,
maxSpeed = 30f,
damping = 0.9f,
spread = 360,
colors = listOf(0xfce18a, 0xff726d, 0xf4306d, 0xb48def),
emitter = Emitter(duration = 100.milliseconds).max(100),
)
)
}
Create a parade of confetti that moves from one side of the screen to the other:
fun parade(): List<Party> {
val party = Party(
speed = ,
maxSpeed = ,
damping = ,
angle = Angle.RIGHT - ,
spread = Spread.SMALL,
colors = listOf(, , , ),
emitter = Emitter(duration = seconds).perSecond(),
position = Position.Relative(, )
)
listOf(
party,
party.copy(
angle = party.angle - ,
position = Position.Relative(, )
),
)
}
Create a gentle rain of confetti that falls from the top of the screen:
fun rain(): List<Party> {
return listOf(
Party(
speed = 0f,
maxSpeed = 15f,
damping = 0.9f,
angle = Angle.BOTTOM,
spread = Spread.ROUND,
colors = listOf(0xfce18a, 0xff726d, 0xf4306d, ),
emitter = Emitter(duration = .seconds).perSecond(),
position = Position.Relative(, ).between(Position.Relative(, ))
)
)
}
Create confetti with custom shapes, images, or vectors:
fun customShapes(): List<Party> {
return listOf(
Party(
speed = 15f,
maxSpeed = ,
damping = ,
spread = ,
colors = listOf(, , , ),
shapes = listOf(
Shape.CustomShape(RoundedCornerShape(dp)),
Shape.CustomShape(CircleShape),
Shape.Image(imageBitmap),
Shape.Vector(vectorPainter)
),
emitter = Emitter(duration = seconds).perSecond(),
)
)
}
Check out the sample project for a complete example of how to use ConfettiKit in your app.
Made with ❤️ by Vince
Shape.Rectangle(heightRatio)Shape.CustomShape(shape) for any Compose shapeShape.Image(imageBitmap) for bitmap images as confettiShape.Vector(vectorPainter) for vector graphics as confettiSurfaced from shared tags and platforms — no rankings paid for.