designmd-forge 1.2.0

package/dist/data/designs/ios-bereal-android.md

@@ -0,0 +1,392 @@
+# BeReal (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports BeReal'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 (BeReal's pure-black darkroom, the monochrome no-brand-hue stance, the dual-lens composite, RealMoji reactions) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `CameraX` instead of AVFoundation, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, [Coil](https://coil-kt.github.io/coil/) `2.6+` for images, and `CameraX` for the dual capture.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/BeRealColors.kt
+import androidx.compose.ui.graphics.Color
+
+object BeRealColors {
+    // Canvas & Surfaces
+    val Canvas   = Color(0xFF000000)
+    val Surface1 = Color(0xFF1C1C1E)
+    val Surface2 = Color(0xFF2C2C2E)
+    val Divider  = Color(0xFF2C2C2E)
+
+    // Text
+    val TextPrimary   = Color(0xFFFFFFFF)
+    val TextSecondary = Color(0xFF8E8E93)
+    val TextTertiary  = Color(0xFF636366)
+
+    // Accent — intentionally monochrome, no brand hue
+    val Accent   = Color(0xFFFFFFFF)
+    val OnAccent = Color(0xFF000000)
+
+    // Semantic
+    val Late   = Color(0xFFFFD60A)
+    val Error  = Color(0xFFFF453A)
+    val Online = Color(0xFF30D158)
+}
+```
+
+Wire it into a Material 3 `darkColorScheme`. BeReal is dark-only by design — the photographic darkroom metaphor depends on true black; do **not** provide a light scheme.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+
+private val BeRealScheme = darkColorScheme(
+    primary        = BeRealColors.Accent,
+    onPrimary      = BeRealColors.OnAccent,    // black on white — intentional inversion
+    background     = BeRealColors.Canvas,
+    onBackground   = BeRealColors.TextPrimary,
+    surface        = BeRealColors.Surface1,
+    onSurface      = BeRealColors.TextPrimary,
+    surfaceVariant = BeRealColors.Surface2,
+    outline        = BeRealColors.Divider,
+    error          = BeRealColors.Error,
+)
+
+@Composable
+fun BeRealTheme(content: @Composable () -> Unit) =
+    MaterialTheme(colorScheme = BeRealScheme, typography = BeRealTypography, content = content)
+```
+
+## 2. Typography
+
+BeReal ships **no custom typeface** — it uses the system font. On Android that is Roboto; reference `FontFamily.Default` so there is nothing to drop in `res/font/`.
+
+```kotlin
+// ui/theme/BeRealType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+private val Sys = FontFamily.Default   // BeReal uses the system font, no custom face
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object BeRealText {
+    val Timer        = TextStyle(Sys, fontWeight = FontWeight.Bold,     fontSize = 24.sp, lineHeight = 26.sp) // use tabular figures via FontFeatureSettings("tnum")
+    val ScreenTitle  = TextStyle(Sys, fontWeight = FontWeight.Bold,     fontSize = 22.sp, lineHeight = 26.sp, letterSpacing = (-0.3).sp)
+    val Username     = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 20.sp, letterSpacing = (-0.2).sp)
+    val Caption      = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 22.sp)
+    val Body         = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 21.sp)
+    val CommentAuthor= TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 18.sp)
+    val Meta         = TextStyle(Sys, fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 17.sp)
+    val LateBadge    = TextStyle(Sys, fontWeight = FontWeight.Bold,     fontSize = 12.sp, lineHeight = 14.sp, letterSpacing = 0.2.sp)
+    val Button       = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 20.sp, letterSpacing = (-0.2).sp)
+    val Tab          = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 10.sp, lineHeight = 12.sp)
+    val Retake       = TextStyle(Sys, fontWeight = FontWeight.SemiBold, fontSize = 11.sp, lineHeight = 13.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the system-font, dark identity
+val BeRealTypography = Typography(
+    headlineMedium = BeRealText.ScreenTitle,
+    titleMedium    = BeRealText.Username,
+    bodyMedium     = BeRealText.Body,
+    labelSmall     = BeRealText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Dual-Lens Composite Card (the signature)
+
+```kotlin
+import androidx.compose.foundation.gestures.detectDragGestures
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.unit.dp
+import androidx.compose.foundation.shape.RoundedCornerShape
+import coil.compose.AsyncImage
+
+enum class SelfieCorner { TopStart, TopEnd, BottomStart, BottomEnd }
+
+@Composable
+fun DualLensCard(backUrl: String, frontUrl: String, modifier: Modifier = Modifier) {
+    var corner by remember { mutableStateOf(SelfieCorner.TopStart) }
+    var lifted by remember { mutableStateOf(false) }
+    val scale by androidx.compose.animation.core.animateFloatAsState(
+        if (lifted) 1.05f else 1f,
+        androidx.compose.animation.core.spring(dampingRatio = 0.75f, stiffness = 300f),
+        label = "selfieLift",
+    )
+
+    Box(
+        modifier
+            .fillMaxWidth()
+            .aspectRatio(3f / 4f)
+            .shadow(24.dp, RoundedCornerShape(18.dp), spotColor = androidx.compose.ui.graphics.Color.Black.copy(0.6f))
+            .clip(RoundedCornerShape(18.dp)),
+    ) {
+        AsyncImage(model = backUrl, contentDescription = "BeReal back photo",
+            modifier = Modifier.fillMaxSize())
+
+        AsyncImage(
+            model = frontUrl,
+            contentDescription = "BeReal selfie",
+            modifier = Modifier
+                .align(corner.toAlignment())
+                .padding(12.dp)
+                .size(100.dp, 134.dp)
+                .scale(scale)
+                .shadow(if (lifted) 18.dp else 0.dp, RoundedCornerShape(14.dp))
+                .clip(RoundedCornerShape(14.dp))
+                .pointerInput(Unit) {
+                    detectDragGestures(
+                        onDragStart = { lifted = true },
+                        onDragEnd = {
+                            lifted = false
+                            corner = SelfieCorner.entries.random()
+                        },
+                    ) { _, _ -> }
+                },
+        )
+    }
+}
+
+private fun SelfieCorner.toAlignment() = when (this) {
+    SelfieCorner.TopStart    -> Alignment.TopStart
+    SelfieCorner.TopEnd      -> Alignment.TopEnd
+    SelfieCorner.BottomStart -> Alignment.BottomStart
+    SelfieCorner.BottomEnd   -> Alignment.BottomEnd
+}
+```
+
+### Capture Button (Dual Shutter)
+
+```kotlin
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+@Composable
+fun CaptureButton(onCapture: () -> Unit, modifier: Modifier = Modifier) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val haptics = LocalHapticFeedback.current
+    val scope = rememberCoroutineScope()
+    val scale by androidx.compose.animation.core.animateFloatAsState(if (pressed) 0.92f else 1f, label = "capScale")
+    val disc  by androidx.compose.animation.core.animateDpAsState(if (pressed) 64.dp else 0.dp, label = "capDisc")
+
+    Box(
+        modifier
+            .size(76.dp)
+            .scale(scale)
+            .clip(androidx.compose.foundation.shape.CircleShape)
+            .border(4.dp, BeRealColors.Accent, androidx.compose.foundation.shape.CircleShape)
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress)   // heavy ≈ back camera
+                onCapture()
+                scope.launch {
+                    delay(500)
+                    haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // soft ≈ front
+                }
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        Box(Modifier.size(disc).clip(androidx.compose.foundation.shape.CircleShape).background(BeRealColors.Accent))
+    }
+}
+```
+
+### Primary / Secondary Button
+
+```kotlin
+enum class BeRealBtn { Filled, Outline }
+
+@Composable
+fun BeRealButton(text: String, onClick: () -> Unit, style: BeRealBtn = BeRealBtn.Filled, modifier: Modifier = Modifier) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by androidx.compose.animation.core.animateFloatAsState(if (pressed) 0.97f else 1f, label = "btn")
+    val filled = style == BeRealBtn.Filled
+
+    Box(
+        modifier
+            .scale(scale)
+            .clip(androidx.compose.foundation.shape.CircleShape)
+            .then(
+                if (filled) Modifier.background(BeRealColors.Accent)
+                else Modifier.border(1.dp, BeRealColors.TextPrimary.copy(alpha = 0.4f), androidx.compose.foundation.shape.CircleShape)
+            )
+            .clickable(interaction, indication = null, onClick = onClick)
+            .padding(horizontal = if (filled) 32.dp else 24.dp, vertical = if (filled) 14.dp else 12.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(text, style = BeRealText.Button,
+            color = if (filled) BeRealColors.OnAccent else BeRealColors.TextPrimary)
+    }
+}
+```
+
+### Countdown Banner & Late Badge
+
+```kotlin
+import androidx.compose.ui.text.font.FontFeature
+import androidx.compose.ui.text.style.TextAlign
+
+@Composable
+fun CountdownBanner(remaining: String, modifier: Modifier = Modifier) {
+    // Android has no live blur — use a 60%-opaque black pill with the amber border
+    Box(
+        modifier
+            .fillMaxWidth()
+            .clip(androidx.compose.foundation.shape.CircleShape)
+            .background(androidx.compose.ui.graphics.Color.Black.copy(alpha = 0.6f))
+            .border(1.dp, BeRealColors.Late.copy(alpha = 0.4f), androidx.compose.foundation.shape.CircleShape)
+            .padding(horizontal = 20.dp, vertical = 12.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(
+            "⏰ $remaining left to capture a BeReal",
+            style = BeRealText.Timer.copy(fontFeatureSettings = "tnum"),  // tabular digits
+            color = BeRealColors.Late,
+            textAlign = TextAlign.Center,
+        )
+    }
+}
+
+@Composable
+fun LateBadge(text: String) =
+    Text("⚠ $text", style = BeRealText.LateBadge, color = BeRealColors.Late)
+```
+
+### RealMoji Reaction Cluster
+
+```kotlin
+@Composable
+fun RealMojiCluster(selfieUrls: List<String>, onAdd: () -> Unit, modifier: Modifier = Modifier) {
+    Row(modifier, verticalAlignment = Alignment.CenterVertically) {
+        selfieUrls.forEachIndexed { i, url ->
+            AsyncImage(
+                model = url,
+                contentDescription = "Reaction",          // never a count — reactions are faces
+                modifier = Modifier
+                    .offset(x = if (i == 0) 0.dp else (-8 * i).dp)  // overlap by 8dp
+                    .size(30.dp)
+                    .clip(androidx.compose.foundation.shape.CircleShape)
+                    .border(2.dp, androidx.compose.ui.graphics.Color.Black, androidx.compose.foundation.shape.CircleShape),
+            )
+        }
+        Box(
+            Modifier
+                .padding(start = 12.dp)
+                .size(30.dp)
+                .clip(androidx.compose.foundation.shape.CircleShape)
+                .border(1.5.dp, BeRealColors.TextPrimary.copy(alpha = 0.6f), androidx.compose.foundation.shape.CircleShape)
+                .clickable(onClick = onAdd),
+            contentAlignment = Alignment.Center,
+        ) { Text("+", style = BeRealText.Button, color = BeRealColors.TextPrimary) }
+    }
+}
+```
+
+## 4. Distinctive System — Selfie Corner-Snap in Compose
+
+The front selfie inset is the soul of BeReal. `DualLensCard` (above) wires `detectDragGestures`: drag start sets `lifted = true` (scale animates to 1.05 via `spring(dampingRatio = 0.75f)`), drag end snaps `corner` to a `SelfieCorner` and the `Alignment` recomposes. A non-drag tap on the selfie swaps which camera is full-bleed — animate a `Crossfade` between the two `AsyncImage`s. Keep the snap spring at `dampingRatio = 0.75f, stiffness = 300f` to match the iOS feel.
+
+## 5. Bottom Navigation (Tab Bar)
+
+Use Material 3 `NavigationBar`. BeReal's iOS tab bar is opaque true-black with **no blur** — Android has no first-class live blur anyway, so a solid `#000000` surface is an exact match. Active tint is **white** (BeReal has no brand hue); kill the Material indicator pill.
+
+```kotlin
+@Composable
+fun BeRealBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = BeRealColors.Canvas, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Friends"  to Icons.Filled.People,
+            "Official" to Icons.Filled.Star,
+            "Search"   to Icons.Filled.Search,
+            "Profile"  to Icons.Filled.AccountCircle,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(26.dp)) },
+                label = { Text(label, style = BeRealText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = BeRealColors.TextPrimary,         // white, no brand hue
+                    selectedTextColor   = BeRealColors.TextPrimary,
+                    unselectedIconColor = BeRealColors.TextPrimary.copy(alpha = 0.45f),
+                    unselectedTextColor = BeRealColors.TextPrimary.copy(alpha = 0.45f),
+                    indicatorColor = androidx.compose.ui.graphics.Color.Transparent, // BeReal has no pill
+                ),
+            )
+        }
+    }
+}
+```
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Dual-shutter capture | white-flash overlay (`AnimatedVisibility` 120ms) + `HapticFeedbackType.LongPress`, then `delay(500)` + soft haptic for the front lens |
+| Camera flip | `graphicsLayer { rotationY = … }` animated 0 → 180 over 350ms `tween`, light haptic |
+| Selfie drag-snap | `animateFloatAsState`/alignment recompose with `spring(dampingRatio = 0.75f, stiffness = 300f)` |
+| RealMoji pop | `Animatable` keyframes 0 → 1.2 → 1 over 280ms |
+| Feed un-blur | friends' cards `Modifier.blur(30.dp)` → `0.dp` once you post, `animateDpAsState` 400ms |
+
+```kotlin
+// Camera flip
+val rot by animateFloatAsState(if (flipped) 180f else 0f, tween(350), label = "flip")
+Box(Modifier.graphicsLayer { rotationY = rot; cameraDistance = 12f * density }) { /* viewfinder */ }
+
+// RealMoji pop
+val pop = remember { Animatable(0f) }
+LaunchedEffect(Unit) {
+    pop.animateTo(1.2f, tween(160)); pop.animateTo(1f, spring())
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. For the heavy capture impact use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.LONG_PRESS)` or a `Vibrator` `VibrationEffect.createOneShot(20, 255)`; follow with a lighter `CONTEXT_CLICK` ~500ms later for the front camera.
+
+## 7. Icons
+
+BeReal uses simple glyphs; the closest first-party set is `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Camera flip | `arrow.triangle.2.circlepath.camera` | `Icons.Filled.FlipCameraIos` |
+| Flash | `bolt.fill` / `bolt.slash.fill` | `Icons.Filled.FlashOn` / `Icons.Filled.FlashOff` |
+| Late badge | `exclamationmark.triangle.fill` | `Icons.Filled.Warning` |
+| Add RealMoji | `plus` | `Icons.Filled.Add` |
+| Comments | `bubble.left` | `Icons.Outlined.ChatBubbleOutline` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| More | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Friends (tab) | `person.2.fill` | `Icons.Filled.People` |
+| Official (tab) | `star.circle.fill` | `Icons.Filled.Star` |
+| Search (tab) | `magnifyingglass` | `Icons.Filled.Search` |
+| Profile (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
+| BTS video | `play.rectangle.on.rectangle` | `Icons.Filled.Collections` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `CameraX` dual capture + modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; the pure-black canvas wants light-content system bars via `WindowCompat`. Let the dual-lens card draw edge-to-edge horizontally (`Modifier.fillMaxWidth()`, no inset) while keeping the tab bar inside `systemBars` insets.
+- **Font scaling**: `sp` honors the user's font scale — keep it on usernames, captions, comments. Pin the countdown (`fontFeatureSettings = "tnum"` and a fixed size), late badge, retake count, and tab labels by deriving from `dp` or a `CompositionLocalProvider(LocalDensity …, fontScale = 1f)`.
+- **TalkBack**: set `contentDescription` on the dual-lens card ("jordan's BeReal, 2 hours late"); mark the selfie as a draggable element with a custom `stateDescription`; announce RealMojis as "Reaction from <name>" and **never** a numeric count — there is none.
+- **Touch targets**: Material guidance is 48.dp minimum. The 76.dp capture button is well clear; give the 30.dp RealMoji `+` a 48.dp hit area via padding.
+- **Contrast**: `#8E8E93` on `#000000` passes WCAG AA at 13sp+. The amber `#FFD60A` on black is high-contrast — reserve it for lateness/urgency only.
+- **Dynamic color**: do **not** enable Material You `dynamicDarkColorScheme()` — BeReal's identity is the fixed pure-black canvas and the deliberate *absence* of a brand hue, regardless of wallpaper.

package/dist/data/designs/ios-bereal-expo.md

@@ -0,0 +1,299 @@
+# BeReal (iOS) — Expo / React Native Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates BeReal's visual language into paste-ready Expo / React Native code: a design-token module, themed components, and Reanimated snippets.
+
+Assumes Expo SDK 51+ with `expo-router`, `expo-font`, `expo-haptics`, `expo-blur`, and `react-native-reanimated` v3.
+
+## 1. Color Tokens
+
+```ts
+// theme/colors.ts
+export const colors = {
+  canvas:   '#000000',
+  surface1: '#1C1C1E',
+  surface2: '#2C2C2E',
+  divider:  '#2C2C2E',
+
+  textPrimary:   '#FFFFFF',
+  textSecondary: '#8E8E93',
+  textTertiary:  '#636366',
+
+  accent:    '#FFFFFF',  // no brand hue — white is the verb
+  onAccent:  '#000000',
+
+  late:    '#FFD60A',
+  error:   '#FF453A',
+  online:  '#30D158',
+} as const;
+
+export type BeRealColor = keyof typeof colors;
+```
+
+## 2. Typography
+
+BeReal uses the system font (SF Pro on iOS) — no custom face to load. Use `System` and enable tabular figures on the countdown via `fontVariant`.
+
+```ts
+// theme/typography.ts
+import type { TextStyle } from 'react-native';
+
+const base = { color: '#FFFFFF' } satisfies TextStyle;
+
+export const typography = {
+  timer:        { ...base, fontSize: 24, lineHeight: 26, fontWeight: '700',
+                  fontVariant: ['tabular-nums'] as const },
+  screenTitle:  { ...base, fontSize: 22, lineHeight: 26, fontWeight: '700', letterSpacing: -0.3 },
+  username:     { ...base, fontSize: 17, lineHeight: 20, fontWeight: '600', letterSpacing: -0.2 },
+  caption:      { ...base, fontSize: 16, lineHeight: 22, fontWeight: '400' },
+  body:         { ...base, fontSize: 15, lineHeight: 21, fontWeight: '400' },
+  commentAuthor:{ ...base, fontSize: 14, lineHeight: 18, fontWeight: '600' },
+  meta:         {           fontSize: 13, lineHeight: 17, fontWeight: '400', color: '#8E8E93' },
+  lateBadge:    {           fontSize: 12, lineHeight: 14, fontWeight: '700', color: '#FFD60A', letterSpacing: 0.2 },
+  button:       {           fontSize: 17, lineHeight: 20, fontWeight: '600', letterSpacing: -0.2 },
+  tab:          {           fontSize: 10, lineHeight: 12, fontWeight: '600' },
+  retake:       { ...base, fontSize: 11, lineHeight: 13, fontWeight: '600' },
+} satisfies Record<string, TextStyle>;
+```
+
+## 3. Signature Components
+
+### Dual-Lens Composite Card (the signature)
+
+```tsx
+// components/DualLensCard.tsx
+import { Image, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+
+const CORNERS = [
+  { top: 12, left: 12 }, { top: 12, right: 12 },
+  { bottom: 12, left: 12 }, { bottom: 12, right: 12 },
+] as const;
+
+export function DualLensCard({ backUri, frontUri }: { backUri: string; frontUri: string }) {
+  const lift = useSharedValue(1);
+  const corner = useSharedValue(0);
+
+  const longPress = Gesture.LongPress().minDuration(200)
+    .onStart(() => (lift.value = withSpring(1.05)));
+  const drag = Gesture.Pan()
+    .onEnd(() => {
+      lift.value = withSpring(1);
+      corner.value = Math.floor(Math.random() * 4);
+    });
+  const gesture = Gesture.Simultaneous(longPress, drag);
+
+  const selfieStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: lift.value }],
+    ...CORNERS[corner.value],
+  }));
+
+  return (
+    <View style={{ width: '100%', aspectRatio: 3 / 4, borderRadius: 18,
+                   shadowColor: '#000', shadowOpacity: 0.6, shadowRadius: 24,
+                   shadowOffset: { width: 0, height: 8 } }}>
+      <Image source={{ uri: backUri }} style={{ flex: 1, borderRadius: 18 }} />
+      <GestureDetector gesture={gesture}>
+        <Animated.View style={[{ position: 'absolute', width: 100, height: 134,
+          borderRadius: 14, borderWidth: 2, borderColor: '#000', overflow: 'hidden' }, selfieStyle]}>
+          <Image source={{ uri: frontUri }} style={{ flex: 1 }} />
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+}
+```
+
+### Capture Button (Dual Shutter)
+
+```tsx
+// components/CaptureButton.tsx
+import { Pressable } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import * as Haptics from 'expo-haptics';
+
+export function CaptureButton({ onCapture }: { onCapture: () => void }) {
+  const scale = useSharedValue(1);
+  const fill  = useSharedValue(0);
+  const ring  = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
+  const disc  = useAnimatedStyle(() => ({ width: fill.value, height: fill.value }));
+
+  return (
+    <Pressable
+      onPressIn={() => { scale.value = withSpring(0.92); fill.value = withSpring(64); }}
+      onPressOut={() => { scale.value = withSpring(1); fill.value = withSpring(0); }}
+      onPress={async () => {
+        await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);     // back camera
+        onCapture();
+        setTimeout(() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft), 500); // front
+      }}
+    >
+      <Animated.View style={[{ width: 76, height: 76, borderRadius: 38,
+        borderWidth: 4, borderColor: '#FFF', alignItems: 'center', justifyContent: 'center' }, ring]}>
+        <Animated.View style={[{ backgroundColor: '#FFF', borderRadius: 32 }, disc]} />
+      </Animated.View>
+    </Pressable>
+  );
+}
+```
+
+### Primary / Secondary Button
+
+```tsx
+// components/BeRealButton.tsx
+import { Pressable, Text } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function BeRealButton({
+  title, variant = 'filled', onPress,
+}: { title: string; variant?: 'filled' | 'outline'; onPress: () => void }) {
+  const filled = variant === 'filled';
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        paddingVertical: filled ? 14 : 12,
+        paddingHorizontal: filled ? 32 : 24,
+        borderRadius: 500,
+        backgroundColor: filled ? colors.accent : 'transparent',
+        borderWidth: filled ? 0 : 1,
+        borderColor: 'rgba(255,255,255,0.4)',
+        opacity: pressed ? 0.85 : 1,
+        transform: [{ scale: pressed ? 0.97 : 1 }],
+      })}
+    >
+      <Text style={[typography.button, { color: filled ? colors.onAccent : '#fff' }]}>{title}</Text>
+    </Pressable>
+  );
+}
+```
+
+### Countdown Banner & Late Badge
+
+```tsx
+import { Text, View } from 'react-native';
+import { BlurView } from 'expo-blur';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function CountdownBanner({ remaining }: { remaining: string }) {
+  return (
+    <BlurView intensity={40} tint="dark"
+      style={{ borderRadius: 500, overflow: 'hidden',
+               borderWidth: 1, borderColor: 'rgba(255,214,10,0.4)',
+               paddingVertical: 12, paddingHorizontal: 20, backgroundColor: 'rgba(0,0,0,0.5)' }}>
+      <Text style={[typography.timer, { textAlign: 'center' }]}>⏰ {remaining} left to capture a BeReal</Text>
+    </BlurView>
+  );
+}
+
+export function LateBadge({ text }: { text: string }) {
+  return <Text style={typography.lateBadge}>⚠ {text}</Text>;
+}
+```
+
+### RealMoji Reaction Cluster
+
+```tsx
+// components/RealMojiCluster.tsx — selfie photos, never emoji, never counts
+import { Image, Pressable, Text, View } from 'react-native';
+
+export function RealMojiCluster({ selfies, onAdd }: { selfies: string[]; onAdd: () => void }) {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      {selfies.map((uri, i) => (
+        <Image key={i} source={{ uri }}
+          style={{ width: 30, height: 30, borderRadius: 15, borderWidth: 2,
+                   borderColor: '#000', marginLeft: i === 0 ? 0 : -8 }} />
+      ))}
+      <Pressable onPress={onAdd}
+        style={{ width: 30, height: 30, borderRadius: 15, borderWidth: 1.5,
+                 borderStyle: 'dashed', borderColor: 'rgba(255,255,255,0.6)',
+                 alignItems: 'center', justifyContent: 'center', marginLeft: 12 }}>
+        <Text style={{ color: '#fff', fontSize: 14, fontWeight: '600' }}>+</Text>
+      </Pressable>
+    </View>
+  );
+}
+```
+
+## 4. Distinctive System — Selfie Corner-Snap
+
+The front selfie inset is the soul of BeReal. The `DualLensCard` above wires the full long-press → drag → spring-snap. Snap spring: `withSpring(target, { damping: 14, stiffness: 180 })`. A tap (not drag) on the selfie swaps which camera is full-bleed via a cross-fade — drive a shared `progress` value between the two `Image`s.
+
+## 5. Tab Bar
+
+BeReal's tab bar is opaque true-black — **no blur**, the canvas continues. Active tint is white.
+
+```tsx
+// app/(tabs)/_layout.tsx
+import { Tabs } from 'expo-router';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { colors } from '../../theme/colors';
+
+export default function TabsLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: '#FFFFFF',
+        tabBarInactiveTintColor: 'rgba(255,255,255,0.45)',
+        tabBarStyle: { backgroundColor: '#000000', borderTopColor: 'rgba(255,255,255,0.08)', borderTopWidth: 0.5 },
+        tabBarLabelStyle: { fontSize: 10, fontWeight: '600' },
+      }}
+    >
+      <Tabs.Screen name="index"    options={{ title: 'Friends',  tabBarIcon: ({ color }) => <Ionicons name="people"      size={26} color={color} /> }} />
+      <Tabs.Screen name="official" options={{ title: 'Official', tabBarIcon: ({ color }) => <Ionicons name="star"        size={26} color={color} /> }} />
+      <Tabs.Screen name="search"   options={{ title: 'Search',   tabBarIcon: ({ color }) => <Ionicons name="search"      size={26} color={color} /> }} />
+      <Tabs.Screen name="profile"  options={{ title: 'Profile',  tabBarIcon: ({ color }) => <Ionicons name="person-circle" size={26} color={color} /> }} />
+    </Tabs>
+  );
+}
+```
+
+## 6. Motion
+
+```tsx
+// Dual-shutter capture: heavy then soft ~0.5s later (see CaptureButton)
+await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+setTimeout(() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft), 500);
+
+// Camera flip: 180° rotateY over 0.35s
+const flip = useSharedValue(0);
+const flipStyle = useAnimatedStyle(() => ({ transform: [{ rotateY: `${flip.value}deg` }] }));
+flip.value = withTiming(flipped ? 180 : 0, { duration: 350 });
+Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+// RealMoji pop: 0 → 1.2 → 1 over 280ms
+scale.value = withSequence(withTiming(1.2, { duration: 160 }), withSpring(1));
+
+// Friends' BeReals blurred until you post — animate a BlurView intensity 30 → 0 over 0.4s
+```
+
+## 7. Icon Library
+
+Use `@expo/vector-icons` (Ionicons). Map to BeReal's SF Symbol equivalents:
+
+| Purpose | SF Symbol (iOS) | Ionicons |
+|---------|-----------------|----------|
+| Camera flip | `arrow.triangle.2.circlepath.camera` | `camera-reverse` |
+| Flash | `bolt.fill` / `bolt.slash.fill` | `flash` / `flash-off` |
+| Late badge | `exclamationmark.triangle.fill` | `warning` |
+| Add RealMoji | `plus` | `add` |
+| Comments | `bubble.left` | `chatbubble-outline` |
+| Share | `square.and.arrow.up` | `share-outline` |
+| More | `ellipsis` | `ellipsis-horizontal` |
+| Friends (tab) | `person.2.fill` | `people` |
+| Official (tab) | `star.circle.fill` | `star` |
+| Search (tab) | `magnifyingglass` | `search` |
+| Profile (tab) | `person.crop.circle` | `person-circle` |
+| BTS video | `play.rectangle.on.rectangle` | `albums` |
+
+## 8. Platform Notes
+
+- **iOS-only feel**: BeReal's tab bar is opaque true-black with no blur — do **not** add `expo-blur` to the tab bar; only the countdown pill uses a `BlurView`. Android matches naturally (solid black).
+- **Status bar**: `<StatusBar style="light" />` from `expo-status-bar` globally — the pure-black canvas requires light content
+- **Safe area**: wrap screens in `SafeAreaView` from `react-native-safe-area-context`; the dual-lens card intentionally goes edge-to-edge horizontally (ignore left/right insets for it)
+- **Tabular numerals**: set `fontVariant: ['tabular-nums']` on the countdown so `2:00 → 1:59` doesn't shift; pin `allowFontScaling={false}` on the timer
+- **Camera**: use `expo-camera` with `facing` toggled to capture both lenses in sequence (~0.5s apart) — the dual exposure is the product
+- **Accessibility**: add `accessibilityRole="button"` + `accessibilityLabel="Capture BeReal"` on the shutter; group the dual-lens card text and never expose a reaction count (there is none)