Code snippets for https://surajsau.medium.com/a735a2f5811b

CardEdge.kt

Box(
    modifier = Modifier
        .offset {
            // [1]
            IntOffset(
                x = (roll * 0.9).dp.roundToPx(),
                y = -(pitch * 0.9).dp.roundToPx()
            )
        }
        // [2]
        .size(width = 300.dp, height = 400.dp)
        .background(
            color = Color.White.copy(alpha = 0.3f),
            shape = RoundedCornerShape(16.dp)
        ),
)

DisposableEffectDispose.kt

// in @Composable fun ParallaxScreen()
DisposableEffect(Unit) {
    // SensorManager initiated & Sensor.registerListener() called
    // here
    val dataManager = ..
    dataManager.init()

    val job = dataManager.data
                ..
                .collect()
    
    onDispose {
        dataManager.cancel()
        job.cancel()
    }
}

DisposableEffectInit.kt

// in @Composable fun ParallaxScreen()
val context = LocalContext.current
val scope = rememberCoroutineScope()

var data by remember { mutableStateOf<SensorData?>(null) }

DisposableEffect(Unit) {
    val dataManager = SensorDataManager(context)
    dataManager.init()

    scope.launch {
        dataManager.data
            .receiveAsFlow()
            .onEach { data = it }
            .collect()
    }
}

GlowShadow.kt

Image(
    painter = painterResource(id = drawable.beach),
    modifier = Modifier
        .offset {
            // [1]
            IntOffset(
                x = -(roll * 1.5).dp.roundToPx(),
                y = (pitch * 2).dp.roundToPx()
            )
        }
        // [2]
        .size(width = 256.dp, height = 356.dp)
        // [3]
        .blur(radius = 24.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded),
)

ImageCard.kt

Image(
    painter = painterResource(id = drawable.beach),
    modifier = Modifier
        // [1]
        .offset {
            // [2]
            IntOffset(
                x = roll.dp.roundToPx(),
                y = -pitch.dp.roundToPx()
            )
        }
        ..
        .size(width = 300.dp, height = 400.dp),
    alignment = BiasAlignment(
        // [3]
        horizontalBias = (roll * 0.005).toFloat(),
        verticalBias = 0f,
    )
)

PitchAndRollFromSensor.kt

var gravity: FloatArray? = null
var geomagnetic: FloatArray? = null
override fun onSensorChanged(event: SensorEvent?) {
    if (event?.sensor?.type == Sensor.TYPE_GRAVITY)
        gravity = event.values

    if (event?.sensor?.type == Sensor.TYPE_MAGNETIC_FIELD)
        geomagnetic = event.values

    if (gravity != null && geomagnetic != null) {
        var r = FloatArray(9)
        var i = FloatArray(9)

        if (SensorManager.getRotationMatrix(r, i, gravity, geomagnetic)) {
            var orientation = FloatArray(3)
            SensorManager.getOrientation(r, orientation)

            // pitch = orientation[1]
            // roll = orientation[2]
        }
    }
}

SensorDataManagerDispose.kt

// in class SensorDataManager
fun cancel() {
    sensorManager.unregisterListener(this)
}

SensorDataManagerInit.kt

// in class SensorDataManager
fun init() {
    val accelerometer = sensorManager.getDefaultSensor(Sensor.TYPE_GRAVITY)
    val magnetometer = sensorManager.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD)

    sensorManager.registerListener(this, accelerometer, SensorManager.SENSOR_DELAY_UI)
    sensorManager.registerListener(this, magnetometer, SensorManager.SENSOR_DELAY_UI)
}

val data: Channel<SensorData> = Channel(Channel.UNLIMITED)

override fun onSensorChanged(event: SensorEvent?) {
    ..
    data.trySend(
        SensorData(
            roll = orientation[2],
            pitch = orientation[1]
        )
    )
}

data class SensorData(
    val roll: Float,
    val pitch: Float
)