Build Animated Christmas Paywall in Compose

Overview

0:03:00

Welcome to this codelab on building an animated Christmas paywall for your holiday sales campaign.

In this codelab, you will learn how to create a stunning, festive paywall screen using Jetpack Compose. The paywall includes a realistic snowfall particle system with different snowflake types, floating Christmas ornaments with glow effects, an animated Christmas lights string, a bouncing gift box animation, a glowing border card for premium features, and swinging candy cane decorations.

By the end of this codelab, you'll have a beautiful, eye-catching paywall that will help boost your holiday conversions.

Prerequisites

Before starting this codelab, you should have basic knowledge of Kotlin and Jetpack Compose. You'll need Android Studio or IntelliJ IDEA with Compose support installed. Familiarity with Compose animations will be helpful but not required, as we'll explain each animation technique in detail.

What you'll build

A complete Christmas-themed paywall screen with multiple animated elements that work together to create a festive, premium feel that encourages users to subscribe during the holiday season.

Project Setup

0:05:00

Let's start by setting up the basic structure for our Christmas paywall. First, create a new Kotlin file called ChristmasPaywallScreen.kt.

Required Imports

Add all the necessary imports for animations, Canvas drawing, and Compose UI components:

kotlin

import androidx.compose.animation.core.*
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.draw.scale
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.*
import androidx.compose.ui.graphics.drawscope.*
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlin.math.*
import kotlin.random.Random

Define Data Classes

We'll need data classes to represent our snowflakes. Each snowflake has position, velocity, size, and rotation properties:

kotlin

data class Snowflake(
  var x: Float,
  var y: Float,
  var vx: Float,
  var vy: Float,
  var size: Float,
  var alpha: Float,
  var rotation: Float,
  var rotationSpeed: Float,
  var type: SnowflakeType,
)

enum class SnowflakeType {
  SMALL,
  MEDIUM,
  LARGE,
  SPARKLE,
}

The SnowflakeType enum allows us to create visual variety in our snowfall, with different sizes and a special sparkle effect.

Snowfall Particle System

0:10:00

The snowfall system is the heart of our Christmas atmosphere. We'll create a particle system that manages spawning, updating, and drawing snowflakes. A particle system works by maintaining a collection of particles (snowflakes), continuously updating their positions each frame, and removing them when they leave the screen.

SnowfallSystem Class

This class handles the lifecycle of all snowflakes. Let's break down how it works:

kotlin

class SnowfallSystem {
  private val snowflakes = mutableListOf<Snowflake>()
  private val random = Random
  private val maxSnowflakes = 100

  fun update(width: Float, height: Float, deltaTime: Float) {
    // Spawn new snowflakes
    if (snowflakes.size < maxSnowflakes && random.nextFloat() < 0.3f) {
      spawnSnowflake(width)
    }

    // Update existing snowflakes
    val iterator = snowflakes.iterator()
    while (iterator.hasNext()) {
      val snowflake = iterator.next()

      // Apply wind sway using sine wave
      snowflake.vx = sin(snowflake.y * 0.01f + snowflake.x * 0.005f) * 30f
      snowflake.x += snowflake.vx * deltaTime
      snowflake.y += snowflake.vy * deltaTime
      snowflake.rotation += snowflake.rotationSpeed * deltaTime

      // Remove if out of bounds
      if (snowflake.y > height + 20f ||
          snowflake.x < -20f ||
          snowflake.x > width + 20f) {
        iterator.remove()
      }
    }
  }
}

Step 1: Define the data structure. The snowflakes list stores all active snowflakes. We limit the maximum count to 100 to maintain good performance.

Step 2: Spawn new snowflakes. On each update, we check if we have room for more snowflakes. The condition random.nextFloat() < 0.3f means there's a 30% chance of spawning a new snowflake each frame, creating a natural, gradual snowfall effect rather than all snowflakes appearing at once.

Step 3: Apply wind sway. The line snowflake.vx = sin(snowflake.y * 0.01f + snowflake.x * 0.005f) * 30f creates a gentle swaying motion. The sine function produces values between -1 and 1, which we multiply by 30 to get horizontal movement. Using both y and x positions as input creates varied, non-uniform swaying patterns.

Step 4: Update positions. We multiply velocity by deltaTime to ensure frame-rate independent movement. This means the snowfall looks the same whether the device runs at 30fps or 120fps.

Step 5: Remove off-screen snowflakes. When a snowflake moves beyond the screen boundaries (with a 20-pixel buffer), we remove it from the list to free up memory and allow new snowflakes to spawn.

Spawning Snowflakes

Each snowflake is spawned with random properties based on its type. This creates visual variety in our snowfall:

kotlin

private fun spawnSnowflake(width: Float) {
  val type = when {
    random.nextFloat() < 0.1f -> SnowflakeType.SPARKLE
    random.nextFloat() < 0.3f -> SnowflakeType.LARGE
    random.nextFloat() < 0.6f -> SnowflakeType.MEDIUM
    else -> SnowflakeType.SMALL
  }

  val size = when (type) {
    SnowflakeType.SMALL -> random.nextFloat() * 3f + 2f
    SnowflakeType.MEDIUM -> random.nextFloat() * 5f + 4f
    SnowflakeType.LARGE -> random.nextFloat() * 8f + 6f
    SnowflakeType.SPARKLE -> random.nextFloat() * 6f + 4f
  }

  snowflakes.add(
    Snowflake(
      x = random.nextFloat() * width,
      y = -20f,
      vx = 0f,
      vy = random.nextFloat() * 80f + 40f,
      size = size,
      alpha = random.nextFloat() * 0.5f + 0.5f,
      rotation = random.nextFloat() * 360f,
      rotationSpeed = random.nextFloat() * 100f - 50f,
      type = type,
    ),
  )
}

Drawing Snowflake Crystals

The magic happens in the draw function. We draw 6-armed snowflake crystals with branches:

kotlin

private fun drawSnowflakeCrystal(
  drawScope: DrawScope,
  snowflake: Snowflake
) {
  val arms = 6
  val armLength = snowflake.size

  for (i in 0 until arms) {
    val angle = (i * 60f + snowflake.rotation) * PI.toFloat() / 180f
    val endX = cos(angle) * armLength
    val endY = sin(angle) * armLength

    // Draw main arm
    drawScope.drawLine(
      color = Color.White.copy(alpha = snowflake.alpha),
      start = Offset.Zero,
      end = Offset(endX, endY),
      strokeWidth = 1.5f,
      cap = StrokeCap.Round,
    )

    // Draw branches for larger snowflakes
    if (snowflake.type != SnowflakeType.SMALL) {
      val branchLength = armLength * 0.4f
      val branchStart = armLength * 0.5f
      for (side in listOf(-1, 1)) {
        val branchAngle = angle + side * 45f * PI.toFloat() / 180f
        val startX = cos(angle) * branchStart
        val startY = sin(angle) * branchStart
        val branchEndX = startX + cos(branchAngle) * branchLength
        val branchEndY = startY + sin(branchAngle) * branchLength

        drawScope.drawLine(
          color = Color.White.copy(alpha = snowflake.alpha * 0.8f),
          start = Offset(startX, startY),
          end = Offset(branchEndX, branchEndY),
          strokeWidth = 1f,
          cap = StrokeCap.Round,
        )
      }
    }
  }
}

Floating Ornaments

0:07:00

The floating ornaments add depth and festive color to our background. Each ornament gently bobs up and down with a glow effect.

Ornament Data Class

kotlin

data class FloatingOrnament(
  var x: Float,
  var y: Float,
  var baseY: Float,
  var size: Float,
  var color: Color,
  var glowColor: Color,
  var phase: Float,
  var speed: Float,
)

OrnamentSystem Class

This system manages the colorful Christmas ornaments floating in the background:

kotlin

class OrnamentSystem {
  private val ornaments = mutableListOf<FloatingOrnament>()
  private val random = Random

  // Festive color palette
  private val ornamentColors = listOf(
    Color(0xFFE53935) to Color(0xFFFF6F60), // Red
    Color(0xFFC62828) to Color(0xFFFF5252), // Dark Red
    Color(0xFFFFD700) to Color(0xFFFFE57F), // Gold
    Color(0xFF2E7D32) to Color(0xFF60AD5E), // Green
    Color(0xFF1565C0) to Color(0xFF5E92F3), // Blue
    Color(0xFF6A1B9A) to Color(0xFF9C4DCC), // Purple
  )

  fun initialize(width: Float, height: Float, count: Int = 15) {
    ornaments.clear()
    for (i in 0 until count) {
      val colorPair = ornamentColors[random.nextInt(ornamentColors.size)]
      val y = random.nextFloat() * height
      ornaments.add(
        FloatingOrnament(
          x = random.nextFloat() * width,
          y = y,
          baseY = y,
          size = random.nextFloat() * 15f + 10f,
          color = colorPair.first,
          glowColor = colorPair.second,
          phase = random.nextFloat() * 2f * PI.toFloat(),
          speed = random.nextFloat() * 2f + 1f,
        ),
      )
    }
  }

  fun update(time: Float) {
    for (ornament in ornaments) {
      // Gentle bobbing motion
      ornament.y = ornament.baseY + sin(time * ornament.speed + ornament.phase) * 20f
    }
  }
}

Understanding the bobbing motion: The line ornament.y = ornament.baseY + sin(time * ornament.speed + ornament.phase) * 20f creates the gentle up-and-down motion. We store the original baseY position and add a sine wave offset to it. The phase parameter ensures each ornament starts at a different point in the wave cycle, so they don't all bob in sync. The speed multiplier makes some ornaments move faster than others, adding visual variety.

Drawing Ornaments with Glow

Each ornament is drawn with multiple layers to create a realistic glow effect. This technique is called "layered glow" and creates depth:

kotlin

fun draw(drawScope: DrawScope) {
  for (ornament in ornaments) {
    // Outer glow
    drawScope.drawCircle(
      color = ornament.glowColor.copy(alpha = 0.2f),
      radius = ornament.size * 2f,
      center = Offset(ornament.x, ornament.y),
      blendMode = BlendMode.Plus,
    )
    // Mid glow
    drawScope.drawCircle(
      color = ornament.glowColor.copy(alpha = 0.4f),
      radius = ornament.size * 1.3f,
      center = Offset(ornament.x, ornament.y),
      blendMode = BlendMode.Plus,
    )
    // Core ornament
    drawScope.drawCircle(
      color = ornament.color,
      radius = ornament.size,
      center = Offset(ornament.x, ornament.y),
    )
    // Highlight reflection
    drawScope.drawCircle(
      color = Color.White.copy(alpha = 0.6f),
      radius = ornament.size * 0.3f,
      center = Offset(
        ornament.x - ornament.size * 0.3f,
        ornament.y - ornament.size * 0.3f,
      ),
    )
  }
}

Step 1: Draw the outer glow. We draw a large, transparent circle (2x the ornament size) with 20% opacity. The BlendMode.Plus is crucial here because it adds the color values together, creating a luminous glow effect rather than simply overlaying colors.

Step 2: Draw the mid glow. A slightly smaller circle (1.3x the ornament size) with 40% opacity adds intensity to the glow, creating a gradient-like falloff from the center.

Step 3: Draw the core ornament. This is the solid, fully opaque ornament at its actual size. It sits on top of the glow layers.

Step 4: Add the highlight reflection. A small white circle offset to the upper-left creates a realistic light reflection, making the ornament appear shiny and three-dimensional. The offset position simulates light coming from the upper-left direction.

Christmas Lights & Decorations

0:07:00

Now we'll add animated Christmas lights and decorations to make our paywall truly festive. These elements use Compose's rememberInfiniteTransition API to create smooth, repeating animations that run indefinitely.

Christmas Lights String

A row of colorful lights that twinkle with staggered animations. The key technique here is using delayMillis to create a cascading effect where each light starts its animation slightly after the previous one:

kotlin

@Composable
fun ChristmasLightsString(modifier: Modifier = Modifier) {
  val infiniteTransition = rememberInfiniteTransition(label = "lights")

  val lightColors = listOf(
    Color(0xFFFF1744), // Red
    Color(0xFF00E676), // Green
    Color(0xFFFFD600), // Yellow
    Color(0xFF2979FF), // Blue
    Color(0xFFFF9100), // Orange
  )

  Row(
    modifier = modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly,
  ) {
    lightColors.forEachIndexed { index, color ->
      val alpha by infiniteTransition.animateFloat(
        initialValue = 0.4f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
          animation = tween(
            durationMillis = 800,
            easing = LinearEasing,
            delayMillis = index * 150, // Staggered delay
          ),
          repeatMode = RepeatMode.Reverse,
        ),
        label = "light_$index",
      )

      val scale by infiniteTransition.animateFloat(
        initialValue = 0.8f,
        targetValue = 1.2f,
        animationSpec = infiniteRepeatable(
          animation = tween(
            durationMillis = 800,
            easing = FastOutSlowInEasing,
            delayMillis = index * 150,
          ),
          repeatMode = RepeatMode.Reverse,
        ),
        label = "scale_$index",
      )

      // Glow effect
      Box(
        modifier = Modifier
          .size(16.dp)
          .scale(scale)
          .background(color.copy(alpha = alpha), CircleShape)
          .blur(4.dp),
      )
      // Core light
      Box(
        modifier = Modifier
          .size(12.dp)
          .scale(scale)
          .offset(x = (-14).dp)
          .background(color.copy(alpha = alpha), CircleShape),
      )
    }
  }
}

Understanding the staggered animation: The delayMillis = index * 150 is what creates the beautiful cascading effect. The first light (index 0) starts immediately, the second light (index 1) starts after 150ms, the third after 300ms, and so on. Combined with RepeatMode.Reverse, this makes the lights appear to "chase" each other across the string.

The dual-layer glow technique: Each light bulb consists of two Box elements. The first is a larger, blurred circle that creates the glow halo around the light. The second is the smaller, sharp core that represents the actual bulb. The blur(4.dp) modifier on the glow layer creates the soft light emission effect.

Animated Gift Box

A bouncing, wiggling gift box that catches the eye. This uses two simultaneous animations (vertical bounce and rotation) to create a playful, attention-grabbing effect:

kotlin

@Composable
fun AnimatedGiftBox(modifier: Modifier = Modifier) {
  val infiniteTransition = rememberInfiniteTransition(label = "gift")

  val bounce by infiniteTransition.animateFloat(
    initialValue = 0f,
    targetValue = -10f,
    animationSpec = infiniteRepeatable(
      animation = tween(500, easing = FastOutSlowInEasing),
      repeatMode = RepeatMode.Reverse,
    ),
    label = "bounce",
  )

  val rotate by infiniteTransition.animateFloat(
    initialValue = -5f,
    targetValue = 5f,
    animationSpec = infiniteRepeatable(
      animation = tween(1000, easing = FastOutSlowInEasing),
      repeatMode = RepeatMode.Reverse,
    ),
    label = "rotate",
  )

  Box(
    modifier = modifier
      .offset(y = bounce.dp)
      .rotate(rotate),
    contentAlignment = Alignment.Center,
  ) {
    Text(text = "🎁", fontSize = 48.sp)
  }
}

How the bounce animation works: The bounce animation moves from 0 to -10 (negative Y means upward in Compose's coordinate system). The FastOutSlowInEasing makes it accelerate quickly at the start and slow down as it reaches the peak, mimicking real physics. With RepeatMode.Reverse, it smoothly returns to the starting position.

Combining multiple animations: By applying both offset(y = bounce.dp) and rotate(rotate) to the same Box, we combine vertical movement with rotation. The different durations (500ms for bounce, 1000ms for rotation) create an interesting, non-repetitive pattern that keeps the animation visually engaging.

Swinging Candy Cane

A candy cane decoration that swings back and forth like a pendulum. This simpler animation uses only rotation:

kotlin

@Composable
fun CandyCaneDecoration(modifier: Modifier = Modifier) {
  val infiniteTransition = rememberInfiniteTransition(label = "candy")

  val swing by infiniteTransition.animateFloat(
    initialValue = -15f,
    targetValue = 15f,
    animationSpec = infiniteRepeatable(
      animation = tween(2000, easing = FastOutSlowInEasing),
      repeatMode = RepeatMode.Reverse,
    ),
    label = "swing",
  )

  Text(
    text = "🍬",
    fontSize = 28.sp,
    modifier = modifier.rotate(swing),
  )
}

Understanding the swing motion: The rotation animates between -15 and +15 degrees, creating a gentle 30-degree arc. The 2000ms duration makes it feel leisurely, like an ornament swaying in a light breeze. The FastOutSlowInEasing makes the movement slow down at the extremes of the swing, just like a real pendulum would.

Glowing Feature Card

0:05:00

The premium features card needs to stand out! We'll create a card with an animated glowing border in Christmas colors.

GlowingBorderCard Composable

kotlin

@Composable
fun GlowingBorderCard(
  modifier: Modifier = Modifier,
  content: @Composable () -> Unit
) {
  val infiniteTransition = rememberInfiniteTransition(label = "glow")

  val glowAlpha by infiniteTransition.animateFloat(
    initialValue = 0.3f,
    targetValue = 0.8f,
    animationSpec = infiniteRepeatable(
      animation = tween(2000, easing = FastOutSlowInEasing),
      repeatMode = RepeatMode.Reverse,
    ),
    label = "glowAlpha",
  )

  Box(modifier = modifier) {
    // Glow effect layer
    Box(
      modifier = Modifier
        .matchParentSize()
        .blur(20.dp)
        .background(
          brush = Brush.verticalGradient(
            colors = listOf(
              Color(0xFFE53935).copy(alpha = glowAlpha), // Red
              Color(0xFF2E7D32).copy(alpha = glowAlpha), // Green
            ),
          ),
          shape = RoundedCornerShape(24.dp),
        ),
    )

    // Card content
    Box(
      modifier = Modifier
        .matchParentSize()
        .clip(RoundedCornerShape(24.dp))
        .background(
          brush = Brush.verticalGradient(
            colors = listOf(
              Color(0xFF1A1A2E),
              Color(0xFF16213E),
            ),
          ),
        )
        .border(
          width = 2.dp,
          brush = Brush.verticalGradient(
            colors = listOf(
              Color(0xFFE53935).copy(alpha = 0.6f),
              Color(0xFF2E7D32).copy(alpha = 0.6f),
            ),
          ),
          shape = RoundedCornerShape(24.dp),
        )
        .padding(24.dp),
    ) {
      content()
    }
  }
}

How the animated glow works: The glowAlpha value animates between 0.3 and 0.8 over 2 seconds. This value controls the opacity of both the outer glow layer and the gradient colors, creating a pulsing, breathing effect.

The two-layer technique: The first Box creates the glow effect using blur(20.dp) applied to a gradient background. This creates a soft, diffused light around the card. The second Box contains the actual card content with a semi-transparent border. The border uses the same red-to-green gradient as the glow, creating visual cohesion.

Why use matchParentSize: Both inner Boxes use matchParentSize() instead of fillMaxSize(). This is important because matchParentSize doesn't affect the parent's measurement, allowing the parent Box to size itself based on the content, while the glow layer exactly matches whatever size is determined.

Premium Feature Item

A simple row component for displaying feature items:

kotlin

@Composable
fun PremiumFeatureItem(
  emoji: String,
  title: String,
  modifier: Modifier = Modifier
) {
  Row(
    modifier = modifier
      .fillMaxWidth()
      .padding(vertical = 6.dp),
    verticalAlignment = Alignment.CenterVertically,
  ) {
    Text(text = emoji, fontSize = 20.sp)
    Spacer(modifier = Modifier.width(12.dp))
    Text(
      text = title,
      style = TextStyle(
        color = Color.White,
        fontSize = 14.sp,
        fontWeight = FontWeight.Medium,
      ),
    )
  }
}

Complete Paywall Screen

0:08:00

Now let's put everything together into a complete paywall screen!

SnowfallBackground Composable

First, create the animated background that combines snowfall and ornaments:

kotlin

@Composable
fun SnowfallBackground(modifier: Modifier = Modifier) {
  val snowfallSystem = remember { SnowfallSystem() }
  val ornamentSystem = remember { OrnamentSystem() }
  var initialized by remember { mutableStateOf(false) }
  var lastFrameTimeNanos by remember { mutableLongStateOf(0L) }
  var totalTime by remember { mutableFloatStateOf(0f) }
  var canvasSize by remember { mutableStateOf(Size.Zero) }

  LaunchedEffect(Unit) {
    while (true) {
      withFrameNanos { frameTimeNanos ->
        val deltaTime = if (lastFrameTimeNanos == 0L) {
          0.016f
        } else {
          ((frameTimeNanos - lastFrameTimeNanos) / 1_000_000_000f).coerceIn(0f, 0.1f)
        }
        lastFrameTimeNanos = frameTimeNanos
        totalTime += deltaTime

        if (canvasSize.width > 0 && canvasSize.height > 0) {
          if (!initialized) {
            ornamentSystem.initialize(canvasSize.width, canvasSize.height)
            initialized = true
          }
          snowfallSystem.update(canvasSize.width, canvasSize.height, deltaTime)
          ornamentSystem.update(totalTime)
        }
      }
    }
  }

  Canvas(modifier = modifier.fillMaxSize()) {
    canvasSize = size
    ornamentSystem.draw(this)
    snowfallSystem.draw(this)
  }
}

Main ChristmasPaywallScreen

Finally, compose all elements together:

kotlin

@Composable
fun ChristmasPaywallScreen(onDismiss: () -> Unit = {}) {
  Box(
    modifier = Modifier
      .fillMaxSize()
      .background(
        brush = Brush.verticalGradient(
          colors = listOf(
            Color(0xFF0F0F23),
            Color(0xFF1A1A2E),
            Color(0xFF0F0F23),
          ),
        ),
      ),
    contentAlignment = Alignment.Center,
  ) {
    // Animated background
    SnowfallBackground()

    // Christmas lights at top
    ChristmasLightsString(
      modifier = Modifier
        .align(Alignment.TopCenter)
        .padding(top = 60.dp),
    )

    // Main content
    Column(
      modifier = Modifier
        .fillMaxSize()
        .padding(horizontal = 24.dp),
      horizontalAlignment = Alignment.CenterHorizontally,
      verticalArrangement = Arrangement.Center,
    ) {
      // Holiday greeting
      Text(
        text = "🎄 Holiday Special 🎄",
        style = TextStyle(
          color = Color(0xFFFFD700),
          fontSize = 16.sp,
          fontWeight = FontWeight.Bold,
        ),
      )

      Spacer(modifier = Modifier.height(8.dp))

      Text(
        text = "Unlock Premium",
        style = TextStyle(
          color = Color.White,
          fontSize = 32.sp,
          fontWeight = FontWeight.Bold,
        ),
      )

      Text(
        text = "This Christmas",
        style = TextStyle(
          color = Color(0xFFE53935),
          fontSize = 28.sp,
          fontWeight = FontWeight.Bold,
        ),
      )

      Spacer(modifier = Modifier.height(24.dp))

      AnimatedGiftBox()

      Spacer(modifier = Modifier.height(24.dp))

      // Features card
      GlowingBorderCard(modifier = Modifier.fillMaxWidth()) {
        Column {
          Text(
            text = "Premium Features",
            style = TextStyle(
              color = Color.White,
              fontSize = 18.sp,
              fontWeight = FontWeight.Bold,
            ),
          )
          Spacer(modifier = Modifier.height(16.dp))
          PremiumFeatureItem("🎅", "Unlimited Holiday Themes")
          PremiumFeatureItem("🦌", "Exclusive Winter Content")
          PremiumFeatureItem("🎁", "Special Gift Rewards")
          PremiumFeatureItem("❄️", "Ad-Free Experience")
          PremiumFeatureItem("🌟", "Priority Support")
        }
      }

      Spacer(modifier = Modifier.height(24.dp))

      // Discount badge
      Row(verticalAlignment = Alignment.CenterVertically) {
        CandyCaneDecoration()
        Spacer(modifier = Modifier.width(8.dp))
        Text(
          text = "50% OFF",
          style = TextStyle(
            color = Color(0xFF4CAF50),
            fontSize = 24.sp,
            fontWeight = FontWeight.ExtraBold,
          ),
        )
        Spacer(modifier = Modifier.width(8.dp))
        CandyCaneDecoration(modifier = Modifier.rotate(180f))
      }

      Spacer(modifier = Modifier.height(24.dp))

      // Subscribe buttons
      Button(
        onClick = { /* Handle purchase */ },
        modifier = Modifier.fillMaxWidth().height(64.dp),
        colors = ButtonDefaults.buttonColors(
          containerColor = Color(0xFF2E7D32),
        ),
        shape = RoundedCornerShape(16.dp),
      ) {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
          Text("🎁 Yearly - $29.99/year")
          Text(
            "Save 50% • Only $2.49/month",
            fontSize = 12.sp,
            color = Color.White.copy(alpha = 0.8f),
          )
        }
      }
    }
  }
}

Conclusion

0:02:00

Congratulations! You've built a stunning animated Christmas paywall.

What you've learned

Throughout this codelab, you've learned how to create particle systems for realistic snowfall effects. You built floating ornament animations with glow effects using BlendMode.Plus. You implemented staggered animations for Christmas lights using infiniteRepeatable with delayed starts. You created bouncing and swinging decorations with rememberInfiniteTransition. You built cards with animated glowing borders using gradient brushes and blur effects. Finally, you composed all these elements together into a cohesive paywall screen.

Next steps

To take this paywall to production, consider integrating with RevenueCat for actual purchase handling. You can A/B test different discount amounts and copy to optimize conversions. Customize the colors and animations to match your brand identity. Add haptic feedback on button presses to enhance the user experience. You might also consider adding subtle holiday sound effects for extra immersion.

Source Code

The complete source code for this codelab is available on GitHub: compose-paywall-animations

Resources

For further learning, check out the RevenueCat Documentation for subscription management, the Jetpack Compose Animation Guide for advanced animation techniques, and the Compose Canvas Drawing documentation for custom graphics.

Happy Holidays and Happy Coding!