# Snapchat (iOS) — Jetpack Compose Implementation Guide

Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Snapchat's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, `Modifier`s, motion, and haptics.

> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (the camera-first black canvas, the aggressive Snap Yellow, the 82dp concentric capture button, the color-coded snap-type inbox, bitmoji-as-avatar) while making everything idiomatic Android — a `HorizontalPager` for the 5-screen swipe nav instead of a paged `TabView`, `pointerInput` for the tap/long-press/double-tap capture gesture, `sp`/`dp` instead of `pt`.

Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and Coil `2.6+` for bitmoji avatars and story-preview imagery. (No `androidx.palette` — Snapchat does no color extraction; the camera feed is the content surface.)

## 1. Color Tokens

```kotlin
// ui/theme/SnapColors.kt
import androidx.compose.ui.graphics.Color

object SnapColors {
    // Canvas & Surfaces — camera-default dark
    val Canvas    = Color(0xFF000000)
    val Surface1  = Color(0xFF1A1A1A) // received chat bubble, discover cards, sheets
    val Surface2  = Color(0xFF2C2C2C) // sent chat bubble, selected rows
    val Divider   = Color(0xFF333333)

    // Canvas (Light — limited: settings, memories)
    val LightCanvas   = Color(0xFFFFFFFF)
    val LightSurface1 = Color(0xFFF2F2F2)

    // Text
    val TextPrimary       = Color(0xFFFFFFFF)
    val TextPrimaryLight  = Color(0xFF000000)
    val TextSecondary     = Color(0xFF8A8A8F)
    val TextTertiary      = Color(0xFF555555)

    // Brand — the aggressive single accent
    val Yellow        = Color(0xFFFFFC00)
    val YellowPressed = Color(0xFFE6E300)

    // Snap type colors (color-coded inbox)
    val PhotoRed    = Color(0xFFFF2E3D)
    val VideoPurple = Color(0xFF9B51FF)
    val ChatBlue    = Color(0xFF4DA7FF)
    val AudioGreen  = Color(0xFF4CD964)

    // Semantic
    val ErrorRed     = Color(0xFFFF3B30)
    val SuccessGreen = Color(0xFF00D873)
    val LiveRed      = Color(0xFFFF2E3D)

    // Snap Map heat
    val MapWarm = Color(0xFFFF9A1F)
}
```

Snapchat's gravity is **dark/camera-first** — pure black, never a warm dark. Wire a Material 3 `darkColorScheme`; do not provide a light scheme as default (light appears only inside settings/memories). `primary` is Snap Yellow; `onPrimary` is black (yellow CTAs carry black text/icons). The snap-type colors are explicit tokens, never theme roles.

```kotlin
// ui/theme/Theme.kt
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable

private val SnapScheme = darkColorScheme(
    primary        = SnapColors.Yellow,
    onPrimary      = SnapColors.Canvas,      // intentional: black on yellow
    background     = SnapColors.Canvas,
    onBackground   = SnapColors.TextPrimary,
    surface        = SnapColors.Surface1,
    onSurface      = SnapColors.TextPrimary,
    surfaceVariant = SnapColors.Surface2,
    outline        = SnapColors.Divider,
    error          = SnapColors.ErrorRed,
)

@Composable
fun SnapTheme(content: @Composable () -> Unit) =
    MaterialTheme(colorScheme = SnapScheme, typography = SnapTypography, content = content)
```

## 2. Typography

Avenir Next is the iOS system face; on Android it is not bundled. Drop the licensed Avenir Next TTFs in `res/font/` and build a `FontFamily`. Fall back to the system font (Roboto) — a warm humanist geometric sans is the closest free substitute. Snapchat uses **Medium (500) and Bold (700) only**, with Heavy (900) on splash/streak hero — never regular/light/thin.

```kotlin
// ui/theme/SnapType.kt
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

val AvenirNext = FontFamily(
    Font(R.font.avenir_next_medium, FontWeight.Medium), // 500 — chat, captions
    Font(R.font.avenir_next_bold,   FontWeight.Bold),   // 700 — names, headings, buttons
    Font(R.font.avenir_next_heavy,  FontWeight.Black),  // 900 — splash / streak hero only
)

// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
object SnapText {
    val SplashTitle    = TextStyle(AvenirNext, fontWeight = FontWeight.Black,  fontSize = 48.sp, lineHeight = 48.sp, letterSpacing = (-0.5).sp)
    val ScreenTitle    = TextStyle(AvenirNext, fontWeight = FontWeight.Bold,   fontSize = 24.sp, lineHeight = 28.sp, letterSpacing = (-0.2).sp)
    val SectionHeader  = TextStyle(AvenirNext, fontWeight = FontWeight.Bold,   fontSize = 20.sp, lineHeight = 24.sp, letterSpacing = (-0.1).sp)
    val ChatRowName    = TextStyle(AvenirNext, fontWeight = FontWeight.Bold,   fontSize = 16.sp, lineHeight = 20.sp)
    val ChatMessage    = TextStyle(AvenirNext, fontWeight = FontWeight.Medium, fontSize = 16.sp, lineHeight = 21.sp)
    val ChatStatus     = TextStyle(AvenirNext, fontWeight = FontWeight.Medium, fontSize = 13.sp, lineHeight = 16.sp)
    val StoryName      = TextStyle(AvenirNext, fontWeight = FontWeight.Bold,   fontSize = 14.sp, lineHeight = 17.sp)
    val Timestamp      = TextStyle(AvenirNext, fontWeight = FontWeight.Medium, fontSize = 12.sp, lineHeight = 14.sp)
    val StreakCount    = TextStyle(AvenirNext, fontWeight = FontWeight.Bold,   fontSize = 18.sp, lineHeight = 18.sp)
    val HudLabel       = TextStyle(AvenirNext, fontWeight = FontWeight.Bold,   fontSize = 13.sp, lineHeight = 13.sp, letterSpacing = 0.3.sp)
    val ButtonPrimary  = TextStyle(AvenirNext, fontWeight = FontWeight.Bold,   fontSize = 16.sp, lineHeight = 16.sp, letterSpacing = 0.2.sp)
    val LensLabel      = TextStyle(AvenirNext, fontWeight = FontWeight.Bold,   fontSize = 13.sp, lineHeight = 13.sp, letterSpacing = 0.3.sp)
    val BitmojiCallout = TextStyle(AvenirNext, fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 18.sp)
    val SpotlightCap   = TextStyle(AvenirNext, fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 18.sp)
    val DiscoverTitle  = TextStyle(AvenirNext, fontWeight = FontWeight.Bold,   fontSize = 16.sp, lineHeight = 19.sp, letterSpacing = (-0.1).sp)
}

val SnapTypography = Typography(
    displayMedium = SnapText.SplashTitle,
    headlineSmall = SnapText.ScreenTitle,
    titleMedium   = SnapText.ChatRowName,
    bodyMedium    = SnapText.ChatMessage,
    labelMedium   = SnapText.Timestamp,
)
```

## 3. Signature Components

### Snap Capture Button (the 82dp concentric double-circle)

The most recognizable component in the app. Outer 82dp / 6dp Snap-Yellow ring + inner 64dp white circle. Tap = photo; long-press = video (inner fills yellow, outer ring becomes a clockwise progress arc up to 60s); double-tap = camera flip. One `pointerInput` block disambiguates all three.

```kotlin
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.spring
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay

@Composable
fun SnapCaptureButton(
    isRecording: Boolean,
    recordProgress: Float, // 0f..1f over 60s
    onPhoto: () -> Unit,
    onVideoStart: () -> Unit,
    onVideoStop: () -> Unit,
    onFlip: () -> Unit,
    modifier: Modifier = Modifier,
) {
    val haptics = LocalHapticFeedback.current
    val innerScale = remember { Animatable(1f) }

    androidx.compose.foundation.layout.Box(
        modifier = modifier
            .size(82.dp)
            .pointerInput(Unit) {
                awaitPointerEventScope {
                    while (true) {
                        val down = awaitFirstDown()
                        val downTime = System.currentTimeMillis()
                        var longFired = false
                        // long-press → video
                        val longJob = launchAndDelay(350) {
                            longFired = true
                            haptics.performHapticFeedback(HapticFeedbackType.LongPress) // impact medium
                            onVideoStart()
                        }
                        val up = waitForUpOrCancellation()
                        longJob.cancel()
                        if (longFired) {
                            onVideoStop()
                        } else if (up != null) {
                            val now = System.currentTimeMillis()
                            if (now - lastTap < 300) {           // double-tap → flip
                                haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove)
                                onFlip()
                            } else {                              // single tap → photo
                                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // impact soft
                                onPhoto()
                            }
                            lastTap = now
                        }
                    }
                }
            },
        contentAlignment = androidx.compose.ui.Alignment.Center,
    ) {
        // Outer yellow ring + (when recording) clockwise progress arc
        Canvas(Modifier.size(82.dp)) {
            val stroke = 6.dp.toPx()
            drawCircle(SnapColors.Yellow, radius = (size.minDimension - stroke) / 2f, style = Stroke(stroke))
            if (isRecording) {
                drawArc(
                    color = SnapColors.Yellow,
                    startAngle = -90f,
                    sweepAngle = 360f * recordProgress,
                    useCenter = false,
                    topLeft = Offset(stroke / 2f, stroke / 2f),
                    size = Size(size.width - stroke, size.height - stroke),
                    style = Stroke(stroke),
                )
            }
        }
        // Inner circle — white, or yellow while recording
        androidx.compose.foundation.layout.Box(
            Modifier
                .size(64.dp)
                .scale(innerScale.value)
                .clip(CircleShape)
                .background(if (isRecording) SnapColors.Yellow else SnapColors.TextPrimary)
        )
    }

    // photo-tap squish
    LaunchedEffect(Unit) { /* drive innerScale 0.92 → 1.0 from onPhoto in real code */ }
}

// (helpers `lastTap`, `launchAndDelay` are sketches — wire to a rememberCoroutineScope in production)
```

### Chat Inbox Row (color-coded snap type)

72dp tall on black, 1dp divider. 48dp circular **bitmoji**, name, then the snap-type indicator (filled square unopened / outline opened) + status, with timestamp + 🔥 streak trailing.

```kotlin
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDownward
import androidx.compose.material.icons.filled.ArrowUpward
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import coil.compose.AsyncImage

enum class SnapType { PHOTO, VIDEO, CHAT, AUDIO, NONE }
enum class SnapDirection { INCOMING, OUTGOING }

@Composable
fun SnapChatRow(
    name: String,
    bitmojiUrl: String,
    status: String,        // "Received · 2m ago"
    timestamp: String,     // "2m"
    snapType: SnapType,
    direction: SnapDirection,
    isUnread: Boolean,
    streakDays: Int?,
    modifier: Modifier = Modifier,
) {
    Column(modifier) {
        Row(
            Modifier.fillMaxWidth().height(72.dp).padding(horizontal = 16.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(12.dp),
        ) {
            AsyncImage(
                model = bitmojiUrl, contentDescription = null, contentScale = ContentScale.Crop,
                modifier = Modifier.size(48.dp).clip(CircleShape),
            )
            Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(4.dp)) {
                Text(name, style = SnapText.ChatRowName, color = SnapColors.TextPrimary)
                Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(6.dp)) {
                    if (snapType != SnapType.NONE) {
                        SnapTypeIndicator(snapType, direction, isUnread)
                    }
                    Text(status, style = SnapText.ChatStatus, color = SnapColors.TextSecondary)
                }
            }
            Column(horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.spacedBy(4.dp)) {
                Text(timestamp, style = SnapText.Timestamp, color = SnapColors.TextSecondary)
                streakDays?.let {
                    Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(2.dp)) {
                        Text("🔥")
                        Text("$it", style = SnapText.StreakCount, color = SnapColors.TextPrimary)
                    }
                }
            }
        }
        Spacer(Modifier.fillMaxWidth().height(1.dp).background(SnapColors.Divider))
    }
}

@Composable
fun SnapTypeIndicator(type: SnapType, direction: SnapDirection, isUnread: Boolean) {
    val color = when (type) {
        SnapType.PHOTO -> SnapColors.PhotoRed
        SnapType.VIDEO -> SnapColors.VideoPurple
        SnapType.CHAT  -> SnapColors.ChatBlue
        SnapType.AUDIO -> SnapColors.AudioGreen
        SnapType.NONE  -> SnapColors.TextSecondary
    }
    Box(Modifier.size(16.dp), contentAlignment = Alignment.Center) {
        Box(
            Modifier
                .size(16.dp)
                .clip(RoundedCornerShape(2.dp))
                .then(if (isUnread) Modifier.background(color) else Modifier)
                .border(1.5.dp, color, RoundedCornerShape(2.dp))
        )
        Icon(
            if (direction == SnapDirection.INCOMING) Icons.Filled.ArrowDownward else Icons.Filled.ArrowUpward,
            contentDescription = null,
            tint = if (isUnread) Color.White else color,
            modifier = Modifier.size(8.dp),
        )
    }
}

import androidx.compose.foundation.border
```

### Story Thumbnail (pulsing unread ring)

120dp × 200dp, 16dp corner. 3dp ring: yellow (unread, subtle 2s opacity pulse), gray (read), red (live). Bitmoji top-left, creator name bottom-left with a drop shadow for legibility on imagery.

```kotlin
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.draw.drawBehind

enum class StoryState { UNREAD, READ, LIVE }

@Composable
fun SnapStoryThumb(
    creatorName: String,
    bitmojiUrl: String,
    previewUrl: String,
    state: StoryState,
    modifier: Modifier = Modifier,
) {
    val ringColor = when (state) {
        StoryState.UNREAD -> SnapColors.Yellow
        StoryState.READ   -> SnapColors.TextTertiary
        StoryState.LIVE   -> SnapColors.LiveRed
    }
    val pulse = rememberInfiniteTransition(label = "ring")
    val ringAlpha by pulse.animateFloat(
        1f, 0.7f,
        infiniteRepeatable(tween(2000), RepeatMode.Reverse),
        label = "ringAlpha",
    )

    Box(
        modifier
            .size(width = 120.dp, height = 200.dp)
            .clip(RoundedCornerShape(16.dp))
            .drawBehind { } // image drawn by AsyncImage below
    ) {
        AsyncImage(
            model = previewUrl, contentDescription = "$creatorName story", contentScale = ContentScale.Crop,
            modifier = Modifier.matchParentSize(),
        )
        Box(
            Modifier
                .matchParentSize()
                .border(
                    width = 3.dp,
                    color = ringColor.copy(alpha = if (state == StoryState.UNREAD) ringAlpha else 1f),
                    shape = RoundedCornerShape(16.dp),
                )
        )
        AsyncImage(
            model = bitmojiUrl, contentDescription = null, contentScale = ContentScale.Crop,
            modifier = Modifier.padding(8.dp).size(40.dp).clip(CircleShape).align(Alignment.TopStart),
        )
        Text(
            creatorName,
            style = SnapText.StoryName,
            color = Color.White,
            modifier = Modifier
                .align(Alignment.BottomStart)
                .padding(10.dp)
                .graphicsLayer { shadowElevation = 2f }, // ~rgba(0,0,0,0.4) text shadow proxy
        )
    }
}
```

### Chat Bubble (dark gray, not iMessage-colored)

Both sent and received are dark-gray variants — never blue. 20dp corner, no tail, max 75% width.

```kotlin
@Composable
fun SnapChatBubble(text: String, fromMe: Boolean, modifier: Modifier = Modifier) {
    Row(modifier.fillMaxWidth().padding(horizontal = 16.dp)) {
        if (fromMe) Spacer(Modifier.weight(1f).widthIn(min = 60.dp))
        Text(
            text,
            style = SnapText.ChatMessage,
            color = SnapColors.TextPrimary,
            modifier = Modifier
                .widthIn(max = (LocalConfiguration.current.screenWidthDp * 0.75f).dp)
                .clip(RoundedCornerShape(20.dp))
                .background(if (fromMe) SnapColors.Surface2 else SnapColors.Surface1)
                .padding(horizontal = 14.dp, vertical = 10.dp),
        )
        if (!fromMe) Spacer(Modifier.weight(1f).widthIn(min = 60.dp))
    }
}

import androidx.compose.ui.platform.LocalConfiguration
```

## 4. Snapchat-Specific Feature: the Chromeless Camera HUD

The signature: the app opens to a full-bleed live viewfinder with **no UI frame** — controls float chromelessly in the corners with a drop shadow for legibility over any scene. Above the capture button is the lens carousel (active lens scales 60dp → 72dp with a 3dp yellow ring).

```kotlin
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material.icons.filled.*
import androidx.compose.ui.unit.dp

@Composable
fun SnapCameraHUD(
    cameraFeed: @Composable () -> Unit, // your CameraX PreviewView wrapped in AndroidView
) {
    var flashOn by remember { mutableStateOf(false) }
    var selectedLens by remember { mutableStateOf(2) }
    var isRecording by remember { mutableStateOf(false) }
    var progress by remember { mutableStateOf(0f) }
    val lenses = listOf("😎", "🎭", "🐶", "😂", "✨")

    Box(Modifier.fillMaxSize().background(SnapColors.Canvas)) {
        cameraFeed() // edge-to-edge, no frame

        Column(Modifier.fillMaxSize()) {
            // Top floating HUD
            Row(
                Modifier.fillMaxWidth().padding(16.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
            ) {
                HudIcon(Icons.Filled.AccountCircle)
                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                    HudIcon(
                        if (flashOn) Icons.Filled.FlashOn else Icons.Filled.FlashOff,
                        tint = if (flashOn) SnapColors.Yellow else Color.White,
                    ) { flashOn = !flashOn }
                    HudIcon(Icons.Filled.FlipCameraAndroid)
                    HudIcon(Icons.Filled.Search)
                }
            }

            Spacer(Modifier.weight(1f))

            LensCarousel(lenses, selectedLens) { selectedLens = it }
            Spacer(Modifier.height(16.dp))

            Row(
                Modifier.fillMaxWidth().padding(horizontal = 32.dp, vertical = 16.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
            ) {
                HudIcon(Icons.Filled.PhotoLibrary, size = 32.dp)
                SnapCaptureButton(
                    isRecording = isRecording,
                    recordProgress = progress,
                    onPhoto = {},
                    onVideoStart = { isRecording = true },
                    onVideoStop = { isRecording = false },
                    onFlip = {},
                )
                HudIcon(Icons.AutoMirrored.Filled.Chat, size = 32.dp)
            }
        }
    }
}

@Composable
fun HudIcon(
    icon: androidx.compose.ui.graphics.vector.ImageVector,
    size: androidx.compose.ui.unit.Dp = 28.dp,
    tint: Color = Color.White,
    onClick: () -> Unit = {},
) {
    Box(
        Modifier.size(44.dp).clickableNoRipple(onClick),
        contentAlignment = Alignment.Center,
    ) {
        Icon(
            icon, contentDescription = null, tint = tint,
            modifier = Modifier
                .size(size)
                .graphicsLayer { shadowElevation = 2f }, // legibility over any scene
        )
    }
}

@Composable
fun LensCarousel(lenses: List<String>, selected: Int, onSelect: (Int) -> Unit) {
    LazyRow(
        horizontalArrangement = Arrangement.spacedBy(12.dp),
        contentPadding = PaddingValues(horizontal = 16.dp),
        modifier = Modifier.fillMaxWidth(),
    ) {
        itemsIndexed(lenses) { i, lens ->
            val active = i == selected
            val s by animateFloatAsState(if (active) 72f else 60f, label = "lensSize")
            Box(
                Modifier
                    .size(s.dp)
                    .clip(CircleShape)
                    .background(SnapColors.Surface2)
                    .then(if (active) Modifier.border(3.dp, SnapColors.Yellow, CircleShape) else Modifier)
                    .clickableNoRipple { onSelect(i) },
                contentAlignment = Alignment.Center,
            ) { Text(lens, fontSize = (if (active) 32 else 28).sp) }
        }
    }
}

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.ui.composed
fun Modifier.clickableNoRipple(onClick: () -> Unit): Modifier = composed {
    clickable(remember { MutableInteractionSource() }, indication = null, onClick = onClick)
}
```

## 5. Navigation — swipe-between-five-screens (NOT a tab bar)

Snapchat has no traditional tab bar. iOS uses a paged `TabView`; the Compose equivalent is a `HorizontalPager` with the **Camera centered (page 2)** as the default, plus a minimal indicator strip (translucent over the camera, solid black elsewhere — Android has no live blur).

```kotlin
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState

@Composable
fun SnapRootSwipeNav() {
    val pager = rememberPagerState(initialPage = 2, pageCount = { 5 }) // Camera = 2, the default

    Box(Modifier.fillMaxSize()) {
        HorizontalPager(state = pager, modifier = Modifier.fillMaxSize()) { page ->
            when (page) {
                0 -> SnapMapScreen()
                1 -> ChatListScreen()
                2 -> SnapCameraHUD(cameraFeed = { /* CameraX preview */ })
                3 -> StoriesScreen()
                4 -> SpotlightScreen()
            }
        }
        SnapNavIndicator(
            selected = pager.currentPage,
            overCamera = pager.currentPage == 2,
            modifier = Modifier.align(Alignment.BottomCenter),
        )
    }
}

@Composable
fun SnapNavIndicator(selected: Int, overCamera: Boolean, modifier: Modifier = Modifier) {
    val icons = listOf(
        Icons.Filled.Map, Icons.AutoMirrored.Filled.Chat, Icons.Filled.CameraAlt,
        Icons.Filled.PlayArrow, Icons.Filled.Diamond,
    )
    Row(
        modifier
            .fillMaxWidth()
            .background(if (overCamera) Color.Black.copy(alpha = 0.5f) else SnapColors.Canvas)
            .height(56.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        icons.forEachIndexed { i, icon ->
            Icon(
                icon, contentDescription = null,
                tint = if (i == selected) Color.White else SnapColors.TextTertiary,
                modifier = Modifier.weight(1f).size(28.dp),
            )
        }
    }
}
```

`HorizontalPager` gives the 300ms spring page transition; set `pageSpacing` and rely on the default fling for the rubber-band edge feel. No labels — icons only.

## 6. Motion

| Moment | Compose recipe |
|--------|----------------|
| Screen swipe (5-screen) | `HorizontalPager` default spring (~300ms) + fling; `HapticFeedbackType.TextHandleMove` on edge resistance |
| Capture tap (photo) | inner-circle `Animatable` 0.92 → 1.0 `spring(stiffness = 500f)` + white-flash `Box` 100ms + `HapticFeedbackType.LongPress` (soft) |
| Capture hold (video) | outer arc `drawArc` driven by a 60s `Animatable`/`tween`; `LongPress` on start, soft tick per 1s |
| Camera flip (double-tap) | shutter icon `rotate` 180° over 400ms + `HapticFeedbackType.TextHandleMove` |
| Lens swipe/select | `animateFloatAsState` 60dp → 72dp + yellow-ring `fadeIn`; AR overlay cross-fade 200ms |
| Snap send | preview `slideOutHorizontally { -it }` 300ms + confetti `Canvas`/`Animatable` + `HapticFeedbackType.Confirm` |
| Streak save | flame `Animatable` 1.0 → 1.3 → 1.0 + "+1 🔥" `offset`/`fadeOut` 600ms + success haptic |
| Story ring pulse | `rememberInfiniteTransition` opacity 1.0 ↔ 0.7 over 2s (unread only) |

```kotlin
// Streak-save bounce + floating "+1 🔥"
@Composable
fun StreakSaveBurst(trigger: Any) {
    val scale = remember { Animatable(1f) }
    val rise = remember { Animatable(0f) }
    LaunchedEffect(trigger) {
        scale.animateTo(1.3f, spring(dampingRatio = 0.5f)); scale.animateTo(1f, spring())
        rise.animateTo(1f, tween(600))
    }
    Box {
        Text("🔥", Modifier.scale(scale.value), style = SnapText.StreakCount)
        Text(
            "+1 🔥",
            Modifier
                .offset(y = (-20).dp * rise.value)
                .graphicsLayer { alpha = 1f - rise.value },
            style = SnapText.HudLabel,
            color = SnapColors.Yellow,
        )
    }
}

import androidx.compose.foundation.layout.offset
```

Haptics: prefer `LocalHapticFeedback`. Photo capture = `LongPress` (soft impact), video start = `LongPress` (medium), camera flip / screen-edge / lens = `TextHandleMove`, streak save / snap sent = `HapticFeedbackType.Confirm`. The capture haptic should also pair with a shutter sound. Honor reduce-motion: disable the story-ring pulse and skip the flip-spin while still firing haptics.

## 7. Icons

Snapchat uses custom glyphs extensively (ghost logo, capture button is hand-drawn in §3); the closest first-party set is `androidx.compose.material:material-icons-extended`. The ghost logo and bitmoji ship as assets (vector drawable / Coil-loaded). Bitmoji always replaces a generic person icon.

| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
|---------|-----------------|--------------------------|
| Camera (nav) | `camera.fill` | `Icons.Filled.CameraAlt` |
| Chat (nav) | `bubble.left.fill` | `Icons.AutoMirrored.Filled.Chat` |
| Map (nav) | `map.fill` | `Icons.Filled.Map` |
| Stories (nav) | `play.rectangle.fill` | `Icons.Filled.PlayArrow` |
| Spotlight (nav) | `diamond.fill` | `Icons.Filled.Diamond` |
| Memories (HUD) | `photo.stack.fill` | `Icons.Filled.PhotoLibrary` |
| Flash on | `bolt.fill` | `Icons.Filled.FlashOn` |
| Flash off | `bolt.slash.fill` | `Icons.Filled.FlashOff` |
| Camera flip | `arrow.triangle.2.circlepath.camera.fill` | `Icons.Filled.FlipCameraAndroid` |
| Search | `magnifyingglass` | `Icons.Filled.Search` |
| Send | `paperplane.fill` | `Icons.AutoMirrored.Filled.Send` |
| New chat | `square.and.pencil` | `Icons.Filled.Edit` |
| Profile | `person.crop.circle.fill` (or bitmoji) | `Icons.Filled.AccountCircle` (or bitmoji) |
| Snap incoming | `arrow.down` in square | `Icons.Filled.ArrowDownward` (in 16dp square) |
| Snap outgoing | `arrow.up` in square | `Icons.Filled.ArrowUpward` (in 16dp square) |
| Microphone (audio) | `mic.fill` | `Icons.Filled.Mic` |
| Sticker | `face.smiling` | `Icons.Filled.AddReaction` |
| Streak / BFF / birthday | 🔥 / 💛 / 🎂 | emoji glyphs (not icons) |

## 8. Minimum SDK & Accessibility Notes

- **minSdk 24** (CameraX + modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`. The capture button and progress arc are hand-drawn `Canvas` — no extra dependency.
- **Edge-to-edge**: call `enableEdgeToEdge()`. The camera is **edge-to-edge by design** (`Modifier.fillMaxSize()` + `ignoresSafeArea` equivalent — no insets on the viewfinder). Apply insets only to the floating HUD icons (clear the status bar / Dynamic-Island-equivalent cutout) and the bottom nav strip (clear gesture nav). Capture button sits ~20.dp above the nav strip.
- **Font scaling**: `sp` honors user scale on chat messages, row names, bios, settings. **Pin camera HUD labels, streak counts, lens labels, timestamps, and story-thumbnail names to fixed sizes** (layout-sensitive) via a fixed-`fontScale` `LocalDensity`.
- **TalkBack**: every floating HUD icon needs an explicit `contentDescription` ("Flash, off", "Camera, switch to front"). The capture button announces "Snap camera, double tap to capture photo, press and hold to record video". The swipe nav is disorienting for screen readers — provide a rotor/`semantics` "Go to screen" action listing Map / Chat / Camera / Stories / Spotlight as discrete destinations. Bitmoji images are decorative: `Modifier.semantics { hideFromAccessibility() }` (or `contentDescription = null`) and rely on the adjacent name.
- **Reduce motion**: respect the accessibility setting — disable the story-ring pulse, skip the camera-flip spin and the streak burst, but still fire haptics. **Reduce transparency**: the translucent nav indicator falls back to solid `#000000`.
- **Alternatives for inaccessible gestures**: long-press-for-video is not screen-reader-operable — provide an explicit "Record video" mode toggle. Flash/Live states must always carry a text label, never color alone.
- **Contrast**: white on `#000000` is maximum; `#8A8A8F` secondary on black passes AA at 13sp+. The chromeless HUD relies on the drop shadow over arbitrary camera scenes — offer an accessibility "opaque chrome background" toggle that puts a semi-transparent pill behind each icon.
- **Dynamic color**: do **not** enable Material You `dynamicColorScheme()` — Snap Yellow is an intentionally aggressive fixed brand signal flare, and the snap-type colors (red/purple/blue/green) are a semantic at-a-glance language. Both must be identical regardless of wallpaper.