A Compose Multiplatform automotive morphing dial, inspired by LoveFrom's Ferrari Luce design.
This project and blog post are strictly for educational purposes and are not affiliated with, associated with, authorized by, endorsed by, or in any way officially connected to Ferrari S.p.A., LoveFrom, or any of their subsidiaries or affiliates.
The UI animations and designs recreated in this tutorial are inspired by the "Ferrari Luce" concept to demonstrate the technical capabilities of Android's Jetpack Compose. "Ferrari", the Prancing Horse logo, the "Luce" name, and all related designs and marks are registered trademarks and the exclusive intellectual property of Ferrari S.p.A. This project generates no revenue and is intended solely as a technical exploration for the developer community.
To build and run the development version of the Android app, use the run configuration from the run widget in your IDE’s toolbar or build it directly from the terminal:
- on macOS/Linux
./gradlew :composeApp:assembleDebug
- on Windows
.\gradlew.bat :composeApp:assembleDebug
To build and run the development version of the desktop app, use the run configuration from the run widget in your IDE’s toolbar or run it directly from the terminal:
- on macOS/Linux
./gradlew :composeApp:run
- on Windows
.\gradlew.bat :composeApp:run
To build and run the development version of the web app, use the run configuration from the run widget in your IDE's toolbar or run it directly from the terminal:
- for the Wasm target (faster, modern browsers):
- on macOS/Linux
./gradlew :composeApp:wasmJsBrowserDevelopmentRun
- on Windows
.\gradlew.bat :composeApp:wasmJsBrowserDevelopmentRun
- on macOS/Linux
- for the JS target (slower, supports older browsers):
- on macOS/Linux
./gradlew :composeApp:jsBrowserDevelopmentRun
- on Windows
.\gradlew.bat :composeApp:jsBrowserDevelopmentRun
- on macOS/Linux
Learn more about Kotlin Multiplatform, Compose Multiplatform, Kotlin/Wasm…