@momo-kits/native-kits 0.162.2-test.2 → 0.162.2-test.3-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Context.kt

@@ -0,0 +1,105 @@
+package vn.momo.kits.application
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.staticCompositionLocalOf
+import vn.momo.kits.components.TrustBannerData
+
+@Immutable
+data class FeatureFlags(
+    val showBaseLineDebug: Boolean? = false,
+)
+
+@Immutable
+data class KitConfig(
+    val trustBanner: TrustBannerData? = null,
+    val headerBar: String? = null,
+    val headerGradient: String? = null,
+)
+
+@Immutable
+data class MiniAppContext(
+    val appIcon: String = "",
+    val appName: Any? = null,
+    val appId: String = "",
+    val appCode: String = "",
+    val description: Any? = null,
+    val support: Map<String, Any?> = emptyMap(),
+    val toolkitConfig: Map<String, Any?> = emptyMap(),
+    val providerId: String = "",
+    val permissions: List<Map<String, Any>>? = emptyList(),
+    val features: FeatureFlags? = null,
+) {
+    companion object {
+
+        fun toMap(context: MiniAppContext?): Map<String, Any?> = mapOf(
+            "icon"          to (context?.appIcon ?: ""),
+            "name"          to context?.appName,
+            "appId"         to (context?.appId ?: ""),
+            "code"          to (context?.appCode ?: ""),
+            "description"   to (context?.description ?: ""),
+            "support"       to (context?.support ?: emptyMap()),
+            "toolkitConfig" to (context?.toolkitConfig ?: emptyMap()),
+            "providerId"    to (context?.providerId ?: ""),
+            "permissions"   to (context?.permissions ?: emptyList()),
+        )
+
+        fun merge(parent: MiniAppContext?, child: MiniAppContext?): MiniAppContext? {
+            if (parent == null && child == null) return null
+            if (parent == null) return child
+            if (child == null) return parent
+
+            return MiniAppContext(
+                appIcon = parent.appIcon.ifBlank { child.appIcon },
+                appName = parent.appName ?: child.appName,
+                appId = parent.appId.ifBlank { child.appId },
+                appCode = parent.appCode.ifBlank { child.appCode },
+                description = parent.description ?: child.description,
+                support = mergeMaps(parent.support, child.support),
+                toolkitConfig = mergeMaps(parent.toolkitConfig, child.toolkitConfig),
+                providerId = parent.providerId.ifBlank { child.providerId },
+                permissions = if (!parent.permissions.isNullOrEmpty()) parent.permissions else child.permissions,
+                features = mergeFeatureFlags(parent.features, child.features),
+            )
+        }
+
+        private fun mergeMaps(parent: Map<String, Any?>, child: Map<String, Any?>): Map<String, Any?> {
+            return child + parent
+        }
+
+        private fun mergeFeatureFlags(parent: FeatureFlags?, child: FeatureFlags?): FeatureFlags? {
+            if (parent == null && child == null) return null
+            if (parent == null) return child
+            if (child == null) return parent
+
+            return FeatureFlags(
+                showBaseLineDebug = parent.showBaseLineDebug ?: child.showBaseLineDebug
+            )
+        }
+    }
+}
+
+@Immutable
+data class ComponentInformation(
+    val componentName: String? = null,
+    val componentId: String? = null,
+    val params: Map<String,Any?>? = null,
+    val action: String? = null
+)
+
+var IsShowBaseLineDebug = false
+
+val ApplicationContext = staticCompositionLocalOf<MiniAppContext?> {
+    null
+}
+
+val AppConfig = staticCompositionLocalOf<KitConfig?> {
+    null
+}
+
+val AppLanguage = staticCompositionLocalOf<String?> {
+    null
+}
+
+val LocalComponentInformation = staticCompositionLocalOf<ComponentInformation?> {
+    null
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/application/FloatingButton.kt

@@ -0,0 +1,201 @@
+package vn.momo.kits.application
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandHorizontally
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkHorizontally
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.AlertDialogDefaults.shape
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.FloatingActionButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.collectLatest
+import kotlinx.coroutines.launch
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Typography
+
+enum class FABSize {
+    SMALL,
+    DEFAULT,
+}
+
+enum class FABPosition {
+    END,
+    CENTER,
+}
+
+data class FabProps(
+    val icon: String,
+    val iconColor: Color? = null,
+    val label: String? = null,
+    val onClick: () -> Unit,
+    val size: FABSize = FABSize.DEFAULT,
+    val bottom: Dp? = null,
+    val scrollState: ScrollState? = null,
+    val position: FABPosition? = FABPosition.END,
+)
+
+@Deprecated("Use vn.momo.kits.navigation.FloatingButton instead", ReplaceWith("vn.momo.kits.navigation.FloatingButton"))
+@Composable
+fun FloatingButton(
+    scrollPosition: Int,
+    bottom: Dp,
+    onClick: () -> Unit,
+    containerColor: Color,
+    contentColor: Color = containerColor,
+    icon: String,
+    iconColor: Color? = null,
+    text: String? = null,
+    elevation: androidx.compose.material3.FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(
+        4.dp,
+        4.dp,
+        4.dp,
+        4.dp
+    ),
+    size: FABSize = FABSize.DEFAULT,
+    position: FABPosition = FABPosition.END,
+    keyboardSize: Dp = 0.dp,
+) {
+    val scrollPositionStateFlow = remember { MutableStateFlow(scrollPosition) }
+    var lastScrollPosition by rememberSaveable { mutableStateOf(0) }
+    val coroutineScope = rememberCoroutineScope()
+    var isExpanded by rememberSaveable { mutableStateOf(false) }
+
+    val startPadding = if (isExpanded) 12.dp else 0.dp
+    val endPadding = if (isExpanded) 12.dp else 0.dp
+    val widthIn = if ((size === FABSize.SMALL)) 36.dp else 48.dp
+
+
+    val width = animateDpAsState(
+        targetValue = if (isExpanded && text != null) 80.dp else widthIn,
+        animationSpec = tween(
+            durationMillis = 200,
+            easing = CubicBezierEasing(0.2f, 0.2f, 0.2f, 0.2f),
+        )
+    )
+
+    LaunchedEffect(text) {
+        if (text != null) {
+            coroutineScope.launch {
+                scrollPositionStateFlow
+                    .collectLatest { debouncedScrollPosition ->
+                        isExpanded = debouncedScrollPosition > lastScrollPosition
+                        delay(300)
+                        lastScrollPosition = debouncedScrollPosition
+
+                    }
+            }
+        }
+    }
+
+    LaunchedEffect(scrollPosition) {
+        scrollPositionStateFlow.value = scrollPosition
+    }
+
+    Box(
+        Modifier
+            .fillMaxSize()
+            .padding(end = 12.dp, bottom = bottom)
+            .offset(y = -keyboardSize)
+            .background(Color.Transparent)
+            .zIndex(10f),
+        contentAlignment = if (position == FABPosition.END) Alignment.BottomEnd else Alignment.BottomCenter,
+    ) {
+        FloatingActionButton(
+            onClick = onClick,
+            shape = shape,
+            containerColor = containerColor,
+            contentColor = contentColor,
+            elevation = elevation,
+            interactionSource = remember { MutableInteractionSource() },
+            modifier = Modifier
+                .sizeIn(minWidth = width.value)
+                .height(widthIn)
+        ) {
+            Row(
+                modifier = Modifier.padding(start = startPadding, end = endPadding),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = if (isExpanded) Arrangement.Start else Arrangement.Center
+            ) {
+                Icon(
+                    icon,
+                    size = if (size === FABSize.SMALL) 12.dp else 24.dp,
+                    color = iconColor ?: Color.White
+                )
+                AnimatedVisibility(
+                    visible = isExpanded,
+                    enter = ExtendedFabExpandAnimation,
+                    exit = ExtendedFabCollapseAnimation,
+                ) {
+                    Row {
+                        Spacer(Modifier.width(12.dp))
+                        Text(
+                            text ?: "",
+                            color = Color.White,
+                            style = Typography.actionDefaultBold
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+private val ExtendedFabCollapseAnimation = fadeOut(
+    animationSpec = tween(
+        durationMillis = 800,
+        easing = CubicBezierEasing(0.0f, 0.0f, 1.0f, 1.0f),
+    )
+) + shrinkHorizontally(
+    animationSpec = tween(
+        durationMillis = 500,
+        easing = CubicBezierEasing(0.2f, 0.0f, 0.0f, 1.0f),
+    ),
+    shrinkTowards = Alignment.Start,
+)
+
+private val ExtendedFabExpandAnimation = fadeIn(
+    animationSpec = tween(
+        durationMillis = 200,
+        delayMillis = 100,
+        easing = CubicBezierEasing(0.0f, 0.0f, 1.0f, 1.0f),
+    ),
+) + expandHorizontally(
+    animationSpec = tween(
+        durationMillis = 500,
+        easing = CubicBezierEasing(0.2f, 0.0f, 0.0f, 1.0f),
+    ),
+    expandFrom = Alignment.Start,
+)

package/compose/src/commonMain/kotlin/vn/momo/kits/application/FontScaleStore.kt

@@ -0,0 +1,91 @@
+package vn.momo.kits.application
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
+import kotlinx.coroutines.launch
+import vn.momo.maxapi.IMaxApi
+
+private const val KEY_USE_DEVICE_FONT_SCALE = "use_device_font_scale"
+private const val KEY_APP_FONT_SCALE = "app_font_scale"
+private const val MIN_APP_FONT_SCALE = 1f
+private const val MAX_APP_FONT_SCALE = 1.5f
+
+/**
+ * Single in-memory mirror of the Observer Storage font-scale source of truth
+ * (keys [KEY_USE_DEVICE_FONT_SCALE] + [KEY_APP_FONT_SCALE]).
+ *
+ * scaleSize() reads this holder directly, so every Compose subtree across all
+ * NavigationContainer roots reacts to a change at once — no per-root wiring.
+ *
+ * [start] subscribes once to storage through the given [IMaxApi]: it seeds the
+ * current value (the observer Flow only replays emissions made after subscribe),
+ * then collects live changes. The subscription lives on its own scope, so it
+ * survives navigation between screens. The caller must pass a real (adapter-backed)
+ * IMaxApi — a NoopMaxApi emits a single error frame, which is ignored here.
+ */
+object FontScaleStore {
+
+    var useDeviceFontScale by mutableStateOf(true)
+        private set
+    var appFontScale by mutableStateOf(1f)
+        private set
+
+    private var started = false
+    private val scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+
+    fun start(maxApi: IMaxApi) {
+        if (started) return
+        started = true
+
+        // Seed current persisted value.
+        maxApi.getDataObserver(KEY_USE_DEVICE_FONT_SCALE) { map ->
+            parseUseDevice(map)?.let { useDeviceFontScale = it }
+        }
+        maxApi.getDataObserver(KEY_APP_FONT_SCALE) { map ->
+            parseScale(map)?.let { appFontScale = it }
+        }
+
+        // Live updates.
+        scope.launch {
+            maxApi.observer(KEY_USE_DEVICE_FONT_SCALE).collect { map ->
+                parseUseDevice(map)?.let { useDeviceFontScale = it }
+            }
+        }
+        scope.launch {
+            maxApi.observer(KEY_APP_FONT_SCALE).collect { map ->
+                parseScale(map)?.let { appFontScale = it }
+            }
+        }
+    }
+
+    /**
+     * Callback map = serialized MaxApiResponse flattened: { status, response, errorCode, ... }.
+     * A stored string scalar arrives under "response" as a String ("1.5" / "false").
+     * Returns null for error frames (e.g. adapter-not-bound) and unset keys.
+     */
+    private fun response(map: Map<String, Any?>?): Any? {
+        if (map == null) return null
+        val errorCode = (map["errorCode"] as? Number)?.toInt() ?: 0
+        if (errorCode != 0) return null
+        return map["response"]
+    }
+
+    private fun parseScale(map: Map<String, Any?>?): Float? {
+        val value = when (val r = response(map)) {
+            is Number -> r.toFloat()
+            is String -> r.toFloatOrNull()
+            else -> null
+        } ?: return null
+        return value.coerceIn(MIN_APP_FONT_SCALE, MAX_APP_FONT_SCALE)
+    }
+
+    private fun parseUseDevice(map: Map<String, Any?>?): Boolean? = when (val r = response(map)) {
+        is Boolean -> r
+        is String -> r.toBooleanStrictOrNull()
+        else -> null
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Header.kt

@@ -0,0 +1,222 @@
+package vn.momo.kits.application
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.map
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.InputSearch
+import vn.momo.kits.components.InputSearchProps
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.utils.getAppStatusBarHeight
+
+data class HeaderColor(val tintIconColor: Color, val backgroundButton: Color, val borderColor: Color)
+fun getHeaderColor(animatedHeader: AnimatedHeader?, opacity: Float, tintColor: Color?, defaultColor: Color): HeaderColor{
+    return if(animatedHeader !== null)
+        if (opacity == 1f || !animatedHeader.isSurface)
+            HeaderColor(
+                tintIconColor = Colors.black_17,
+                backgroundButton = Colors.black_01.copy(alpha = 0.6f),
+                borderColor = Colors.black_20.copy(alpha = 0.2f)
+            )
+        else
+            HeaderColor(
+                tintIconColor = Colors.black_01,
+                backgroundButton = Colors.black_20.copy(alpha = 0.6f),
+                borderColor = Color.Transparent
+            )
+    else
+        if (tintColor == Colors.black_01)
+            HeaderColor(
+                tintIconColor = tintColor,
+                backgroundButton = Colors.black_20.copy(alpha = 0.6f),
+                borderColor = Colors.black_01.copy(alpha = 0.2f)
+            )
+        else
+            HeaderColor(
+                tintIconColor = tintColor ?: defaultColor,
+                backgroundButton = Colors.black_01.copy(alpha = 0.6f),
+                borderColor = Colors.black_20.copy(alpha = 0.2f)
+            )
+}
+
+@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
+@Composable
+fun Header(
+    headerType: HeaderType = HeaderType.DEFAULT,
+    titlePosition: TitlePosition,
+    title: String,
+    headerRight: @Composable (() -> Unit)? = null,
+    goBack: (() -> Unit)? = null,
+    opacity: Float = 1f,
+    animatedHeader: AnimatedHeader? = null,
+    scrollState: Int = 0,
+    inputSearchProps: InputSearchProps? = null,
+    headerRightWidth: Dp = 0.dp,
+    useAnimationSearch: Boolean = false,
+    tintColor: Color? = null
+) {
+    val statusBarHeight = getAppStatusBarHeight()
+    val color = getHeaderColor(animatedHeader, opacity, tintColor, AppTheme.current.colors.text.default)
+    val tintIconColor = color.tintIconColor
+    val backgroundButton = color.backgroundButton
+    val borderColor = color.borderColor
+
+    var colorFraction by remember { mutableStateOf(0f) }
+
+    LaunchedEffect(scrollState) {
+        snapshotFlow { scrollState }
+            .map { (it / 50f).coerceIn(0f, 1f) }
+            .distinctUntilChanged()
+            .collect { fraction -> colorFraction = fraction }
+    }
+    val animations = useHeaderSearchAnimation(
+        opacityAni = opacity,
+        scrollState = scrollState,
+        headerRightWidth = headerRightWidth,
+        isBack = goBack != null
+    )
+
+    val backgroundSearch = animateColor(
+        Colors.black_01,
+        AppTheme.current.colors.background.default,
+        colorFraction
+    )
+
+    val searchAnimationEnable =
+        inputSearchProps != null && useAnimationSearch && headerType == HeaderType.EXTENDED
+    val animatedAlpha by animateFloatAsState(targetValue = opacity, label = "BackgroundAlpha")
+
+    if (headerType != HeaderType.NONE) {
+        BoxWithConstraints(
+            Modifier.height(statusBarHeight + HEADER_HEIGHT.dp)
+                .fillMaxWidth()
+                .conditional(animatedHeader !== null) { background(Color.White.copy(alpha = animatedAlpha)) }
+                .zIndex(10f),
+            contentAlignment = Alignment.BottomCenter
+        ) {
+            Row(
+                modifier = Modifier.height(HEADER_HEIGHT.dp)
+                    .fillMaxWidth()
+                    .padding(horizontal = Spacing.M),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Box {
+                    if (goBack != null) {
+                        Box(
+                            modifier = Modifier
+                                .size(28.dp)
+                                .then(
+                                    Modifier.border(
+                                        0.2.dp,
+                                        borderColor,
+                                        RoundedCornerShape(100)
+                                    )
+                                )
+                                .background(
+                                    backgroundButton,
+                                    RoundedCornerShape(100)
+                                )
+                                .clickable(
+                                    onClick = goBack
+                                )
+                                .padding(Spacing.XS)
+                                .setAutomationId("btn_navigation_back"),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            Icon(
+                                source = "arrow-back",
+                                color = tintIconColor,
+                                size = 20.dp,
+                            )
+                        }
+                    }
+                }
+
+                if (useAnimationSearch || inputSearchProps == null) {
+                    if(headerRight == null){
+                        HeaderRight(opacity = opacity, animatedHeader = animatedHeader, tintColor = tintColor)
+                    } else {
+                        headerRight.invoke()
+                    }
+                }
+            }
+
+            // Title
+            Row(
+                modifier = Modifier.height(HEADER_HEIGHT.dp)
+                    .fillMaxWidth()
+                    .padding(horizontal = Spacing.M),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                if (goBack != null && titlePosition == TitlePosition.LEFT) {
+                    Spacer(Modifier.width(40.dp))
+                }
+                if (inputSearchProps != null && !useAnimationSearch) {
+                    InputSearch(inputSearchProps = inputSearchProps.copy(backgroundColor = backgroundSearch))
+                } else {
+                    Box(
+                        Modifier.weight(1f).graphicsLayer {
+                            alpha = if (useAnimationSearch) {
+                                1f - (opacity)
+                            } else {
+                                1f
+                            }
+                        },
+                        contentAlignment = if (titlePosition == TitlePosition.LEFT) Alignment.TopStart else Alignment.Center
+                    ) {
+                        HeaderTitle(
+                            title = title,
+                            color = tintIconColor,
+                            modifier = Modifier
+                                .setAutomationId("title_navigation_header")
+                                .fillMaxWidth(fraction = if(titlePosition == TitlePosition.LEFT) 0.7f else 0.5f)
+                            ,
+                            textAlign = if(titlePosition == TitlePosition.LEFT) TextAlign.Start else TextAlign.Center
+                        )
+                    }
+                }
+            }
+
+            if (searchAnimationEnable) {
+                AnimationSearchInput(
+                    animations = animations,
+                    inputSearchProps = inputSearchProps!!
+                )
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderAnimated.kt

@@ -0,0 +1,48 @@
+package vn.momo.kits.application
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+
+@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
+@Composable
+fun HeaderAnimated(image: String, scrollState: Int = 0) {
+    // Scale animation
+    val scale by animateFloatAsState(
+        targetValue = when {
+            scrollState < 0 -> (-(scrollState / 300f)).coerceIn(1f, 4f)
+            scrollState.toFloat() in 0f..300f -> 1f
+            else -> 1f
+        }
+    )
+
+    // Opacity animation
+    val opacity by animateFloatAsState(
+        targetValue = when {
+            scrollState.toFloat() in 0f..150f -> 1f - (scrollState / 300f)
+            scrollState.toFloat() in 150f..300f -> 0.5f - ((scrollState - 150f) / 300f)
+            else -> 1f
+        }
+    )
+
+    // Translation Y animation
+
+    Box(modifier = Modifier.fillMaxWidth().height(200.dp)
+        .graphicsLayer {
+            scaleX = scale
+            scaleY = scale
+        }) {
+        if (image.isEmpty()) return
+        Image(
+            source = image,
+            modifier = Modifier.fillMaxWidth().height(200.dp)
+        )
+    }
+}