commit 9af60e0c3b36748c839a3dfc21ac57fdc6e88464
Author: Alan Brault <alan.brault@visus.io>
Date:   Mon Nov 17 08:02:58 2025 -0500

    chore: initial commit
    
    Signed-off-by: Alan Brault <alan.brault@visus.io>

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e5cbb64
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,34 @@
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Log/OS Files
+*.log
+
+# Android Studio generated files and folders
+captures/
+.externalNativeBuild/
+.cxx/
+*.aab
+*.apk
+output-metadata.json
+
+# IntelliJ
+*.iml
+.idea/
+misc.xml
+deploymentTargetDropDown.xml
+render.experimental.xml
+
+# Keystore files
+*.jks
+*.keystore
+
+# Google Services (e.g. APIs or Firebase)
+google-services.json
+
+# Android Profiling
+*.hprof
diff --git a/app/.gitignore b/app/.gitignore
new file mode 100644
index 0000000..42afabf
--- /dev/null
+++ b/app/.gitignore
@@ -0,0 +1 @@
+/build
\ No newline at end of file
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
new file mode 100644
index 0000000..5628acd
--- /dev/null
+++ b/app/build.gradle.kts
@@ -0,0 +1,60 @@
+plugins {
+    alias(libs.plugins.android.application)
+    alias(libs.plugins.kotlin.android)
+    alias(libs.plugins.kotlin.compose)
+}
+
+android {
+    namespace = "io.visus.solanim"
+    compileSdk {
+        version = release(36)
+    }
+
+    defaultConfig {
+        applicationId = "io.visus.solanim"
+        minSdk = 35
+        targetSdk = 36
+        versionCode = 1
+        versionName = "1.0"
+
+        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
+    }
+
+    buildTypes {
+        release {
+            isMinifyEnabled = false
+            proguardFiles(
+                getDefaultProguardFile("proguard-android-optimize.txt"),
+                "proguard-rules.pro"
+            )
+        }
+    }
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_17
+        targetCompatibility = JavaVersion.VERSION_17
+    }
+    kotlinOptions {
+        jvmTarget = "17"
+    }
+    buildFeatures {
+        compose = true
+    }
+}
+
+dependencies {
+    implementation(libs.androidx.core.ktx)
+    implementation(libs.androidx.lifecycle.runtime.ktx)
+    implementation(libs.androidx.activity.compose)
+    implementation(libs.androidx.lifecycle.viewmodel.compose)
+    implementation(libs.koin.androidx.compose)
+    implementation(libs.koin.androidx.compose.navigation)
+    implementation(project(":lib:solanim-ui"))
+    implementation(project(":lib:vulkan"))
+    testImplementation(libs.junit)
+    androidTestImplementation(libs.androidx.junit)
+    androidTestImplementation(libs.androidx.espresso.core)
+    androidTestImplementation(platform(libs.androidx.compose.bom))
+    androidTestImplementation(libs.androidx.compose.ui.test.junit4)
+    debugImplementation(libs.androidx.compose.ui.tooling)
+    debugImplementation(libs.androidx.compose.ui.test.manifest)
+}
\ No newline at end of file
diff --git a/app/proguard-rules.pro b/app/proguard-rules.pro
new file mode 100644
index 0000000..481bb43
--- /dev/null
+++ b/app/proguard-rules.pro
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
\ No newline at end of file
diff --git a/app/src/androidTest/java/io/visus/solanim/ExampleInstrumentedTest.kt b/app/src/androidTest/java/io/visus/solanim/ExampleInstrumentedTest.kt
new file mode 100644
index 0000000..1788fa3
--- /dev/null
+++ b/app/src/androidTest/java/io/visus/solanim/ExampleInstrumentedTest.kt
@@ -0,0 +1,24 @@
+package io.visus.solanim
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("io.visus.solanim", appContext.packageName)
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
new file mode 100644
index 0000000..d8534b8
--- /dev/null
+++ b/app/src/main/AndroidManifest.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <application
+        android:name=".MainApplication"
+        android:allowBackup="true"
+        android:dataExtractionRules="@xml/data_extraction_rules"
+        android:fullBackupContent="@xml/backup_rules"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/Theme.SolAnim">
+        <activity
+            android:name=".presentation.ui.MainActivity"
+            android:exported="true"
+            android:theme="@style/Theme.SolAnim">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>
\ No newline at end of file
diff --git a/app/src/main/java/io/visus/solanim/MainApplication.kt b/app/src/main/java/io/visus/solanim/MainApplication.kt
new file mode 100644
index 0000000..2ebd70a
--- /dev/null
+++ b/app/src/main/java/io/visus/solanim/MainApplication.kt
@@ -0,0 +1,20 @@
+package io.visus.solanim
+
+import android.app.Application
+import io.visus.solanim.di.appModule
+import org.koin.android.ext.koin.androidContext
+import org.koin.android.ext.koin.androidLogger
+import org.koin.core.context.startKoin
+import org.koin.core.logger.Level
+
+class MainApplication : Application() {
+    override fun onCreate() {
+        super.onCreate()
+
+        startKoin {
+            androidContext(this@MainApplication)
+            androidLogger(Level.DEBUG)
+            modules(appModule)
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/io/visus/solanim/di/AppModule.kt b/app/src/main/java/io/visus/solanim/di/AppModule.kt
new file mode 100644
index 0000000..5be4d44
--- /dev/null
+++ b/app/src/main/java/io/visus/solanim/di/AppModule.kt
@@ -0,0 +1,21 @@
+package io.visus.solanim.di
+
+import io.visus.solanim.presentation.viewmodel.MainViewModel
+import io.visus.solanim.domain.repository.SolarAnimationSettingsRepository
+import io.visus.solanim.domain.repository.SolarAnimationSettingsRepositoryImpl
+import io.visus.solanim.domain.usecase.GetSettingsUseCase
+import io.visus.solanim.domain.usecase.UpdateColorUseCase
+import io.visus.solanim.domain.usecase.UpdateRotationSpeedUseCase
+import org.koin.core.module.dsl.bind
+import org.koin.core.module.dsl.singleOf
+import org.koin.core.module.dsl.viewModelOf
+import org.koin.dsl.module
+
+val appModule = module {
+    singleOf(::SolarAnimationSettingsRepositoryImpl) { bind<SolarAnimationSettingsRepository>() }
+    singleOf(::GetSettingsUseCase)
+    singleOf(::UpdateColorUseCase)
+    singleOf(::UpdateRotationSpeedUseCase)
+
+    viewModelOf(::MainViewModel)
+}
\ No newline at end of file
diff --git a/app/src/main/java/io/visus/solanim/domain/model/SolarAnimationDefaults.kt b/app/src/main/java/io/visus/solanim/domain/model/SolarAnimationDefaults.kt
new file mode 100644
index 0000000..3dbdb00
--- /dev/null
+++ b/app/src/main/java/io/visus/solanim/domain/model/SolarAnimationDefaults.kt
@@ -0,0 +1,9 @@
+package io.visus.solanim.domain.model
+
+/**
+ * Default values for solar animation settings.
+ */
+object SolarAnimationDefaults {
+    const val DEFAULT_COLOR: Int = 0xFFFC9601.toInt()
+    const val DEFAULT_ROTATION_SPEED: Float = 1.0f
+}
\ No newline at end of file
diff --git a/app/src/main/java/io/visus/solanim/domain/model/SolarAnimationSettings.kt b/app/src/main/java/io/visus/solanim/domain/model/SolarAnimationSettings.kt
new file mode 100644
index 0000000..a3cce3f
--- /dev/null
+++ b/app/src/main/java/io/visus/solanim/domain/model/SolarAnimationSettings.kt
@@ -0,0 +1,12 @@
+package io.visus.solanim.domain.model
+
+/**
+ * Data class representing the settings for solar animation.
+ *
+ * @property color The color of the solar animation.
+ * @property rotationSpeed The rotation speed of the solar animation.
+ */
+data class SolarAnimationSettings(
+    val color: Int,
+    val rotationSpeed: Float
+)
diff --git a/app/src/main/java/io/visus/solanim/domain/repository/SolarAnimationSettingsRepository.kt b/app/src/main/java/io/visus/solanim/domain/repository/SolarAnimationSettingsRepository.kt
new file mode 100644
index 0000000..3b84a11
--- /dev/null
+++ b/app/src/main/java/io/visus/solanim/domain/repository/SolarAnimationSettingsRepository.kt
@@ -0,0 +1,30 @@
+package io.visus.solanim.domain.repository
+
+import io.visus.solanim.domain.model.SolarAnimationSettings
+import kotlinx.coroutines.flow.Flow
+
+/**
+ * Repository interface for managing solar animation settings.
+ */
+interface SolarAnimationSettingsRepository {
+    /**
+     * Retrieves the current solar animation settings as a flow.
+     *
+     * @return A flow emitting the current [SolarAnimationSettings].
+     */
+    fun getSettings(): Flow<SolarAnimationSettings>
+
+    /**
+     * Updates the color of the solar animation.
+     *
+     * @param color The new color value.
+     */
+    suspend fun updateColor(color: Int)
+
+    /**
+     * Updates the rotation speed of the solar animation.
+     *
+     * @param speed The new rotation speed value.
+     */
+    suspend fun updateRotationSpeed(speed: Float)
+}
\ No newline at end of file
diff --git a/app/src/main/java/io/visus/solanim/domain/repository/SolarAnimationSettingsRepositoryImpl.kt b/app/src/main/java/io/visus/solanim/domain/repository/SolarAnimationSettingsRepositoryImpl.kt
new file mode 100644
index 0000000..0f7d7f1
--- /dev/null
+++ b/app/src/main/java/io/visus/solanim/domain/repository/SolarAnimationSettingsRepositoryImpl.kt
@@ -0,0 +1,45 @@
+package io.visus.solanim.domain.repository
+
+import io.visus.solanim.domain.model.SolarAnimationDefaults
+import io.visus.solanim.domain.model.SolarAnimationSettings
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+
+/**
+ * Implementation of [SolarAnimationSettingsRepository] using in-memory storage.
+ */
+class SolarAnimationSettingsRepositoryImpl : SolarAnimationSettingsRepository {
+    private val _settings: MutableStateFlow<SolarAnimationSettings> = MutableStateFlow(
+        SolarAnimationSettings(
+            color = SolarAnimationDefaults.DEFAULT_COLOR,
+            rotationSpeed = SolarAnimationDefaults.DEFAULT_ROTATION_SPEED
+        )
+    )
+
+    /**
+     * Retrieves the current solar animation settings as a flow.
+     *
+     * @return A flow emitting the current [SolarAnimationSettings].
+     */
+    override fun getSettings(): Flow<SolarAnimationSettings> = _settings.asStateFlow()
+
+    /**
+     * Updates the color of the solar animation.
+     *
+     * @param color The new color value.
+     */
+    override suspend fun updateColor(color: Int) {
+        _settings.update { it.copy(color = color) }
+    }
+
+    /**
+     * Updates the rotation speed of the solar animation.
+     *
+     * @param speed The new rotation speed value.
+     */
+    override suspend fun updateRotationSpeed(speed: Float) {
+        _settings.update { it.copy(rotationSpeed = speed) }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/io/visus/solanim/domain/usecase/GetSettingsUseCase.kt b/app/src/main/java/io/visus/solanim/domain/usecase/GetSettingsUseCase.kt
new file mode 100644
index 0000000..4178845
--- /dev/null
+++ b/app/src/main/java/io/visus/solanim/domain/usecase/GetSettingsUseCase.kt
@@ -0,0 +1,12 @@
+package io.visus.solanim.domain.usecase
+
+import io.visus.solanim.domain.repository.SolarAnimationSettingsRepository
+
+/**
+ * Use case for retrieving solar animation settings.
+ *
+ * @property repository The repository to access solar animation settings.
+ */
+class GetSettingsUseCase(private val repository: SolarAnimationSettingsRepository) {
+    operator fun invoke() = repository.getSettings()
+}
\ No newline at end of file
diff --git a/app/src/main/java/io/visus/solanim/domain/usecase/UpdateColorUseCase.kt b/app/src/main/java/io/visus/solanim/domain/usecase/UpdateColorUseCase.kt
new file mode 100644
index 0000000..27b6844
--- /dev/null
+++ b/app/src/main/java/io/visus/solanim/domain/usecase/UpdateColorUseCase.kt
@@ -0,0 +1,12 @@
+package io.visus.solanim.domain.usecase
+
+import io.visus.solanim.domain.repository.SolarAnimationSettingsRepository
+
+/**
+ * Use case for updating the color of the solar animation.
+ *
+ * @property repository The repository to access solar animation settings.
+ */
+class UpdateColorUseCase(private val repository: SolarAnimationSettingsRepository) {
+    suspend operator fun invoke(color: Int) = repository.updateColor(color)
+}
\ No newline at end of file
diff --git a/app/src/main/java/io/visus/solanim/domain/usecase/UpdateRotationSpeedUseCase.kt b/app/src/main/java/io/visus/solanim/domain/usecase/UpdateRotationSpeedUseCase.kt
new file mode 100644
index 0000000..2905730
--- /dev/null
+++ b/app/src/main/java/io/visus/solanim/domain/usecase/UpdateRotationSpeedUseCase.kt
@@ -0,0 +1,12 @@
+package io.visus.solanim.domain.usecase
+
+import io.visus.solanim.domain.repository.SolarAnimationSettingsRepository
+
+/**
+ * Use case for updating the rotation speed of the solar animation.
+ *
+ * @property repository The repository to access solar animation settings.
+ */
+class UpdateRotationSpeedUseCase(private val repository: SolarAnimationSettingsRepository) {
+    suspend operator fun invoke(rotationSpeed: Float) = repository.updateRotationSpeed(rotationSpeed)
+}
\ No newline at end of file
diff --git a/app/src/main/java/io/visus/solanim/presentation/ui/MainActivity.kt b/app/src/main/java/io/visus/solanim/presentation/ui/MainActivity.kt
new file mode 100644
index 0000000..5858fd5
--- /dev/null
+++ b/app/src/main/java/io/visus/solanim/presentation/ui/MainActivity.kt
@@ -0,0 +1,136 @@
+package io.visus.solanim.presentation.ui
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
+import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.github.skydoves.colorpicker.compose.BrightnessSlider
+import com.github.skydoves.colorpicker.compose.ColorEnvelope
+import com.github.skydoves.colorpicker.compose.HsvColorPicker
+import com.github.skydoves.colorpicker.compose.rememberColorPickerController
+import io.visus.solanim.R
+import io.visus.solanim.presentation.viewmodel.MainUiState
+import io.visus.solanim.presentation.viewmodel.MainViewModel
+import io.visus.solanim.ui.AppTheme
+import io.visus.solanim.ui.components.Scaffold
+import io.visus.solanim.ui.components.Slider
+import io.visus.solanim.ui.components.SliderDefaults
+import io.visus.solanim.ui.components.Text
+import io.visus.solanim.ui.components.topbar.TopBar
+import io.visus.solanim.ui.components.topbar.TopBarDefaults
+import org.koin.androidx.viewmodel.ext.android.viewModel
+
+class MainActivity : ComponentActivity() {
+    private val mainViewModel: MainViewModel by viewModel()
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.dark(
+                scrim = android.graphics.Color.TRANSPARENT
+            )
+        )
+
+        setContent {
+            val uiState by mainViewModel.uiState.collectAsState()
+
+            AppTheme {
+                App(
+                    uiState = uiState,
+                    onRotationSpeedValueChange = { mainViewModel.onRotationSpeedChange(it) },
+                    onColorChange = { mainViewModel.onSelectColorChange(it.color.toArgb()) }
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun App(
+    uiState: MainUiState,
+    onRotationSpeedValueChange: (Float) -> Unit,
+    onColorChange: (ColorEnvelope) -> Unit,
+) {
+    Scaffold(
+        containerColor = Color.Transparent,
+        modifier = Modifier
+            .fillMaxSize()
+            .background(AppTheme.colors.defaultBackgroundGradient),
+        topBar = {
+            TopBar(
+                colors = TopBarDefaults.topBarColors(
+                    containerColor = Color.Transparent,
+                ),
+                modifier = Modifier
+                    .fillMaxWidth()
+            ) {
+                Column(
+                    modifier = Modifier.padding(horizontal = 72.dp)
+                ) {
+                    Text(
+                        text = stringResource(
+                            R.string.rotation_speed,
+                            uiState.rotationSpeed
+                        ),
+                        color = AppTheme.colors.white,
+                    )
+                    Slider(
+                        value = uiState.rotationSpeed,
+                        onValueChange = onRotationSpeedValueChange,
+                        valueRange = 0f..2f,
+                        colors = SliderDefaults.colors(
+                            thumbColor = AppTheme.colors.tertiary,
+                            activeTrackColor = AppTheme.colors.tertiary,
+                            inactiveTrackColor = AppTheme.colors.tertiary.copy(alpha = 0.3f),
+                        ),
+                        modifier = Modifier.fillMaxWidth()
+                    )
+                }
+            }
+        },
+        bottomBar = {
+            val colorPickerController = rememberColorPickerController()
+
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(Color.Transparent)
+                    .padding(vertical = 96.dp, horizontal = 32.dp)
+            ) {
+                HsvColorPicker(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(150.dp),
+                    controller = colorPickerController,
+                    initialColor = Color(uiState.selectedColor),
+                    onColorChanged = onColorChange
+
+                )
+                BrightnessSlider(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(vertical = 10.dp)
+                        .height(16.dp),
+                    controller = colorPickerController,
+                    initialColor = Color(uiState.selectedColor)
+                )
+            }
+        }
+    ) { }
+}
diff --git a/app/src/main/java/io/visus/solanim/presentation/viewmodel/MainViewModel.kt b/app/src/main/java/io/visus/solanim/presentation/viewmodel/MainViewModel.kt
new file mode 100644
index 0000000..7a59cee
--- /dev/null
+++ b/app/src/main/java/io/visus/solanim/presentation/viewmodel/MainViewModel.kt
@@ -0,0 +1,66 @@
+package io.visus.solanim.presentation.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import io.visus.solanim.domain.model.SolarAnimationDefaults
+import io.visus.solanim.domain.usecase.GetSettingsUseCase
+import io.visus.solanim.domain.usecase.UpdateColorUseCase
+import io.visus.solanim.domain.usecase.UpdateRotationSpeedUseCase
+import kotlinx.coroutines.flow.SharingStarted
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.flow.stateIn
+import kotlinx.coroutines.launch
+
+/**
+ * ViewModel for the main screen.
+ */
+class MainViewModel(
+    getSettingsUseCase: GetSettingsUseCase,
+    private val updateColorUseCase: UpdateColorUseCase,
+    private val updateRotationSpeedUseCase: UpdateRotationSpeedUseCase
+) : ViewModel() {
+
+    val uiState: StateFlow<MainUiState> = getSettingsUseCase()
+        .map { settings ->
+            MainUiState(
+                selectedColor = settings.color,
+                rotationSpeed = settings.rotationSpeed
+            )
+        }
+        .stateIn(
+            scope = viewModelScope,
+            started = SharingStarted.WhileSubscribed(5_000),
+            initialValue = MainUiState()
+        )
+
+    /**
+     * Updates the selected color.
+     *
+     * @param value The new color selected by the user.
+     */
+    fun onSelectColorChange(value: Int) {
+        viewModelScope.launch {
+            updateColorUseCase(value)
+        }
+    }
+
+    /**
+     * Updates the rotation speed.
+     *
+     * @param value The new value from the rotation speed.
+     */
+    fun onRotationSpeedChange(value: Float) {
+        viewModelScope.launch {
+            updateRotationSpeedUseCase(value)
+        }
+    }
+}
+
+/**
+ * UI state for the main screen.
+ */
+data class MainUiState(
+    val selectedColor: Int = SolarAnimationDefaults.DEFAULT_COLOR,
+    val rotationSpeed: Float = SolarAnimationDefaults.DEFAULT_ROTATION_SPEED
+)
diff --git a/app/src/main/res/drawable/ic_launcher_background.xml b/app/src/main/res/drawable/ic_launcher_background.xml
new file mode 100644
index 0000000..07d5da9
--- /dev/null
+++ b/app/src/main/res/drawable/ic_launcher_background.xml
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path
+        android:fillColor="#3DDC84"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+</vector>
diff --git a/app/src/main/res/drawable/ic_launcher_foreground.xml b/app/src/main/res/drawable/ic_launcher_foreground.xml
new file mode 100644
index 0000000..2b068d1
--- /dev/null
+++ b/app/src/main/res/drawable/ic_launcher_foreground.xml
@@ -0,0 +1,30 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="85.84757"
+                android:endY="92.4963"
+                android:startX="42.9492"
+                android:startY="49.59793"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
+        android:strokeWidth="1"
+        android:strokeColor="#00000000" />
+</vector>
\ No newline at end of file
diff --git a/app/src/main/res/mipmap-anydpi/ic_launcher.xml b/app/src/main/res/mipmap-anydpi/ic_launcher.xml
new file mode 100644
index 0000000..6f3b755
--- /dev/null
+++ b/app/src/main/res/mipmap-anydpi/ic_launcher.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/ic_launcher_background" />
+    <foreground android:drawable="@drawable/ic_launcher_foreground" />
+    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
+</adaptive-icon>
\ No newline at end of file
diff --git a/app/src/main/res/mipmap-anydpi/ic_launcher_round.xml b/app/src/main/res/mipmap-anydpi/ic_launcher_round.xml
new file mode 100644
index 0000000..6f3b755
--- /dev/null
+++ b/app/src/main/res/mipmap-anydpi/ic_launcher_round.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/ic_launcher_background" />
+    <foreground android:drawable="@drawable/ic_launcher_foreground" />
+    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
+</adaptive-icon>
\ No newline at end of file
diff --git a/app/src/main/res/mipmap-hdpi/ic_launcher.webp b/app/src/main/res/mipmap-hdpi/ic_launcher.webp
new file mode 100644
index 0000000..c209e78
Binary files /dev/null and b/app/src/main/res/mipmap-hdpi/ic_launcher.webp differ
diff --git a/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp b/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
new file mode 100644
index 0000000..b2dfe3d
Binary files /dev/null and b/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp differ
diff --git a/app/src/main/res/mipmap-mdpi/ic_launcher.webp b/app/src/main/res/mipmap-mdpi/ic_launcher.webp
new file mode 100644
index 0000000..4f0f1d6
Binary files /dev/null and b/app/src/main/res/mipmap-mdpi/ic_launcher.webp differ
diff --git a/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp b/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
new file mode 100644
index 0000000..62b611d
Binary files /dev/null and b/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp differ
diff --git a/app/src/main/res/mipmap-xhdpi/ic_launcher.webp b/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
new file mode 100644
index 0000000..948a307
Binary files /dev/null and b/app/src/main/res/mipmap-xhdpi/ic_launcher.webp differ
diff --git a/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp b/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
new file mode 100644
index 0000000..1b9a695
Binary files /dev/null and b/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp differ
diff --git a/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp b/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
new file mode 100644
index 0000000..28d4b77
Binary files /dev/null and b/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp differ
diff --git a/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp b/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
new file mode 100644
index 0000000..9287f50
Binary files /dev/null and b/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp differ
diff --git a/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp b/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
new file mode 100644
index 0000000..aa7d642
Binary files /dev/null and b/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp differ
diff --git a/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp b/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
new file mode 100644
index 0000000..9126ae3
Binary files /dev/null and b/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp differ
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
new file mode 100644
index 0000000..f8c6127
--- /dev/null
+++ b/app/src/main/res/values/colors.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="purple_200">#FFBB86FC</color>
+    <color name="purple_500">#FF6200EE</color>
+    <color name="purple_700">#FF3700B3</color>
+    <color name="teal_200">#FF03DAC5</color>
+    <color name="teal_700">#FF018786</color>
+    <color name="black">#FF000000</color>
+    <color name="white">#FFFFFFFF</color>
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
new file mode 100644
index 0000000..d1569ac
--- /dev/null
+++ b/app/src/main/res/values/strings.xml
@@ -0,0 +1,4 @@
+<resources>
+    <string name="app_name">Solar Animation</string>
+    <string name="rotation_speed">Rotation Speed: %1$.2f</string>
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
new file mode 100644
index 0000000..faf04e0
--- /dev/null
+++ b/app/src/main/res/values/themes.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Theme.SolAnim" parent="android:Theme.Material.Light.NoActionBar" />
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/xml/backup_rules.xml b/app/src/main/res/xml/backup_rules.xml
new file mode 100644
index 0000000..4df9255
--- /dev/null
+++ b/app/src/main/res/xml/backup_rules.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+   Sample backup rules file; uncomment and customize as necessary.
+   See https://developer.android.com/guide/topics/data/autobackup
+   for details.
+   Note: This file is ignored for devices older than API 31
+   See https://developer.android.com/about/versions/12/backup-restore
+-->
+<full-backup-content>
+    <!--
+   <include domain="sharedpref" path="."/>
+   <exclude domain="sharedpref" path="device.xml"/>
+-->
+</full-backup-content>
\ No newline at end of file
diff --git a/app/src/main/res/xml/data_extraction_rules.xml b/app/src/main/res/xml/data_extraction_rules.xml
new file mode 100644
index 0000000..9ee9997
--- /dev/null
+++ b/app/src/main/res/xml/data_extraction_rules.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+   Sample data extraction rules file; uncomment and customize as necessary.
+   See https://developer.android.com/about/versions/12/backup-restore#xml-changes
+   for details.
+-->
+<data-extraction-rules>
+    <cloud-backup>
+        <!-- TODO: Use <include> and <exclude> to control what is backed up.
+        <include .../>
+        <exclude .../>
+        -->
+    </cloud-backup>
+    <!--
+    <device-transfer>
+        <include .../>
+        <exclude .../>
+    </device-transfer>
+    -->
+</data-extraction-rules>
\ No newline at end of file
diff --git a/app/src/test/java/io/visus/solanim/ExampleUnitTest.kt b/app/src/test/java/io/visus/solanim/ExampleUnitTest.kt
new file mode 100644
index 0000000..cd32c33
--- /dev/null
+++ b/app/src/test/java/io/visus/solanim/ExampleUnitTest.kt
@@ -0,0 +1,17 @@
+package io.visus.solanim
+
+import org.junit.Test
+
+import org.junit.Assert.*
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+class ExampleUnitTest {
+    @Test
+    fun addition_isCorrect() {
+        assertEquals(4, 2 + 2)
+    }
+}
\ No newline at end of file
diff --git a/build.gradle.kts b/build.gradle.kts
new file mode 100644
index 0000000..39f752b
--- /dev/null
+++ b/build.gradle.kts
@@ -0,0 +1,9 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+plugins {
+    alias(libs.plugins.android.application) apply false
+    alias(libs.plugins.kotlin.android) apply false
+    alias(libs.plugins.kotlin.compose) apply false
+    alias(libs.plugins.lumo.ui) apply false
+    alias(libs.plugins.android.library) apply false
+
+}
\ No newline at end of file
diff --git a/gradle.properties b/gradle.properties
new file mode 100644
index 0000000..20e2a01
--- /dev/null
+++ b/gradle.properties
@@ -0,0 +1,23 @@
+# Project-wide Gradle settings.
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. For more details, visit
+# https://developer.android.com/r/tools/gradle-multi-project-decoupled-projects
+# org.gradle.parallel=true
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Kotlin code style for this project: "official" or "obsolete":
+kotlin.code.style=official
+# Enables namespacing of each library's R class so that its R class includes only the
+# resources declared in the library itself and none from the library's dependencies,
+# thereby reducing the size of the R class for that library
+android.nonTransitiveRClass=true
\ No newline at end of file
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
new file mode 100644
index 0000000..b499a76
--- /dev/null
+++ b/gradle/libs.versions.toml
@@ -0,0 +1,59 @@
+[versions]
+agp = "8.13.1"
+kotlin = "2.2.21"
+coreKtx = "1.17.0"
+junit = "4.13.2"
+junitVersion = "1.3.0"
+espressoCore = "3.7.0"
+lifecycleRuntimeKtx = "2.9.4"
+activityCompose = "1.11.0"
+composeBom = "2025.11.00"
+lumoVersion = "1.2.5"
+lifecycleViewmodelCompose = "2.9.4"
+koinAndroidxCompose = "4.1.1"
+koinAndroidxComposeNavigation = "4.1.1"
+composables = "1.1.1"
+appcompat = "1.7.1"
+material = "1.13.0"
+foundation = "1.9.4"
+foundationLayout = "1.9.4"
+uiTooling = "1.9.4"
+uiToolingPreview = "1.9.4"
+uiUtil = "1.9.4"
+materialRipple = "1.9.4"
+colorpickerCompose = "1.1.2"
+
+[libraries]
+androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
+junit = { group = "junit", name = "junit", version.ref = "junit" }
+androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
+androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
+androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
+androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
+androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
+androidx-compose-ui = { group = "androidx.compose.ui", name = "ui" }
+androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
+androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
+androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
+androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
+androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "lifecycleViewmodelCompose" }
+koin-androidx-compose = { group = "io.insert-koin", name = "koin-androidx-compose", version.ref = "koinAndroidxCompose" }
+koin-androidx-compose-navigation = { group = "io.insert-koin", name = "koin-androidx-compose-navigation", version.ref = "koinAndroidxComposeNavigation" }
+composables = { group = "com.nomanr", name = "composables", version.ref = "composables" }
+androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "appcompat" }
+material = { group = "com.google.android.material", name = "material", version.ref = "material" }
+androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "foundation" }
+androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "foundationLayout" }
+androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "uiTooling" }
+androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "uiToolingPreview" }
+androidx-compose-ui-util = { group = "androidx.compose.ui", name = "ui-util", version.ref = "uiUtil" }
+androidx-compose-material-ripple = { group = "androidx.compose.material", name = "material-ripple", version.ref = "materialRipple" }
+colorpicker-compose = { group = "com.github.skydoves", name = "colorpicker-compose", version.ref = "colorpickerCompose" }
+
+[plugins]
+android-application = { id = "com.android.application", version.ref = "agp" }
+kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
+kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
+lumo-ui = { id = "com.nomanr.plugin.lumo", version.ref = "lumoVersion" }
+android-library = { id = "com.android.library", version.ref = "agp" }
+
diff --git a/gradle/wrapper/gradle-wrapper.jar b/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 0000000..8bdaf60
Binary files /dev/null and b/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 0000000..3a97e12
--- /dev/null
+++ b/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,8 @@
+#Sat Nov 15 09:32:35 EST 2025
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
diff --git a/gradlew b/gradlew
new file mode 100755
index 0000000..ef07e01
--- /dev/null
+++ b/gradlew
@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"
diff --git a/gradlew.bat b/gradlew.bat
new file mode 100644
index 0000000..5eed7ee
--- /dev/null
+++ b/gradlew.bat
@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
diff --git a/lib/solanim-ui/.gitignore b/lib/solanim-ui/.gitignore
new file mode 100644
index 0000000..42afabf
--- /dev/null
+++ b/lib/solanim-ui/.gitignore
@@ -0,0 +1 @@
+/build
\ No newline at end of file
diff --git a/lib/solanim-ui/build.gradle.kts b/lib/solanim-ui/build.gradle.kts
new file mode 100644
index 0000000..54f0377
--- /dev/null
+++ b/lib/solanim-ui/build.gradle.kts
@@ -0,0 +1,56 @@
+plugins {
+    alias(libs.plugins.android.library)
+    alias(libs.plugins.kotlin.android)
+    alias(libs.plugins.kotlin.compose)
+    alias(libs.plugins.lumo.ui)
+}
+
+android {
+    namespace = "io.visus.solanim.ui"
+    compileSdk {
+        version = release(36)
+    }
+
+    defaultConfig {
+        minSdk = 35
+
+        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
+        consumerProguardFiles("consumer-rules.pro")
+    }
+
+    buildTypes {
+        release {
+            isMinifyEnabled = false
+            proguardFiles(
+                getDefaultProguardFile("proguard-android-optimize.txt"),
+                "proguard-rules.pro"
+            )
+        }
+    }
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_17
+        targetCompatibility = JavaVersion.VERSION_17
+    }
+    kotlinOptions {
+        jvmTarget = "17"
+    }
+}
+
+dependencies {
+    api(platform(libs.androidx.compose.bom))
+    api(libs.androidx.compose.foundation)
+    api(libs.androidx.compose.foundation.layout)
+    api(libs.androidx.compose.material.ripple)
+    api(libs.androidx.compose.ui)
+    api(libs.androidx.compose.ui.graphics)
+    api(libs.androidx.compose.ui.util)
+    api(libs.androidx.ui.tooling)
+    api(libs.androidx.ui.tooling.preview)
+    api(libs.composables)
+    api(libs.colorpicker.compose)
+    implementation(libs.androidx.core.ktx)
+    implementation(libs.androidx.appcompat)
+    testImplementation(libs.junit)
+    androidTestImplementation(libs.androidx.junit)
+    androidTestImplementation(libs.androidx.espresso.core)
+}
\ No newline at end of file
diff --git a/lib/solanim-ui/consumer-rules.pro b/lib/solanim-ui/consumer-rules.pro
new file mode 100644
index 0000000..e69de29
diff --git a/lib/solanim-ui/proguard-rules.pro b/lib/solanim-ui/proguard-rules.pro
new file mode 100644
index 0000000..481bb43
--- /dev/null
+++ b/lib/solanim-ui/proguard-rules.pro
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
\ No newline at end of file
diff --git a/lib/solanim-ui/src/androidTest/java/io/visus/solanim/ui/ExampleInstrumentedTest.kt b/lib/solanim-ui/src/androidTest/java/io/visus/solanim/ui/ExampleInstrumentedTest.kt
new file mode 100644
index 0000000..b50520a
--- /dev/null
+++ b/lib/solanim-ui/src/androidTest/java/io/visus/solanim/ui/ExampleInstrumentedTest.kt
@@ -0,0 +1,24 @@
+package io.visus.solanim.ui
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("io.visus.solanim.ui.test", appContext.packageName)
+    }
+}
\ No newline at end of file
diff --git a/lib/solanim-ui/src/main/AndroidManifest.xml b/lib/solanim-ui/src/main/AndroidManifest.xml
new file mode 100644
index 0000000..a5918e6
--- /dev/null
+++ b/lib/solanim-ui/src/main/AndroidManifest.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+</manifest>
\ No newline at end of file
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/Color.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/Color.kt
new file mode 100644
index 0000000..f076a67
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/Color.kt
@@ -0,0 +1,141 @@
+package io.visus.solanim.ui
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+
+val Black: Color = Color(0xFF000000)
+val Gray900: Color = Color(0xFF282828)
+val Gray800: Color = Color(0xFF4b4b4b)
+val Gray700: Color = Color(0xFF5e5e5e)
+val Gray600: Color = Color(0xFF727272)
+val Gray500: Color = Color(0xFF868686)
+val Gray400: Color = Color(0xFFC7C7C7)
+val Gray300: Color = Color(0xFFDFDFDF)
+val Gray200: Color = Color(0xFFE2E2E2)
+val Gray100: Color = Color(0xFFF7F7F7)
+val Gray50: Color = Color(0xFFFFFFFF)
+val White: Color = Color(0xFFFFFFFF)
+
+val Red900: Color = Color(0xFF520810)
+val Red800: Color = Color(0xFF950f22)
+val Red700: Color = Color(0xFFbb032a)
+val Red600: Color = Color(0xFFde1135)
+val Red500: Color = Color(0xFFf83446)
+val Red400: Color = Color(0xFFfc7f79)
+val Red300: Color = Color(0xFFffb2ab)
+val Red200: Color = Color(0xFFffd2cd)
+val Red100: Color = Color(0xFFffe1de)
+val Red50: Color = Color(0xFFfff0ee)
+
+val Blue900: Color = Color(0xFF276EF1)
+val Blue800: Color = Color(0xFF3F7EF2)
+val Blue700: Color = Color(0xFF578EF4)
+val Blue600: Color = Color(0xFF6F9EF5)
+val Blue500: Color = Color(0xFF87AEF7)
+val Blue400: Color = Color(0xFF9FBFF8)
+val Blue300: Color = Color(0xFFB7CEFA)
+val Blue200: Color = Color(0xFFCFDEFB)
+val Blue100: Color = Color(0xFFE7EEFD)
+val Blue50: Color = Color(0xFFFFFFFF)
+
+val Green950: Color = Color(0xFF0B4627)
+val Green900: Color = Color(0xFF16643B)
+val Green800: Color = Color(0xFF1A7544)
+val Green700: Color = Color(0xFF178C4E)
+val Green600: Color = Color(0xFF1DAF61)
+val Green500: Color = Color(0xFF1FC16B)
+val Green400: Color = Color(0xFF3EE089)
+val Green300: Color = Color(0xFF84EBB4)
+val Green200: Color = Color(0xFFC2F5DA)
+val Green100: Color = Color(0xFFD0FBE9)
+val Green50: Color = Color(0xFFE0FAEC)
+
+val NavyBlue900: Color = Color(0xFF00002E)
+val NavyBlue800: Color = Color(0xFF1A1A47)
+
+@Immutable
+data class Colors(
+    val primary: Color,
+    val onPrimary: Color,
+    val secondary: Color,
+    val onSecondary: Color,
+    val tertiary: Color,
+    val onTertiary: Color,
+    val error: Color,
+    val onError: Color,
+    val success: Color,
+    val onSuccess: Color,
+    val disabled: Color,
+    val onDisabled: Color,
+    val surface: Color,
+    val onSurface: Color,
+    val background: Color,
+    val onBackground: Color,
+    val outline: Color,
+    val transparent: Color = Color.Transparent,
+    val white: Color = White,
+    val black: Color = Black,
+    val text: Color,
+    val textSecondary: Color,
+    val textDisabled: Color,
+    val scrim: Color,
+    val elevation: Color,
+    val defaultBackgroundGradient: Brush,
+)
+
+internal val DarkColors =
+    Colors(
+        primary = White,
+        onPrimary = Black,
+        secondary = Gray400,
+        onSecondary = White,
+        tertiary = Blue300,
+        onTertiary = Black,
+        surface = Gray900,
+        onSurface = White,
+        error = Red400,
+        onError = Black,
+        success = Green700,
+        onSuccess = Black,
+        disabled = Gray700,
+        onDisabled = Gray500,
+        background = Black,
+        onBackground = White,
+        outline = Gray800,
+        transparent = Color.Transparent,
+        white = White,
+        black = Black,
+        text = White,
+        textSecondary = Gray300,
+        textDisabled = Gray600,
+        scrim = Color.Black.copy(alpha = 0.72f),
+        elevation = Gray200,
+        defaultBackgroundGradient = Brush.verticalGradient(
+            colors = listOf(
+                NavyBlue800,
+                NavyBlue900,
+                Black,
+            )
+        )
+    )
+
+val LocalColors = staticCompositionLocalOf { DarkColors }
+val LocalContentColor = compositionLocalOf { Color.Black }
+val LocalContentAlpha = compositionLocalOf { 1f }
+
+fun Colors.contentColorFor(backgroundColor: Color): Color {
+    return when (backgroundColor) {
+        primary -> onPrimary
+        secondary -> onSecondary
+        tertiary -> onTertiary
+        surface -> onSurface
+        error -> onError
+        success -> onSuccess
+        disabled -> onDisabled
+        background -> onBackground
+        else -> Color.Unspecified
+    }
+}
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/Theme.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/Theme.kt
new file mode 100644
index 0000000..d4cc274
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/Theme.kt
@@ -0,0 +1,59 @@
+package io.visus.solanim.ui
+
+import androidx.compose.foundation.LocalIndication
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.text.selection.LocalTextSelectionColors
+import androidx.compose.foundation.text.selection.TextSelectionColors
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.graphics.Color
+import io.visus.solanim.ui.foundation.ripple
+
+object AppTheme {
+    val colors: Colors
+        @ReadOnlyComposable @Composable
+        get() = LocalColors.current
+
+    val typography: Typography
+        @ReadOnlyComposable @Composable
+        get() = LocalTypography.current
+}
+
+@Composable
+fun AppTheme(
+    content: @Composable () -> Unit,
+) {
+    val rippleIndication = ripple()
+    val selectionColors = rememberTextSelectionColors(DarkColors)
+    val typography = provideTypography()
+
+    CompositionLocalProvider(
+        LocalColors provides DarkColors,
+        LocalTypography provides typography,
+        LocalIndication provides rippleIndication,
+        LocalTextSelectionColors provides selectionColors,
+        LocalContentColor provides DarkColors.contentColorFor(DarkColors.background),
+        LocalTextStyle provides typography.body1,
+        content = content,
+    )
+}
+
+@Composable
+fun contentColorFor(color: Color): Color {
+    return AppTheme.colors.contentColorFor(color)
+}
+
+@Composable
+internal fun rememberTextSelectionColors(colorScheme: Colors): TextSelectionColors {
+    val primaryColor = colorScheme.primary
+    return remember(primaryColor) {
+        TextSelectionColors(
+            handleColor = primaryColor,
+            backgroundColor = primaryColor.copy(alpha = TextSelectionBackgroundOpacity),
+        )
+    }
+}
+
+internal const val TextSelectionBackgroundOpacity = 0.4f
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/Typography.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/Typography.kt
new file mode 100644
index 0000000..4341911
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/Typography.kt
@@ -0,0 +1,139 @@
+package io.visus.solanim.ui
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.runtime.structuralEqualityPolicy
+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
+
+@Composable
+fun fontFamily() = FontFamily.Default
+
+data class Typography(
+    val h1: TextStyle,
+    val h2: TextStyle,
+    val h3: TextStyle,
+    val h4: TextStyle,
+    val body1: TextStyle,
+    val body2: TextStyle,
+    val body3: TextStyle,
+    val label1: TextStyle,
+    val label2: TextStyle,
+    val label3: TextStyle,
+    val button: TextStyle,
+    val input: TextStyle,
+)
+
+private val defaultTypography =
+    Typography(
+        h1 =
+            TextStyle(
+                fontWeight = FontWeight.Bold,
+                fontSize = 24.sp,
+                lineHeight = 32.sp,
+                letterSpacing = 0.sp,
+            ),
+        h2 =
+            TextStyle(
+                fontWeight = FontWeight.Bold,
+                fontSize = 20.sp,
+                lineHeight = 28.sp,
+                letterSpacing = 0.sp,
+            ),
+        h3 =
+            TextStyle(
+                fontWeight = FontWeight.Bold,
+                fontSize = 16.sp,
+                lineHeight = 24.sp,
+                letterSpacing = 0.sp,
+            ),
+        h4 =
+            TextStyle(
+                fontWeight = FontWeight.SemiBold,
+                fontSize = 16.sp,
+                lineHeight = 24.sp,
+                letterSpacing = 0.sp,
+            ),
+        body1 =
+            TextStyle(
+                fontWeight = FontWeight.Normal,
+                fontSize = 16.sp,
+                lineHeight = 24.sp,
+                letterSpacing = 0.sp,
+            ),
+        body2 =
+            TextStyle(
+                fontWeight = FontWeight.Normal,
+                fontSize = 14.sp,
+                lineHeight = 20.sp,
+                letterSpacing = 0.15.sp,
+            ),
+        body3 =
+            TextStyle(
+                fontWeight = FontWeight.Normal,
+                fontSize = 12.sp,
+                lineHeight = 16.sp,
+                letterSpacing = 0.15.sp,
+            ),
+        label1 =
+            TextStyle(
+                fontWeight = FontWeight.W500,
+                fontSize = 14.sp,
+                lineHeight = 20.sp,
+                letterSpacing = 0.1.sp,
+            ),
+        label2 =
+            TextStyle(
+                fontWeight = FontWeight.W500,
+                fontSize = 12.sp,
+                lineHeight = 16.sp,
+                letterSpacing = 0.5.sp,
+            ),
+        label3 =
+            TextStyle(
+                fontWeight = FontWeight.W500,
+                fontSize = 10.sp,
+                lineHeight = 12.sp,
+                letterSpacing = 0.5.sp,
+            ),
+        button =
+            TextStyle(
+                fontWeight = FontWeight.W500,
+                fontSize = 14.sp,
+                lineHeight = 20.sp,
+                letterSpacing = 1.sp,
+            ),
+        input =
+            TextStyle(
+                fontWeight = FontWeight.Normal,
+                fontSize = 16.sp,
+                lineHeight = 24.sp,
+                letterSpacing = 0.sp,
+            ),
+    )
+
+@Composable
+fun provideTypography(): Typography {
+    val fontFamily = fontFamily()
+
+    return defaultTypography.copy(
+        h1 = defaultTypography.h1.copy(fontFamily = fontFamily),
+        h2 = defaultTypography.h2.copy(fontFamily = fontFamily),
+        h3 = defaultTypography.h3.copy(fontFamily = fontFamily),
+        h4 = defaultTypography.h4.copy(fontFamily = fontFamily),
+        body1 = defaultTypography.body1.copy(fontFamily = fontFamily),
+        body2 = defaultTypography.body2.copy(fontFamily = fontFamily),
+        body3 = defaultTypography.body3.copy(fontFamily = fontFamily),
+        label1 = defaultTypography.label1.copy(fontFamily = fontFamily),
+        label2 = defaultTypography.label2.copy(fontFamily = fontFamily),
+        label3 = defaultTypography.label3.copy(fontFamily = fontFamily),
+        button = defaultTypography.button.copy(fontFamily = fontFamily),
+        input = defaultTypography.input.copy(fontFamily = fontFamily),
+    )
+}
+
+val LocalTypography = staticCompositionLocalOf { defaultTypography }
+val LocalTextStyle = compositionLocalOf(structuralEqualityPolicy()) { TextStyle.Default }
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Icon.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Icon.kt
new file mode 100644
index 0000000..f70e796
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Icon.kt
@@ -0,0 +1,98 @@
+package io.visus.solanim.ui.components
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.paint
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.painter.BitmapPainter
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.graphics.toolingGraphicsLayer
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.role
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.dp
+import io.visus.solanim.ui.LocalContentColor
+
+@Composable
+fun Icon(
+    imageVector: ImageVector,
+    modifier: Modifier = Modifier,
+    contentDescription: String? = null,
+    tint: Color = LocalContentColor.current,
+) {
+    Icon(
+        painter = rememberVectorPainter(imageVector),
+        contentDescription = contentDescription,
+        modifier = modifier,
+        tint = tint,
+    )
+}
+
+@Composable
+fun Icon(
+    bitmap: ImageBitmap,
+    modifier: Modifier = Modifier,
+    contentDescription: String? = null,
+    tint: Color = LocalContentColor.current,
+) {
+    val painter = remember(bitmap) { BitmapPainter(bitmap) }
+    Icon(
+        painter = painter,
+        contentDescription = contentDescription,
+        modifier = modifier,
+        tint = tint,
+    )
+}
+
+@Composable
+fun Icon(
+    painter: Painter,
+    modifier: Modifier = Modifier,
+    contentDescription: String? = null,
+    tint: Color = LocalContentColor.current,
+) {
+    val colorFilter = if (tint == Color.Unspecified) null else ColorFilter.tint(tint)
+    val semantics =
+        if (contentDescription != null) {
+            Modifier.semantics {
+                this.contentDescription = contentDescription
+                this.role = Role.Image
+            }
+        } else {
+            Modifier
+        }
+    Box(
+        modifier
+            .toolingGraphicsLayer()
+            .defaultSizeFor(painter)
+            .paint(painter, colorFilter = colorFilter, contentScale = ContentScale.Fit)
+            .then(semantics),
+    )
+}
+
+private fun Modifier.defaultSizeFor(painter: Painter) =
+    this.then(
+        if (painter.intrinsicSize == Size.Unspecified || painter.intrinsicSize.isInfinite()) {
+            DefaultIconSizeModifier
+        } else {
+            Modifier
+        },
+    )
+
+private fun Size.isInfinite() = width.isInfinite() && height.isInfinite()
+
+private val DefaultIconSizeModifier = Modifier.size(IconDefaults.iconSize)
+
+internal object IconDefaults {
+    val iconSize = 24.dp
+}
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Scaffold.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Scaffold.kt
new file mode 100644
index 0000000..be61c11
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Scaffold.kt
@@ -0,0 +1,265 @@
+package io.visus.solanim.ui.components
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.SubcomposeLayout
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.offset
+import io.visus.solanim.ui.AppTheme
+import io.visus.solanim.ui.contentColorFor
+import io.visus.solanim.ui.foundation.systemBarsForVisualComponents
+import kotlin.jvm.JvmInline
+
+@Composable
+fun Scaffold(
+    modifier: Modifier = Modifier,
+    topBar: @Composable () -> Unit = {},
+    bottomBar: @Composable () -> Unit = {},
+    snackbarHost: @Composable () -> Unit = {},
+    floatingActionButton: @Composable () -> Unit = {},
+    floatingActionButtonPosition: FabPosition = FabPosition.End,
+    containerColor: Color = AppTheme.colors.background,
+    contentColor: Color = contentColorFor(containerColor),
+    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
+    content: @Composable (PaddingValues) -> Unit,
+) {
+    Surface(modifier = modifier, color = containerColor, contentColor = contentColor) {
+        ScaffoldLayout(
+            fabPosition = floatingActionButtonPosition,
+            topBar = topBar,
+            bottomBar = bottomBar,
+            content = content,
+            snackbar = snackbarHost,
+            contentWindowInsets = contentWindowInsets,
+            fab = floatingActionButton,
+        )
+    }
+}
+
+@Composable
+private fun ScaffoldLayout(
+    fabPosition: FabPosition,
+    topBar: @Composable () -> Unit,
+    content: @Composable (PaddingValues) -> Unit,
+    snackbar: @Composable () -> Unit,
+    fab: @Composable () -> Unit,
+    contentWindowInsets: WindowInsets,
+    bottomBar: @Composable () -> Unit,
+) {
+    SubcomposeLayout { constraints ->
+        val layoutWidth = constraints.maxWidth
+        val layoutHeight = constraints.maxHeight
+
+        val looseConstraints = constraints.copy(minWidth = 0, minHeight = 0)
+
+        layout(layoutWidth, layoutHeight) {
+            val topBarPlaceables =
+                subcompose(ScaffoldLayoutContent.TopBar, topBar).map {
+                    it.measure(looseConstraints)
+                }
+
+            val topBarHeight = topBarPlaceables.maxByOrNull { it.height }?.height ?: 0
+
+            val snackbarPlaceables =
+                subcompose(ScaffoldLayoutContent.Snackbar, snackbar).map {
+                    // respect only bottom and horizontal for snackbar and fab
+                    val leftInset =
+                        contentWindowInsets
+                            .getLeft(this@SubcomposeLayout, layoutDirection)
+                    val rightInset =
+                        contentWindowInsets
+                            .getRight(this@SubcomposeLayout, layoutDirection)
+                    val bottomInset = contentWindowInsets.getBottom(this@SubcomposeLayout)
+                    // offset the snackbar constraints by the insets values
+                    it.measure(
+                        looseConstraints.offset(
+                            -leftInset - rightInset,
+                            -bottomInset,
+                        ),
+                    )
+                }
+
+            val snackbarHeight = snackbarPlaceables.maxByOrNull { it.height }?.height ?: 0
+            val snackbarWidth = snackbarPlaceables.maxByOrNull { it.width }?.width ?: 0
+
+            val fabPlaceables =
+                subcompose(ScaffoldLayoutContent.Fab, fab).mapNotNull { measurable ->
+                    // respect only bottom and horizontal for snackbar and fab
+                    val leftInset =
+                        contentWindowInsets.getLeft(
+                            this@SubcomposeLayout,
+                            layoutDirection,
+                        )
+                    val rightInset =
+                        contentWindowInsets.getRight(
+                            this@SubcomposeLayout,
+                            layoutDirection,
+                        )
+                    val bottomInset = contentWindowInsets.getBottom(this@SubcomposeLayout)
+                    measurable.measure(
+                        looseConstraints.offset(
+                            -leftInset - rightInset,
+                            -bottomInset,
+                        ),
+                    )
+                        .takeIf { it.height != 0 && it.width != 0 }
+                }
+
+            val fabPlacement =
+                if (fabPlaceables.isNotEmpty()) {
+                    val fabWidth = fabPlaceables.maxByOrNull { it.width }!!.width
+                    val fabHeight = fabPlaceables.maxByOrNull { it.height }!!.height
+                    // FAB distance from the left of the layout, taking into account LTR / RTL
+                    val fabLeftOffset =
+                        if (fabPosition == FabPosition.End) {
+                            if (layoutDirection == LayoutDirection.Ltr) {
+                                layoutWidth - FabSpacing.roundToPx() - fabWidth
+                            } else {
+                                FabSpacing.roundToPx()
+                            }
+                        } else {
+                            (layoutWidth - fabWidth) / 2
+                        }
+
+                    FabPlacement(
+                        left = fabLeftOffset,
+                        width = fabWidth,
+                        height = fabHeight,
+                    )
+                } else {
+                    null
+                }
+
+            val bottomBarPlaceables =
+                subcompose(ScaffoldLayoutContent.BottomBar) {
+                    CompositionLocalProvider(
+                        LocalFabPlacement provides fabPlacement,
+                        content = bottomBar,
+                    )
+                }.map { it.measure(looseConstraints) }
+
+            val bottomBarHeight = bottomBarPlaceables.maxByOrNull { it.height }?.height
+            val fabOffsetFromBottom =
+                fabPlacement?.let {
+                    if (bottomBarHeight == null) {
+                        it.height + FabSpacing.roundToPx() +
+                            contentWindowInsets.getBottom(this@SubcomposeLayout)
+                    } else {
+                        // Total height is the bottom bar height + the FAB height + the padding
+                        // between the FAB and bottom bar
+                        bottomBarHeight + it.height + FabSpacing.roundToPx()
+                    }
+                }
+
+            val snackbarOffsetFromBottom =
+                if (snackbarHeight != 0) {
+                    snackbarHeight +
+                        (
+                            fabOffsetFromBottom ?: bottomBarHeight
+                                ?: contentWindowInsets.getBottom(this@SubcomposeLayout)
+                        )
+                } else {
+                    0
+                }
+
+            val bodyContentPlaceables =
+                subcompose(ScaffoldLayoutContent.MainContent) {
+                    val insets = contentWindowInsets.asPaddingValues(this@SubcomposeLayout)
+                    val innerPadding =
+                        PaddingValues(
+                            top =
+                                if (topBarPlaceables.isEmpty()) {
+                                    insets.calculateTopPadding()
+                                } else {
+                                    topBarHeight.toDp()
+                                },
+                            bottom =
+                                if (bottomBarPlaceables.isEmpty() || bottomBarHeight == null) {
+                                    insets.calculateBottomPadding()
+                                } else {
+                                    bottomBarHeight.toDp()
+                                },
+                            start = insets.calculateStartPadding((this@SubcomposeLayout).layoutDirection),
+                            end = insets.calculateEndPadding((this@SubcomposeLayout).layoutDirection),
+                        )
+                    content(innerPadding)
+                }.map { it.measure(looseConstraints) }
+
+            // Placing to control drawing order to match default elevation of each placeable
+
+            bodyContentPlaceables.forEach {
+                it.place(0, 0)
+            }
+            topBarPlaceables.forEach {
+                it.place(0, 0)
+            }
+            snackbarPlaceables.forEach {
+                it.place(
+                    (layoutWidth - snackbarWidth) / 2 +
+                        contentWindowInsets.getLeft(
+                            this@SubcomposeLayout,
+                            layoutDirection,
+                        ),
+                    layoutHeight - snackbarOffsetFromBottom,
+                )
+            }
+            // The bottom bar is always at the bottom of the layout
+            bottomBarPlaceables.forEach {
+                it.place(0, layoutHeight - (bottomBarHeight ?: 0))
+            }
+            // Explicitly not using placeRelative here as `leftOffset` already accounts for RTL
+            fabPlacement?.let { placement ->
+                fabPlaceables.forEach {
+                    it.place(placement.left, layoutHeight - fabOffsetFromBottom!!)
+                }
+            }
+        }
+    }
+}
+
+object ScaffoldDefaults {
+    val contentWindowInsets: WindowInsets
+        @Composable
+        get() = WindowInsets.systemBarsForVisualComponents
+}
+
+@JvmInline
+value class FabPosition internal constructor(
+    @Suppress("unused") private val value: Int,
+) {
+    companion object {
+        val Center = FabPosition(0)
+
+        val End = FabPosition(1)
+    }
+
+    override fun toString(): String {
+        return when (this) {
+            Center -> "FabPosition.Center"
+            else -> "FabPosition.End"
+        }
+    }
+}
+
+@Immutable
+internal class FabPlacement(
+    val left: Int,
+    val width: Int,
+    val height: Int,
+)
+
+internal val LocalFabPlacement = staticCompositionLocalOf<FabPlacement?> { null }
+
+private val FabSpacing = 16.dp
+
+private enum class ScaffoldLayoutContent { TopBar, MainContent, Snackbar, Fab, BottomBar }
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Slider.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Slider.kt
new file mode 100644
index 0000000..b2c4f82
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Slider.kt
@@ -0,0 +1,438 @@
+package io.visus.solanim.ui.components
+
+import androidx.annotation.IntRange
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.text.BasicText
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+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 com.nomanr.composables.slider.BasicRangeSlider
+import com.nomanr.composables.slider.BasicSlider
+import com.nomanr.composables.slider.RangeSliderState
+import com.nomanr.composables.slider.SliderColors
+import com.nomanr.composables.slider.SliderState
+import io.visus.solanim.ui.AppTheme
+import androidx.compose.ui.tooling.preview.Preview
+
+@Composable
+fun Slider(
+    value: Float,
+    onValueChange: (Float) -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    onValueChangeFinished: (() -> Unit)? = null,
+    colors: SliderColors = SliderDefaults.colors(),
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    @IntRange(from = 0) steps: Int = 0,
+    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
+) {
+    val state =
+        remember(steps, valueRange) {
+            SliderState(
+                value,
+                steps,
+                onValueChangeFinished,
+                valueRange,
+            )
+        }
+
+    state.onValueChangeFinished = onValueChangeFinished
+    state.onValueChange = onValueChange
+    state.value = value
+
+    Slider(
+        state = state,
+        modifier = modifier,
+        enabled = enabled,
+        interactionSource = interactionSource,
+        colors = colors,
+    )
+}
+
+@Composable
+fun Slider(
+    state: SliderState,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    colors: SliderColors = SliderDefaults.colors(),
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+    require(state.steps >= 0) { "steps should be >= 0" }
+
+    BasicSlider(modifier = modifier, state = state, colors = colors, enabled = enabled, interactionSource = interactionSource)
+}
+
+@Composable
+fun RangeSlider(
+    value: ClosedFloatingPointRange<Float>,
+    onValueChange: (ClosedFloatingPointRange<Float>) -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
+    @IntRange(from = 0) steps: Int = 0,
+    onValueChangeFinished: (() -> Unit)? = null,
+    colors: SliderColors = SliderDefaults.colors(),
+    startInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    endInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+    val state =
+        remember(steps, valueRange) {
+            RangeSliderState(
+                value.start,
+                value.endInclusive,
+                steps,
+                onValueChangeFinished,
+                valueRange,
+            )
+        }
+
+    state.onValueChangeFinished = onValueChangeFinished
+    state.onValueChange = { onValueChange(it.start..it.endInclusive) }
+    state.activeRangeStart = value.start
+    state.activeRangeEnd = value.endInclusive
+
+    RangeSlider(
+        state = state,
+        modifier = modifier,
+        enabled = enabled,
+        colors = colors,
+        startInteractionSource = startInteractionSource,
+        endInteractionSource = endInteractionSource,
+    )
+}
+
+@Composable
+fun RangeSlider(
+    state: RangeSliderState,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    colors: SliderColors = SliderDefaults.colors(),
+    startInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    endInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+    require(state.steps >= 0) { "steps should be >= 0" }
+
+    BasicRangeSlider(
+        modifier = modifier,
+        state = state,
+        enabled = enabled,
+        startInteractionSource = startInteractionSource,
+        endInteractionSource = endInteractionSource,
+        colors = colors,
+    )
+}
+
+@Stable
+object SliderDefaults {
+    @Composable
+    fun colors(
+        thumbColor: Color = AppTheme.colors.primary,
+        activeTrackColor: Color = AppTheme.colors.primary,
+        activeTickColor: Color = AppTheme.colors.onPrimary,
+        inactiveTrackColor: Color = AppTheme.colors.secondary,
+        inactiveTickColor: Color = AppTheme.colors.primary,
+        disabledThumbColor: Color = AppTheme.colors.disabled,
+        disabledActiveTrackColor: Color = AppTheme.colors.disabled,
+        disabledActiveTickColor: Color = AppTheme.colors.disabled,
+        disabledInactiveTrackColor: Color = AppTheme.colors.disabled,
+        disabledInactiveTickColor: Color = Color.Unspecified,
+    ) = SliderColors(
+        thumbColor = thumbColor,
+        activeTrackColor = activeTrackColor,
+        activeTickColor = activeTickColor,
+        inactiveTrackColor = inactiveTrackColor,
+        inactiveTickColor = inactiveTickColor,
+        disabledThumbColor = disabledThumbColor,
+        disabledActiveTrackColor = disabledActiveTrackColor,
+        disabledActiveTickColor = disabledActiveTickColor,
+        disabledInactiveTrackColor = disabledInactiveTrackColor,
+        disabledInactiveTickColor = disabledInactiveTickColor,
+    )
+}
+
+@Preview
+@Composable
+private fun SliderPreview() {
+    AppTheme {
+        Column(
+            modifier =
+                Modifier
+                    .background(Color.White)
+                    .verticalScroll(rememberScrollState())
+                    .padding(16.dp)
+                    .fillMaxSize(),
+            verticalArrangement = Arrangement.spacedBy(32.dp),
+        ) {
+            BasicText(
+                text = "Slider Components",
+                style = AppTheme.typography.h3,
+            )
+
+            Column {
+                BasicText(
+                    text = "Basic Slider",
+                    style = AppTheme.typography.h4,
+                )
+                var value by remember { mutableFloatStateOf(0.5f) }
+                Slider(
+                    value = value,
+                    onValueChange = { value = it },
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+
+            Column {
+                BasicText(
+                    text = "Stepped Slider (5 steps)",
+                    style = AppTheme.typography.h4,
+                )
+                var value by remember { mutableFloatStateOf(0.4f) }
+                Slider(
+                    value = value,
+                    onValueChange = { value = it },
+                    steps = 4,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+
+            Column {
+                BasicText(
+                    text = "Custom Range (0-100)",
+                    style = AppTheme.typography.h4,
+                )
+                var value by remember { mutableFloatStateOf(30f) }
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(16.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Slider(
+                        value = value,
+                        onValueChange = { value = it },
+                        valueRange = 0f..100f,
+                        modifier = Modifier.weight(1f),
+                    )
+                    BasicText(
+                        text = "${value.toInt()}",
+                        style = AppTheme.typography.body1,
+                        modifier = Modifier.width(40.dp),
+                    )
+                }
+            }
+
+            Column {
+                BasicText(
+                    text = "Disabled States",
+                    style = AppTheme.typography.h4,
+                )
+                Slider(
+                    value = 0.3f,
+                    onValueChange = {},
+                    enabled = false,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+                Spacer(Modifier.height(8.dp))
+                Slider(
+                    value = 0.7f,
+                    onValueChange = {},
+                    enabled = false,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+
+            Column {
+                 BasicText(
+                    text = "Custom Colors",
+                    style = AppTheme.typography.h4,
+                )
+                var value by remember { mutableFloatStateOf(0.5f) }
+                Slider(
+                    value = value,
+                    onValueChange = { value = it },
+                    colors =
+                        SliderDefaults.colors(
+                            thumbColor = AppTheme.colors.error,
+                            activeTrackColor = AppTheme.colors.error,
+                            inactiveTrackColor = AppTheme.colors.error.copy(alpha = 0.3f),
+                        ),
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+
+            Column {
+                 BasicText(
+                    text = "Interactive Slider",
+                    style = AppTheme.typography.h4,
+                )
+                var value by remember { mutableFloatStateOf(50f) }
+                var isEditing by remember { mutableStateOf(false) }
+                 BasicText(
+                    text = if (isEditing) "Editing..." else "Value: ${value.toInt()}",
+                    style = AppTheme.typography.body1,
+                )
+                Slider(
+                    value = value,
+                    onValueChange = {
+                        value = it
+                        isEditing = true
+                    },
+                    valueRange = 0f..100f,
+                    onValueChangeFinished = { isEditing = false },
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun RangeSliderPreview() {
+    AppTheme {
+        Column(
+            modifier =
+                Modifier
+                    .background(Color.White)
+                    .verticalScroll(rememberScrollState())
+                    .padding(16.dp)
+                    .fillMaxWidth(),
+            verticalArrangement = Arrangement.spacedBy(32.dp),
+        ) {
+             BasicText(
+                text = "Range Slider Components",
+                style = AppTheme.typography.h3,
+            )
+
+            Column {
+                 BasicText(
+                    text = "Basic Range Slider",
+                    style = AppTheme.typography.h4,
+                )
+                var range by remember { mutableStateOf(0.2f..0.8f) }
+                RangeSlider(
+                    value = range,
+                    onValueChange = { range = it },
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+
+            Column {
+                 BasicText(
+                    text = "Stepped Range Slider (5 steps)",
+                    style = AppTheme.typography.h4,
+                )
+                var range by remember { mutableStateOf(0.2f..0.6f) }
+                RangeSlider(
+                    value = range,
+                    onValueChange = { range = it },
+                    steps = 4,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+
+            Column {
+                 BasicText(
+                    text = "Custom Range (0-100)",
+                    style = AppTheme.typography.h4,
+                )
+                var range by remember { mutableStateOf(20f..80f) }
+                Column {
+                    RangeSlider(
+                        value = range,
+                        onValueChange = { range = it },
+                        valueRange = 0f..100f,
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.SpaceBetween,
+                    ) {
+                         BasicText(
+                            text = "Start: ${range.start.toInt()}",
+                            style = AppTheme.typography.body1,
+                        )
+                         BasicText(
+                            text = "End: ${range.endInclusive.toInt()}",
+                            style = AppTheme.typography.body1,
+                        )
+                    }
+                }
+            }
+
+            Column {
+                 BasicText(
+                    text = "Disabled State",
+                    style = AppTheme.typography.h4,
+                )
+                RangeSlider(
+                    value = 0.3f..0.7f,
+                    onValueChange = {},
+                    enabled = false,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+
+            Column {
+                 BasicText(
+                    text = "Custom Colors",
+                    style = AppTheme.typography.h4,
+                )
+                var range by remember { mutableStateOf(0.3f..0.7f) }
+                RangeSlider(
+                    value = range,
+                    onValueChange = { range = it },
+                    colors =
+                        SliderDefaults.colors(
+                            thumbColor = AppTheme.colors.error,
+                            activeTrackColor = AppTheme.colors.error,
+                            inactiveTrackColor = AppTheme.colors.error.copy(alpha = 0.3f),
+                        ),
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+
+            Column {
+                 BasicText(
+                    text = "Interactive Range Slider",
+                    style = AppTheme.typography.h4,
+                )
+                var range by remember { mutableStateOf(30f..70f) }
+                var isEditing by remember { mutableStateOf(false) }
+                 BasicText(
+                    text = if (isEditing) "Editing..." else "Range: ${range.start.toInt()} - ${range.endInclusive.toInt()}",
+                    style = AppTheme.typography.body1,
+                )
+                RangeSlider(
+                    value = range,
+                    onValueChange = {
+                        range = it
+                        isEditing = true
+                    },
+                    valueRange = 0f..100f,
+                    onValueChangeFinished = { isEditing = false },
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+        }
+    }
+}
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Surface.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Surface.kt
new file mode 100644
index 0000000..72db7e0
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Surface.kt
@@ -0,0 +1,202 @@
+package io.visus.solanim.ui.components
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.selection.selectable
+import androidx.compose.foundation.selection.toggleable
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.NonRestartableComposable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.semantics.isTraversalGroup
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import io.visus.solanim.ui.AppTheme
+import io.visus.solanim.ui.LocalContentColor
+import io.visus.solanim.ui.contentColorFor
+import io.visus.solanim.ui.foundation.ripple
+
+@Composable
+@NonRestartableComposable
+fun Surface(
+    modifier: Modifier = Modifier,
+    shape: Shape = RectangleShape,
+    color: Color = AppTheme.colors.surface,
+    contentColor: Color = contentColorFor(color),
+    shadowElevation: Dp = 0.dp,
+    border: BorderStroke? = null,
+    content: @Composable () -> Unit,
+) {
+    CompositionLocalProvider(
+        LocalContentColor provides contentColor,
+    ) {
+        Box(
+            modifier =
+                modifier
+                    .surface(
+                        shape = shape,
+                        backgroundColor = color,
+                        border = border,
+                        shadowElevation = shadowElevation,
+                    )
+                    .semantics(mergeDescendants = false) {
+                        isTraversalGroup = true
+                    }
+                    .pointerInput(Unit) {},
+            propagateMinConstraints = true,
+        ) {
+            content()
+        }
+    }
+}
+
+@Composable
+@NonRestartableComposable
+fun Surface(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    shape: Shape = RectangleShape,
+    color: Color = AppTheme.colors.background,
+    contentColor: Color = contentColorFor(color),
+    shadowElevation: Dp = 0.dp,
+    border: BorderStroke? = null,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    content: @Composable () -> Unit,
+) {
+    CompositionLocalProvider(
+        LocalContentColor provides contentColor,
+    ) {
+        Box(
+            modifier =
+                modifier
+                    .surface(
+                        shape = shape,
+                        backgroundColor = color,
+                        border = border,
+                        shadowElevation = shadowElevation,
+                    )
+                    .clickable(
+                        interactionSource = interactionSource,
+                        indication = ripple(color = contentColor),
+                        enabled = enabled,
+                        onClick = onClick,
+                    ),
+            propagateMinConstraints = true,
+        ) {
+            content()
+        }
+    }
+}
+
+@Composable
+@NonRestartableComposable
+fun Surface(
+    selected: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    shape: Shape = RectangleShape,
+    color: Color = AppTheme.colors.background,
+    contentColor: Color = contentColorFor(color),
+    shadowElevation: Dp = 0.dp,
+    border: BorderStroke? = null,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    content: @Composable () -> Unit,
+) {
+    CompositionLocalProvider(
+        LocalContentColor provides contentColor,
+    ) {
+        Box(
+            modifier =
+                modifier
+                    .surface(
+                        shape = shape,
+                        backgroundColor = color,
+                        border = border,
+                        shadowElevation = shadowElevation,
+                    )
+                    .selectable(
+                        selected = selected,
+                        interactionSource = interactionSource,
+                        indication = ripple(),
+                        enabled = enabled,
+                        onClick = onClick,
+                    ),
+            propagateMinConstraints = true,
+        ) {
+            content()
+        }
+    }
+}
+
+@Composable
+@NonRestartableComposable
+fun Surface(
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    shape: Shape = RectangleShape,
+    color: Color = AppTheme.colors.background,
+    contentColor: Color = contentColorFor(color),
+    shadowElevation: Dp = 0.dp,
+    border: BorderStroke? = null,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    content: @Composable () -> Unit,
+) {
+    CompositionLocalProvider(
+        LocalContentColor provides contentColor,
+    ) {
+        Box(
+            modifier =
+                modifier
+                    .surface(
+                        shape = shape,
+                        backgroundColor = color,
+                        border = border,
+                        shadowElevation = shadowElevation,
+                    )
+                    .toggleable(
+                        value = checked,
+                        interactionSource = interactionSource,
+                        indication = ripple(),
+                        enabled = enabled,
+                        onValueChange = onCheckedChange,
+                    ),
+            propagateMinConstraints = true,
+        ) {
+            content()
+        }
+    }
+}
+
+@Composable
+private fun Modifier.surface(
+    shape: Shape,
+    backgroundColor: Color,
+    border: BorderStroke?,
+    shadowElevation: Dp,
+) = this
+    .shadow(
+        ambientColor = AppTheme.colors.elevation,
+        spotColor = AppTheme.colors.elevation,
+        elevation = shadowElevation,
+        shape = shape,
+        clip = false,
+    )
+    .then(if (border != null) Modifier.border(border, shape) else Modifier)
+    .background(color = backgroundColor, shape = shape)
+    .clip(shape)
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Text.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Text.kt
new file mode 100644
index 0000000..bb63ce2
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/Text.kt
@@ -0,0 +1,180 @@
+package io.visus.solanim.ui.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.BasicText
+import androidx.compose.foundation.text.InlineTextContent
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.TextLayoutResult
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import io.visus.solanim.ui.LocalContentColor
+import io.visus.solanim.ui.LocalTextStyle
+import io.visus.solanim.ui.LocalTypography
+import androidx.compose.ui.tooling.preview.Preview
+
+@Composable
+fun Text(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = LocalContentColor.current,
+    fontSize: TextUnit = TextUnit.Unspecified,
+    fontStyle: FontStyle? = null,
+    fontWeight: FontWeight? = null,
+    fontFamily: FontFamily? = null,
+    letterSpacing: TextUnit = TextUnit.Unspecified,
+    textDecoration: TextDecoration? = null,
+    textAlign: TextAlign = TextAlign.Start,
+    lineHeight: TextUnit = TextUnit.Unspecified,
+    overflow: TextOverflow = TextOverflow.Clip,
+    softWrap: Boolean = true,
+    maxLines: Int = Int.MAX_VALUE,
+    minLines: Int = 1,
+    onTextLayout: (TextLayoutResult) -> Unit = {},
+    style: TextStyle = LocalTextStyle.current,
+) {
+    Text(
+        text = AnnotatedString(text = text),
+        modifier = modifier,
+        color = color,
+        fontSize = fontSize,
+        fontStyle = fontStyle,
+        fontWeight = fontWeight,
+        fontFamily = fontFamily,
+        letterSpacing = letterSpacing,
+        textDecoration = textDecoration,
+        textAlign = textAlign,
+        lineHeight = lineHeight,
+        overflow = overflow,
+        softWrap = softWrap,
+        maxLines = maxLines,
+        minLines = minLines,
+        onTextLayout = onTextLayout,
+        style = style,
+    )
+}
+
+@Composable
+internal fun Text(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = LocalContentColor.current,
+    fontSize: TextUnit = TextUnit.Unspecified,
+    fontStyle: FontStyle? = null,
+    fontWeight: FontWeight? = null,
+    fontFamily: FontFamily? = null,
+    letterSpacing: TextUnit = TextUnit.Unspecified,
+    textDecoration: TextDecoration? = null,
+    textAlign: TextAlign = TextAlign.Start,
+    lineHeight: TextUnit = TextUnit.Unspecified,
+    overflow: TextOverflow = TextOverflow.Clip,
+    softWrap: Boolean = true,
+    maxLines: Int = Int.MAX_VALUE,
+    minLines: Int = 1,
+    inlineContent: Map<String, InlineTextContent> = mapOf(),
+    onTextLayout: (TextLayoutResult) -> Unit = {},
+    style: TextStyle = LocalTextStyle.current,
+) {
+    val mergedStyle =
+        style.merge(
+            TextStyle(
+                color = color,
+                fontSize = fontSize,
+                fontWeight = fontWeight,
+                textAlign = textAlign,
+                lineHeight = lineHeight,
+                fontFamily = fontFamily,
+                textDecoration = textDecoration,
+                fontStyle = fontStyle,
+                letterSpacing = letterSpacing,
+            ),
+        )
+    BasicText(
+        text,
+        modifier,
+        mergedStyle,
+        onTextLayout,
+        overflow,
+        softWrap,
+        maxLines,
+        minLines,
+        inlineContent,
+    )
+}
+
+@Preview
+@Composable
+fun TypographySample() {
+    val typography = LocalTypography.current
+
+    Column(
+        modifier =
+            Modifier
+                .fillMaxSize()
+                .padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        Text(
+            text = "H1 Heading",
+            style = typography.h1,
+        )
+        Text(
+            text = "H2 Heading",
+            style = typography.h2,
+        )
+        Text(
+            text = "H3 Heading",
+            style = typography.h3,
+        )
+        Text(
+            text = "H4 Heading",
+            style = typography.h4,
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        Text(
+            text = "This is body1 text.",
+            style = typography.body1,
+        )
+        Text(
+            text = "This is body2 text.",
+            style = typography.body2,
+        )
+        Text(
+            text = "Body3 text for fine print.",
+            style = typography.body3,
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        Text(
+            text = "Label1: Form Label",
+            style = typography.label1,
+        )
+        Text(
+            text = "Label2: Secondary Info",
+            style = typography.label2,
+        )
+        Text(
+            text = "Label3: Tiny Details",
+            style = typography.label3,
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
+    }
+}
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/topbar/TopBar.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/topbar/TopBar.kt
new file mode 100644
index 0000000..ff57e64
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/topbar/TopBar.kt
@@ -0,0 +1,320 @@
+package io.visus.solanim.ui.components.topbar
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.AnimationSpec
+import androidx.compose.animation.core.DecayAnimationSpec
+import androidx.compose.animation.core.FastOutLinearInEasing
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.spring
+import androidx.compose.animation.rememberSplineBasedDecay
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.draggable
+import androidx.compose.foundation.gestures.rememberDraggableState
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.only
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.Saver
+import androidx.compose.runtime.saveable.listSaver
+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.draw.clipToBounds
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.lerp
+import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.dp
+import io.visus.solanim.ui.AppTheme
+import io.visus.solanim.ui.LocalContentColor
+import io.visus.solanim.ui.components.Surface
+import io.visus.solanim.ui.components.topbar.TopBarDefaults.TopBarHeight
+import io.visus.solanim.ui.contentColorFor
+import io.visus.solanim.ui.foundation.systemBarsForVisualComponents
+
+@Composable
+fun TopBar(
+    modifier: Modifier = Modifier,
+    scrollBehavior: TopBarScrollBehavior? = null,
+    colors: TopBarColors = TopBarDefaults.topBarColors(),
+    windowInsets: WindowInsets? = TopBarDefaults.windowInsets,
+    content: @Composable () -> Unit,
+) {
+    TopBarLayout(
+        modifier = modifier,
+        scrollBehavior = scrollBehavior,
+        colors = colors,
+        windowInsets = windowInsets,
+    ) {
+        Row(
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .height(TopBarHeight),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
+        ) {
+            content()
+        }
+    }
+}
+
+@Composable
+internal fun TopBarLayout(
+    modifier: Modifier = Modifier,
+    colors: TopBarColors = TopBarDefaults.topBarColors(),
+    windowInsets: WindowInsets? = TopBarDefaults.windowInsets,
+    scrollBehavior: TopBarScrollBehavior? = null,
+    content: @Composable () -> Unit,
+) {
+    val height = remember { mutableIntStateOf(0) }
+
+    val density = LocalDensity.current
+
+    val windowInsetsPaddingValues = windowInsets?.asPaddingValues(density) ?: PaddingValues()
+
+    val heightOffsetLimit = -height.intValue.toFloat()
+    SideEffect {
+        if (scrollBehavior?.state?.heightOffsetLimit != heightOffsetLimit) {
+            scrollBehavior?.state?.heightOffsetLimit = heightOffsetLimit
+        }
+    }
+
+    val colorTransitionFraction = scrollBehavior?.state?.overlappedFraction ?: 0f
+    val fraction = if (colorTransitionFraction > 0) colorTransitionFraction else 0f
+    val topBarContainerColor by animateColorAsState(
+        targetValue = colors.containerColor(fraction),
+        animationSpec = spring(stiffness = Spring.StiffnessMediumLow),
+        label = "animate container color",
+    )
+    val topBarContentColor by animateColorAsState(
+        targetValue = colors.contentColor(fraction),
+        animationSpec = spring(stiffness = Spring.StiffnessMediumLow),
+        label = "animate content color",
+    )
+
+    val topBarDragModifier =
+        if (scrollBehavior != null && !scrollBehavior.isPinned) {
+            Modifier.draggable(
+                orientation = Orientation.Vertical,
+                state =
+                    rememberDraggableState {
+                        scrollBehavior.state.heightOffset += it
+                    },
+                onDragStopped = { velocity ->
+                    settleBar(
+                        scrollBehavior.state,
+                        velocity,
+                        scrollBehavior.flingAnimationSpec,
+                        scrollBehavior.snapAnimationSpec,
+                    )
+                },
+            )
+        } else {
+            Modifier
+        }
+
+    // calculating based on scrolling behaviour
+    val dynamicHeight = height.intValue + (scrollBehavior?.state?.heightOffset ?: 0).toInt()
+
+    Surface(modifier = modifier.then(topBarDragModifier), color = topBarContainerColor) {
+        CompositionLocalProvider(LocalContentColor provides topBarContentColor) {
+            Layout(
+                content = content,
+                modifier =
+                    Modifier
+                        .padding(windowInsetsPaddingValues)
+                        .clipToBounds(),
+            ) { measurables, constraints ->
+                val placeables =
+                    measurables.map { measurable ->
+                        measurable.measure(constraints)
+                    }
+
+                if (placeables.isEmpty() || placeables.size > 1) {
+                    throw IllegalStateException("TopBar expects one child!")
+                }
+
+                if (height.intValue == 0) height.intValue = placeables.first().height
+
+                layout(constraints.maxWidth, dynamicHeight) {
+                    // Expects only one child, a layout with topbar content
+                    placeables.first().place(0, dynamicHeight - height.intValue)
+                }
+            }
+        }
+    }
+}
+
+object TopBarDefaults {
+    val TopBarHeight = 56.dp
+
+    @Composable
+    fun topBarColors(
+        containerColor: Color = AppTheme.colors.background,
+        scrolledContainerColor: Color = AppTheme.colors.background,
+    ): TopBarColors =
+        TopBarColors(
+            containerColor,
+            scrolledContainerColor,
+        )
+
+    val windowInsets: WindowInsets
+        @Composable get() =
+            WindowInsets.systemBarsForVisualComponents.only(
+                WindowInsetsSides.Horizontal + WindowInsetsSides.Top,
+            )
+
+    @Composable
+    fun pinnedScrollBehavior(
+        state: TopBarState = rememberTopBarState(),
+        canScroll: () -> Boolean = { true },
+    ): TopBarScrollBehavior = PinnedScrollBehavior(state = state, canScroll = canScroll)
+
+    @Composable
+    fun enterAlwaysScrollBehavior(
+        state: TopBarState = rememberTopBarState(),
+        canScroll: () -> Boolean = { true },
+        snapAnimationSpec: AnimationSpec<Float>? = spring(stiffness = Spring.StiffnessMediumLow),
+        flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay(),
+    ): TopBarScrollBehavior =
+        EnterAlwaysScrollBehavior(
+            state = state,
+            snapAnimationSpec = snapAnimationSpec,
+            flingAnimationSpec = flingAnimationSpec,
+            canScroll = canScroll,
+        )
+
+    @Composable
+    fun exitUntilCollapsedScrollBehavior(
+        state: TopBarState = rememberTopBarState(),
+        canScroll: () -> Boolean = { true },
+        snapAnimationSpec: AnimationSpec<Float>? = spring(stiffness = Spring.StiffnessMediumLow),
+        flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay(),
+    ): TopBarScrollBehavior =
+        ExitUntilCollapsedScrollBehavior(
+            state = state,
+            snapAnimationSpec = snapAnimationSpec,
+            flingAnimationSpec = flingAnimationSpec,
+            canScroll = canScroll,
+        )
+}
+
+@Composable
+fun rememberTopBarState(
+    initialHeightOffsetLimit: Float = -Float.MAX_VALUE,
+    initialHeightOffset: Float = 0f,
+    initialContentOffset: Float = 0f,
+): TopBarState {
+    return rememberSaveable(saver = TopBarState.Saver) {
+        TopBarState(
+            initialHeightOffsetLimit,
+            initialHeightOffset,
+            initialContentOffset,
+        )
+    }
+}
+
+@Stable
+class TopBarState(
+    initialHeightOffsetLimit: Float,
+    initialHeightOffset: Float,
+    initialContentOffset: Float,
+) {
+    var heightOffsetLimit by mutableFloatStateOf(initialHeightOffsetLimit)
+
+    var heightOffset: Float
+        get() = _heightOffset.floatValue
+        set(newOffset) {
+            _heightOffset.floatValue =
+                newOffset.coerceIn(
+                    minimumValue = heightOffsetLimit,
+                    maximumValue = 0f,
+                )
+        }
+
+    var contentOffset by mutableStateOf(initialContentOffset)
+
+    val collapsedFraction: Float
+        get() =
+            if (heightOffsetLimit != 0f) {
+                heightOffset / heightOffsetLimit
+            } else {
+                0f
+            }
+
+    val overlappedFraction: Float
+        get() =
+            if (heightOffsetLimit != 0f) {
+                1 - (
+                    (heightOffsetLimit - contentOffset).coerceIn(
+                        minimumValue = heightOffsetLimit,
+                        maximumValue = 0f,
+                    ) / heightOffsetLimit
+                )
+            } else {
+                0f
+            }
+
+    companion object {
+        /**
+         * The default [Saver] implementation for [TopBarState].
+         */
+        val Saver: Saver<TopBarState, *> =
+            listSaver(save = {
+                listOf(
+                    it.heightOffsetLimit,
+                    it.heightOffset,
+                    it.contentOffset,
+                )
+            }, restore = {
+                TopBarState(
+                    initialHeightOffsetLimit = it[0],
+                    initialHeightOffset = it[1],
+                    initialContentOffset = it[2],
+                )
+            })
+    }
+
+    private var _heightOffset = mutableFloatStateOf(initialHeightOffset)
+}
+
+@Stable
+data class TopBarColors(
+    val containerColor: Color,
+    val scrolledContainerColor: Color,
+) {
+    @Composable
+    internal fun containerColor(colorTransitionFraction: Float): Color {
+        return lerp(
+            containerColor,
+            scrolledContainerColor,
+            FastOutLinearInEasing.transform(colorTransitionFraction),
+        )
+    }
+
+    @Composable
+    internal fun contentColor(colorTransitionFraction: Float): Color {
+        return lerp(
+            contentColorFor(color = containerColor),
+            contentColorFor(color = scrolledContainerColor),
+            FastOutLinearInEasing.transform(colorTransitionFraction),
+        )
+    }
+}
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/topbar/TopBarScrollBehaviours.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/topbar/TopBarScrollBehaviours.kt
new file mode 100644
index 0000000..d4cd525
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/components/topbar/TopBarScrollBehaviours.kt
@@ -0,0 +1,234 @@
+package io.visus.solanim.ui.components.topbar
+
+import androidx.compose.animation.core.AnimationSpec
+import androidx.compose.animation.core.AnimationState
+import androidx.compose.animation.core.DecayAnimationSpec
+import androidx.compose.animation.core.animateDecay
+import androidx.compose.animation.core.animateTo
+import androidx.compose.runtime.Stable
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
+import androidx.compose.ui.input.nestedscroll.NestedScrollSource
+import androidx.compose.ui.unit.Velocity
+import kotlin.math.abs
+
+class PinnedScrollBehavior(
+    override val state: TopBarState,
+    val canScroll: () -> Boolean = { true },
+) : TopBarScrollBehavior {
+    override val isPinned: Boolean = true
+    override val snapAnimationSpec: AnimationSpec<Float>? = null
+    override val flingAnimationSpec: DecayAnimationSpec<Float>? = null
+    override var nestedScrollConnection =
+        object : NestedScrollConnection {
+            override fun onPostScroll(
+                consumed: Offset,
+                available: Offset,
+                source: NestedScrollSource,
+            ): Offset {
+                if (!canScroll()) return Offset.Zero
+                if (consumed.y == 0f && available.y > 0f) {
+                    // Reset the total content offset to zero when scrolling all the way down.
+                    // This will eliminate some float precision inaccuracies.
+                    state.contentOffset = 0f
+                } else {
+                    state.contentOffset += consumed.y
+                }
+                return Offset.Zero
+            }
+        }
+}
+
+class EnterAlwaysScrollBehavior(
+    override val state: TopBarState,
+    override val snapAnimationSpec: AnimationSpec<Float>?,
+    override val flingAnimationSpec: DecayAnimationSpec<Float>?,
+    val canScroll: () -> Boolean = { true },
+) : TopBarScrollBehavior {
+    override val isPinned: Boolean = false
+    override var nestedScrollConnection =
+        object : NestedScrollConnection {
+            override fun onPreScroll(
+                available: Offset,
+                source: NestedScrollSource,
+            ): Offset {
+                if (!canScroll()) return Offset.Zero
+                val prevHeightOffset = state.heightOffset
+                state.heightOffset += available.y
+                return if (prevHeightOffset != state.heightOffset) {
+                    // We're in the middle of top app bar collapse or expand.
+                    // Consume only the scroll on the Y axis.
+                    available.copy(x = 0f)
+                } else {
+                    Offset.Zero
+                }
+            }
+
+            override fun onPostScroll(
+                consumed: Offset,
+                available: Offset,
+                source: NestedScrollSource,
+            ): Offset {
+                if (!canScroll()) return Offset.Zero
+                state.contentOffset += consumed.y
+                if (state.heightOffset == 0f || state.heightOffset == state.heightOffsetLimit) {
+                    if (consumed.y == 0f && available.y > 0f) {
+                        // Reset the total content offset to zero when scrolling all the way down.
+                        // This will eliminate some float precision inaccuracies.
+                        state.contentOffset = 0f
+                    }
+                }
+                state.heightOffset += consumed.y
+                return Offset.Zero
+            }
+
+            override suspend fun onPostFling(
+                consumed: Velocity,
+                available: Velocity,
+            ): Velocity {
+                val superConsumed = super.onPostFling(consumed, available)
+                return superConsumed +
+                    settleBar(
+                        state,
+                        available.y,
+                        flingAnimationSpec,
+                        snapAnimationSpec,
+                    )
+            }
+        }
+}
+
+class ExitUntilCollapsedScrollBehavior(
+    override val state: TopBarState,
+    override val snapAnimationSpec: AnimationSpec<Float>?,
+    override val flingAnimationSpec: DecayAnimationSpec<Float>?,
+    val canScroll: () -> Boolean = { true },
+) : TopBarScrollBehavior {
+    override val isPinned: Boolean = false
+    override var nestedScrollConnection =
+        object : NestedScrollConnection {
+            override fun onPreScroll(
+                available: Offset,
+                source: NestedScrollSource,
+            ): Offset {
+                // Don't intercept if scrolling down.
+                if (!canScroll() || available.y > 0f) return Offset.Zero
+
+                val prevHeightOffset = state.heightOffset
+                state.heightOffset += available.y
+                return if (prevHeightOffset != state.heightOffset) {
+                    // We're in the middle of top app bar collapse or expand.
+                    // Consume only the scroll on the Y axis.
+                    available.copy(x = 0f)
+                } else {
+                    Offset.Zero
+                }
+            }
+
+            override fun onPostScroll(
+                consumed: Offset,
+                available: Offset,
+                source: NestedScrollSource,
+            ): Offset {
+                if (!canScroll()) return Offset.Zero
+                state.contentOffset += consumed.y
+
+                if (available.y < 0f || consumed.y < 0f) {
+                    // When scrolling up, just update the state's height offset.
+                    val oldHeightOffset = state.heightOffset
+                    state.heightOffset += consumed.y
+                    return Offset(0f, state.heightOffset - oldHeightOffset)
+                }
+
+                if (consumed.y == 0f && available.y > 0) {
+                    // Reset the total content offset to zero when scrolling all the way down. This
+                    // will eliminate some float precision inaccuracies.
+                    state.contentOffset = 0f
+                }
+
+                if (available.y > 0f) {
+                    // Adjust the height offset in case the consumed delta Y is less than what was
+                    // recorded as available delta Y in the pre-scroll.
+                    val oldHeightOffset = state.heightOffset
+                    state.heightOffset += available.y
+                    return Offset(0f, state.heightOffset - oldHeightOffset)
+                }
+                return Offset.Zero
+            }
+
+            override suspend fun onPostFling(
+                consumed: Velocity,
+                available: Velocity,
+            ): Velocity {
+                val superConsumed = super.onPostFling(consumed, available)
+                return superConsumed +
+                    settleBar(
+                        state,
+                        available.y,
+                        flingAnimationSpec,
+                        snapAnimationSpec,
+                    )
+            }
+        }
+}
+
+suspend fun settleBar(
+    state: TopBarState,
+    velocity: Float,
+    flingAnimationSpec: DecayAnimationSpec<Float>?,
+    snapAnimationSpec: AnimationSpec<Float>?,
+): Velocity {
+    // Check if the app bar is completely collapsed/expanded. If so, no need to settle the app bar,
+    // and just return Zero Velocity.
+    // Note that we don't check for 0f due to float precision with the collapsedFraction
+    // calculation.
+    if (state.collapsedFraction < 0.01f || state.collapsedFraction == 1f) {
+        return Velocity.Zero
+    }
+    var remainingVelocity = velocity
+    // In case there is an initial velocity that was left after a previous user fling, animate to
+    // continue the motion to expand or collapse the app bar.
+    if (flingAnimationSpec != null && abs(velocity) > 1f) {
+        var lastValue = 0f
+        AnimationState(
+            initialValue = 0f,
+            initialVelocity = velocity,
+        )
+            .animateDecay(flingAnimationSpec) {
+                val delta = value - lastValue
+                val initialHeightOffset = state.heightOffset
+                state.heightOffset = initialHeightOffset + delta
+                val consumed = abs(initialHeightOffset - state.heightOffset)
+                lastValue = value
+                remainingVelocity = this.velocity
+                // avoid rounding errors and stop if anything is unconsumed
+                if (abs(delta - consumed) > 0.5f) this.cancelAnimation()
+            }
+    }
+    // Snap if animation specs were provided.
+    if (snapAnimationSpec != null) {
+        if (state.heightOffset < 0 &&
+            state.heightOffset > state.heightOffsetLimit
+        ) {
+            AnimationState(initialValue = state.heightOffset).animateTo(
+                if (state.collapsedFraction < 0.5f) {
+                    0f
+                } else {
+                    state.heightOffsetLimit
+                },
+                animationSpec = snapAnimationSpec,
+            ) { state.heightOffset = value }
+        }
+    }
+
+    return Velocity(0f, remainingVelocity)
+}
+
+@Stable
+interface TopBarScrollBehavior {
+    val state: TopBarState
+    val isPinned: Boolean
+    val snapAnimationSpec: AnimationSpec<Float>?
+    val flingAnimationSpec: DecayAnimationSpec<Float>?
+    val nestedScrollConnection: NestedScrollConnection
+}
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/foundation/Elevation.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/foundation/Elevation.kt
new file mode 100644
index 0000000..38aef30
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/foundation/Elevation.kt
@@ -0,0 +1,74 @@
+package io.visus.solanim.ui.foundation
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.AnimationSpec
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.Easing
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.TweenSpec
+import androidx.compose.foundation.interaction.DragInteraction
+import androidx.compose.foundation.interaction.FocusInteraction
+import androidx.compose.foundation.interaction.HoverInteraction
+import androidx.compose.foundation.interaction.Interaction
+import androidx.compose.foundation.interaction.PressInteraction
+import androidx.compose.ui.unit.Dp
+
+internal suspend fun Animatable<Dp, *>.animateElevation(
+    target: Dp,
+    from: Interaction? = null,
+    to: Interaction? = null,
+) {
+    val spec =
+        when {
+            // Moving to a new state
+            to != null -> ElevationDefaults.incomingAnimationSpecForInteraction(to)
+            // Moving to default, from a previous state
+            from != null -> ElevationDefaults.outgoingAnimationSpecForInteraction(from)
+            // Loading the initial state, or moving back to the baseline state from a disabled /
+            // unknown state, so just snap to the final value.
+            else -> null
+        }
+    if (spec != null) animateTo(target, spec) else snapTo(target)
+}
+
+private object ElevationDefaults {
+    fun incomingAnimationSpecForInteraction(interaction: Interaction): AnimationSpec<Dp>? {
+        return when (interaction) {
+            is PressInteraction.Press -> DefaultIncomingSpec
+            is DragInteraction.Start -> DefaultIncomingSpec
+            is HoverInteraction.Enter -> DefaultIncomingSpec
+            is FocusInteraction.Focus -> DefaultIncomingSpec
+            else -> null
+        }
+    }
+
+    fun outgoingAnimationSpecForInteraction(interaction: Interaction): AnimationSpec<Dp>? {
+        return when (interaction) {
+            is PressInteraction.Press -> DefaultOutgoingSpec
+            is DragInteraction.Start -> DefaultOutgoingSpec
+            is HoverInteraction.Enter -> HoveredOutgoingSpec
+            is FocusInteraction.Focus -> DefaultOutgoingSpec
+            else -> null
+        }
+    }
+}
+
+private val OutgoingSpecEasing: Easing = CubicBezierEasing(0.40f, 0.00f, 0.60f, 1.00f)
+
+private val DefaultIncomingSpec =
+    TweenSpec<Dp>(
+        durationMillis = 120,
+        easing = FastOutSlowInEasing,
+    )
+
+private val DefaultOutgoingSpec =
+    TweenSpec<Dp>(
+        durationMillis = 150,
+        easing = OutgoingSpecEasing,
+    )
+
+private val HoveredOutgoingSpec =
+    TweenSpec<Dp>(
+        durationMillis = 120,
+        easing = OutgoingSpecEasing,
+    )
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/foundation/Ripple.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/foundation/Ripple.kt
new file mode 100644
index 0000000..00cc401
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/foundation/Ripple.kt
@@ -0,0 +1,216 @@
+package io.visus.solanim.ui.foundation
+
+import androidx.compose.foundation.IndicationNodeFactory
+import androidx.compose.foundation.interaction.InteractionSource
+import androidx.compose.material.ripple.RippleAlpha
+import androidx.compose.material.ripple.createRippleModifierNode
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.ProvidableCompositionLocal
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorProducer
+import androidx.compose.ui.graphics.isSpecified
+import androidx.compose.ui.node.CompositionLocalConsumerModifierNode
+import androidx.compose.ui.node.DelegatableNode
+import androidx.compose.ui.node.DelegatingNode
+import androidx.compose.ui.node.ObserverModifierNode
+import androidx.compose.ui.node.currentValueOf
+import androidx.compose.ui.node.observeReads
+import androidx.compose.ui.unit.Dp
+import io.visus.solanim.ui.LocalContentColor
+
+@Stable
+fun ripple(
+    bounded: Boolean = true,
+    radius: Dp = Dp.Unspecified,
+    color: Color = Color.Unspecified,
+): IndicationNodeFactory {
+    return if (radius == Dp.Unspecified && color == Color.Unspecified) {
+        if (bounded) return DefaultBoundedRipple else DefaultUnboundedRipple
+    } else {
+        RippleNodeFactory(bounded, radius, color)
+    }
+}
+
+@Stable
+fun ripple(
+    color: ColorProducer,
+    bounded: Boolean = true,
+    radius: Dp = Dp.Unspecified,
+): IndicationNodeFactory {
+    return RippleNodeFactory(bounded, radius, color)
+}
+
+/** Default values used by [ripple]. */
+object RippleDefaults {
+    /**
+     * Represents the default [RippleAlpha] that will be used for a ripple to indicate different
+     * states.
+     */
+    val RippleAlpha: RippleAlpha =
+        RippleAlpha(
+            pressedAlpha = StateTokens.PressedStateLayerOpacity,
+            focusedAlpha = StateTokens.FocusStateLayerOpacity,
+            draggedAlpha = StateTokens.DraggedStateLayerOpacity,
+            hoveredAlpha = StateTokens.HoverStateLayerOpacity,
+        )
+}
+
+val LocalRippleConfiguration: ProvidableCompositionLocal<RippleConfiguration?> =
+    compositionLocalOf {
+        RippleConfiguration()
+    }
+
+@Immutable
+class RippleConfiguration(
+    val color: Color = Color.Unspecified,
+    val rippleAlpha: RippleAlpha? = null,
+) {
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other !is RippleConfiguration) return false
+
+        if (color != other.color) return false
+        if (rippleAlpha != other.rippleAlpha) return false
+
+        return true
+    }
+
+    override fun hashCode(): Int {
+        var result = color.hashCode()
+        result = 31 * result + (rippleAlpha?.hashCode() ?: 0)
+        return result
+    }
+
+    override fun toString(): String {
+        return "RippleConfiguration(color=$color, rippleAlpha=$rippleAlpha)"
+    }
+}
+
+@Stable
+private class RippleNodeFactory
+    private constructor(
+        private val bounded: Boolean,
+        private val radius: Dp,
+        private val colorProducer: ColorProducer?,
+        private val color: Color,
+    ) : IndicationNodeFactory {
+        constructor(
+            bounded: Boolean,
+            radius: Dp,
+            colorProducer: ColorProducer,
+        ) : this(bounded, radius, colorProducer, Color.Unspecified)
+
+        constructor(bounded: Boolean, radius: Dp, color: Color) : this(bounded, radius, null, color)
+
+        override fun create(interactionSource: InteractionSource): DelegatableNode {
+            val colorProducer = colorProducer ?: ColorProducer { color }
+            return DelegatingThemeAwareRippleNode(interactionSource, bounded, radius, colorProducer)
+        }
+
+        override fun equals(other: Any?): Boolean {
+            if (this === other) return true
+            if (other !is RippleNodeFactory) return false
+
+            if (bounded != other.bounded) return false
+            if (radius != other.radius) return false
+            if (colorProducer != other.colorProducer) return false
+            return color == other.color
+        }
+
+        override fun hashCode(): Int {
+            var result = bounded.hashCode()
+            result = 31 * result + radius.hashCode()
+            result = 31 * result + colorProducer.hashCode()
+            result = 31 * result + color.hashCode()
+            return result
+        }
+    }
+
+private class DelegatingThemeAwareRippleNode(
+    private val interactionSource: InteractionSource,
+    private val bounded: Boolean,
+    private val radius: Dp,
+    private val color: ColorProducer,
+) : DelegatingNode(), CompositionLocalConsumerModifierNode, ObserverModifierNode {
+    private var rippleNode: DelegatableNode? = null
+
+    override fun onAttach() {
+        updateConfiguration()
+    }
+
+    override fun onObservedReadsChanged() {
+        updateConfiguration()
+    }
+
+    /**
+     * Handles [LocalRippleConfiguration] changing between null / non-null. Changes to
+     * [RippleConfiguration.color] and [RippleConfiguration.rippleAlpha] are handled as part of the
+     * ripple definition.
+     */
+    private fun updateConfiguration() {
+        observeReads {
+            val configuration = currentValueOf(LocalRippleConfiguration)
+            if (configuration == null) {
+                removeRipple()
+            } else {
+                if (rippleNode == null) attachNewRipple()
+            }
+        }
+    }
+
+    private fun attachNewRipple() {
+        val calculateColor =
+            ColorProducer {
+                val userDefinedColor = color()
+                if (userDefinedColor.isSpecified) {
+                    userDefinedColor
+                } else {
+                    // If this is null, the ripple will be removed, so this should always be non-null in
+                    // normal use
+                    val rippleConfiguration = currentValueOf(LocalRippleConfiguration)
+                    if (rippleConfiguration?.color?.isSpecified == true) {
+                        rippleConfiguration.color
+                    } else {
+                        currentValueOf(LocalContentColor)
+                    }
+                }
+            }
+
+        val calculateRippleAlpha = {
+            // If this is null, the ripple will be removed, so this should always be non-null in
+            // normal use
+            val rippleConfiguration = currentValueOf(LocalRippleConfiguration)
+            rippleConfiguration?.rippleAlpha ?: RippleDefaults.RippleAlpha
+        }
+
+        rippleNode =
+            delegate(
+                createRippleModifierNode(
+                    interactionSource,
+                    bounded,
+                    radius,
+                    calculateColor,
+                    calculateRippleAlpha,
+                ),
+            )
+    }
+
+    private fun removeRipple() {
+        rippleNode?.let { undelegate(it) }
+        rippleNode = null
+    }
+}
+
+private object StateTokens {
+    const val DraggedStateLayerOpacity = 0.16f
+    const val FocusStateLayerOpacity = 0.1f
+    const val HoverStateLayerOpacity = 0.08f
+    const val PressedStateLayerOpacity = 0.1f
+}
+
+private val DefaultBoundedRipple =
+    RippleNodeFactory(bounded = true, radius = Dp.Unspecified, color = Color.Unspecified)
+private val DefaultUnboundedRipple =
+    RippleNodeFactory(bounded = false, radius = Dp.Unspecified, color = Color.Unspecified)
diff --git a/lib/solanim-ui/src/main/java/io/visus/solanim/ui/foundation/SystemBarsDefaultInsets.kt b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/foundation/SystemBarsDefaultInsets.kt
new file mode 100644
index 0000000..9c5b8c0
--- /dev/null
+++ b/lib/solanim-ui/src/main/java/io/visus/solanim/ui/foundation/SystemBarsDefaultInsets.kt
@@ -0,0 +1,10 @@
+
+package io.visus.solanim.ui.foundation
+
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.runtime.Composable
+
+val WindowInsets.Companion.systemBarsForVisualComponents: WindowInsets
+    @Composable
+    get() = systemBars
diff --git a/lib/solanim-ui/src/test/java/io/visus/solanim/ui/ExampleUnitTest.kt b/lib/solanim-ui/src/test/java/io/visus/solanim/ui/ExampleUnitTest.kt
new file mode 100644
index 0000000..6debd4e
--- /dev/null
+++ b/lib/solanim-ui/src/test/java/io/visus/solanim/ui/ExampleUnitTest.kt
@@ -0,0 +1,17 @@
+package io.visus.solanim.ui
+
+import org.junit.Test
+
+import org.junit.Assert.*
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+class ExampleUnitTest {
+    @Test
+    fun addition_isCorrect() {
+        assertEquals(4, 2 + 2)
+    }
+}
\ No newline at end of file
diff --git a/lib/vulkan/.gitignore b/lib/vulkan/.gitignore
new file mode 100644
index 0000000..42afabf
--- /dev/null
+++ b/lib/vulkan/.gitignore
@@ -0,0 +1 @@
+/build
\ No newline at end of file
diff --git a/lib/vulkan/build.gradle.kts b/lib/vulkan/build.gradle.kts
new file mode 100644
index 0000000..c56f9a6
--- /dev/null
+++ b/lib/vulkan/build.gradle.kts
@@ -0,0 +1,56 @@
+plugins {
+    alias(libs.plugins.android.library)
+    alias(libs.plugins.kotlin.android)
+}
+
+android {
+    namespace = "io.visus.solanim.vulkan"
+    compileSdk {
+        version = release(36)
+    }
+
+    defaultConfig {
+        minSdk = 35
+
+        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
+        consumerProguardFiles("consumer-rules.pro")
+        externalNativeBuild {
+            cmake {
+                arguments += listOf("-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON")
+                cppFlags("-std=c++17")
+            }
+        }
+    }
+
+    buildTypes {
+        release {
+            isMinifyEnabled = false
+            proguardFiles(
+                getDefaultProguardFile("proguard-android-optimize.txt"),
+                "proguard-rules.pro"
+            )
+        }
+    }
+    externalNativeBuild {
+        cmake {
+            path("src/main/cpp/CMakeLists.txt")
+            version = "3.22.1"
+        }
+    }
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_11
+        targetCompatibility = JavaVersion.VERSION_11
+    }
+    kotlinOptions {
+        jvmTarget = "11"
+    }
+}
+
+dependencies {
+    implementation(libs.androidx.core.ktx)
+    implementation(libs.androidx.appcompat)
+    implementation(libs.material)
+    testImplementation(libs.junit)
+    androidTestImplementation(libs.androidx.junit)
+    androidTestImplementation(libs.androidx.espresso.core)
+}
\ No newline at end of file
diff --git a/lib/vulkan/consumer-rules.pro b/lib/vulkan/consumer-rules.pro
new file mode 100644
index 0000000..e69de29
diff --git a/lib/vulkan/proguard-rules.pro b/lib/vulkan/proguard-rules.pro
new file mode 100644
index 0000000..481bb43
--- /dev/null
+++ b/lib/vulkan/proguard-rules.pro
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
\ No newline at end of file
diff --git a/lib/vulkan/src/androidTest/java/io/visus/solanim/vulkan/ExampleInstrumentedTest.kt b/lib/vulkan/src/androidTest/java/io/visus/solanim/vulkan/ExampleInstrumentedTest.kt
new file mode 100644
index 0000000..4da3a05
--- /dev/null
+++ b/lib/vulkan/src/androidTest/java/io/visus/solanim/vulkan/ExampleInstrumentedTest.kt
@@ -0,0 +1,24 @@
+package io.visus.solanim.vulkan
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("io.visus.solanim.vulkan.test", appContext.packageName)
+    }
+}
\ No newline at end of file
diff --git a/lib/vulkan/src/main/AndroidManifest.xml b/lib/vulkan/src/main/AndroidManifest.xml
new file mode 100644
index 0000000..a5918e6
--- /dev/null
+++ b/lib/vulkan/src/main/AndroidManifest.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+</manifest>
\ No newline at end of file
diff --git a/lib/vulkan/src/main/cpp/CMakeLists.txt b/lib/vulkan/src/main/cpp/CMakeLists.txt
new file mode 100644
index 0000000..fe00e74
--- /dev/null
+++ b/lib/vulkan/src/main/cpp/CMakeLists.txt
@@ -0,0 +1,41 @@
+# For more information about using CMake with Android Studio, read the
+# documentation: https://d.android.com/studio/projects/add-native-code.html.
+# For more examples on how to use CMake, see https://github.com/android/ndk-samples.
+
+# Sets the minimum CMake version required for this project.
+cmake_minimum_required(VERSION 3.22.1)
+
+# Declares the project name. The project name can be accessed via ${ PROJECT_NAME},
+# Since this is the top level CMakeLists.txt, the project name is also accessible
+# with ${CMAKE_PROJECT_NAME} (both CMake variables are in-sync within the top level
+# build script scope).
+project("vulkan")
+
+if (${CMAKE_SYSTEM_NAME} STREQUAL "Android")
+    # ... other Android specific settings ...
+    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -Wl,-z,max-page-size=16384")
+endif()
+
+# Creates and names a library, sets it as either STATIC
+# or SHARED, and provides the relative paths to its source code.
+# You can define multiple libraries, and CMake builds them for you.
+# Gradle automatically packages shared libraries with your APK.
+#
+# In this top level CMakeLists.txt, ${CMAKE_PROJECT_NAME} is used to define
+# the target library name; in the sub-module's CMakeLists.txt, ${PROJECT_NAME}
+# is preferred for the same purpose.
+#
+# In order to load a library into your app from Java/Kotlin, you must call
+# System.loadLibrary() and pass the name of the library defined here;
+# for GameActivity/NativeActivity derived applications, the same library name must be
+# used in the AndroidManifest.xml file.
+add_library(${CMAKE_PROJECT_NAME} SHARED
+        # List C/C++ source files with relative paths to this CMakeLists.txt.
+        vulkan.cpp)
+
+# Specifies libraries CMake should link to your target library. You
+# can link libraries from various origins, such as libraries defined in this
+# build script, prebuilt third-party libraries, or Android system libraries.
+target_link_libraries(${CMAKE_PROJECT_NAME}
+        android
+        log)
\ No newline at end of file
diff --git a/lib/vulkan/src/main/cpp/core/VulkanRenderer.h b/lib/vulkan/src/main/cpp/core/VulkanRenderer.h
new file mode 100644
index 0000000..ed7bef2
--- /dev/null
+++ b/lib/vulkan/src/main/cpp/core/VulkanRenderer.h
@@ -0,0 +1,262 @@
+#ifndef VULKANRENDERER_H
+#define VULKANRENDERER_H
+
+#include <android/asset_manager.h>
+#include <android/log.h>
+#include <android/native_window.h>
+#include <android/native_window_jni.h>
+
+#include <vulkan/vulkan.h>
+#include <vulkan/vulkan_android.h>
+
+#include <cassert>
+#include <optional>
+#include <memory>
+#include <set>
+#include <vector>
+
+struct QueueFamilyIndices {
+    std::optional<uint32_t> graphicsFamily;
+    std::optional<uint32_t> presentFamily;
+
+    bool isComplete() {
+        return graphicsFamily.has_value() && presentFamily.has_value();
+    }
+};
+
+struct SwapChainSupportDetails {
+    VkSurfaceCapabilitiesKHR capabilities;
+    std::vector<VkSurfaceFormatKHR> formats;
+    std::vector<VkPresentModeKHR> presentModes;
+};
+
+struct ANativeWindowDestroyer {
+    void operator()(ANativeWindow* window) const {
+        if (window) {
+            ANativeWindow_release(window);
+        }
+    }
+};
+
+class VulkanRenderer {
+#define LOG_TAG "VulkanRenderer"
+
+#ifdef NDEBUG
+    #define LOGI(...) ((void)0)
+    #define LOGE(...) ((void)0)
+#else
+    #define LOGI(...) __android_log_print(ANDROID_LOG_INFO, LOG_TAG, __VA_ARGS__)
+    #define LOGE(...) __android_log_print(ANDROID_LOG_ERROR, LOG_TAG, __VA_ARGS__)
+#endif
+
+#define VK_CHECK(callback) {                                                \
+    do {                                                                    \
+        VkResult result = callback;                                         \
+        if (result != VK_SUCCESS) {                                         \
+            LOGE("Vulkan error: %d, at %s:%d", result, __FILE__, __LINE__); \
+            abort();                                                        \
+        }                                                                   \
+    } while (0);                                                            \
+}                                                                           \
+
+public:
+    void initialize();
+
+    bool isInitialized = false;
+
+private:
+    std::unique_ptr<ANativeWindow, ANativeWindowDestroyer> window_;
+
+    const std::vector<const char *> deviceExtensions_ = {VK_KHR_SWAPCHAIN_EXTENSION_NAME};
+
+    VkInstance instance_;
+    VkSurfaceKHR surface_;
+    VkPhysicalDevice physicalDevice_ = VK_NULL_HANDLE;
+    VkDevice device_;
+
+    VkQueue graphicsQueue_;
+    VkQueue presentQueue_;
+
+    void createInstance();
+    void createLogicalDeviceAndQueue();
+    void createSurface();
+    bool checkDeviceExtensionSupport(VkPhysicalDevice device);
+    QueueFamilyIndices findQueueFamilies(VkPhysicalDevice device) const;
+    bool isDeviceSuitable(VkPhysicalDevice device);
+    void pickPhysicalDevice();
+    static std::vector<const char*> getRequiredExtensions();
+};
+
+std::vector<const char*> VulkanRenderer::getRequiredExtensions() {
+    std::vector<const char *> extensions;
+
+    extensions.push_back("VK_KHR_surface");
+    extensions.push_back("VK_KHR_android_surface");
+
+    return extensions;
+}
+
+void VulkanRenderer::initialize() {
+    createInstance();
+    createSurface();
+    pickPhysicalDevice();
+    createLogicalDeviceAndQueue();
+
+    isInitialized = true;
+    LOGI("VulkanRenderer initialized successfully.");
+}
+
+void VulkanRenderer::createInstance() {
+    std::vector<const char*> requiredExtensions = getRequiredExtensions();
+
+    VkApplicationInfo appInfo{
+        .sType = VK_STRUCTURE_TYPE_APPLICATION_INFO,
+        .pApplicationName = "Vulkan Renderer",
+        .applicationVersion = VK_MAKE_VERSION(1, 0, 0),
+        .pEngineName = "No Engine",
+        .engineVersion = VK_MAKE_VERSION(1, 0, 0),
+        .apiVersion = VK_API_VERSION_1_1
+    };
+
+    VkInstanceCreateInfo createInfo{
+        .sType = VK_STRUCTURE_TYPE_INSTANCE_CREATE_INFO,
+        .pNext = nullptr,
+        .pApplicationInfo = &appInfo,
+        .enabledLayerCount = 0,
+        .enabledExtensionCount = (uint32_t)requiredExtensions.size(),
+        .ppEnabledExtensionNames = requiredExtensions.data(),
+    };
+
+    VK_CHECK(vkCreateInstance(&createInfo, nullptr, &instance_))
+}
+
+void VulkanRenderer::createLogicalDeviceAndQueue() {
+    QueueFamilyIndices indices = findQueueFamilies(physicalDevice_);
+
+    std::vector<VkDeviceQueueCreateInfo> queueCreateInfos;
+    std::set<uint32_t> uniqueQueueFamilies = {
+        indices.graphicsFamily.value(),
+        indices.presentFamily.value()
+    };
+
+    float queuePriority = 1.0f;
+
+    for (uint32_t queueFamily : uniqueQueueFamilies) {
+        VkDeviceQueueCreateInfo queueCreateInfo{
+            .sType = VK_STRUCTURE_TYPE_DEVICE_QUEUE_CREATE_INFO,
+            .queueFamilyIndex = queueFamily,
+            .queueCount = 1,
+            .pQueuePriorities = &queuePriority,
+        };
+        queueCreateInfos.push_back(queueCreateInfo);
+    }
+
+    VkPhysicalDeviceFeatures deviceFeatures{};
+
+    VkDeviceCreateInfo createInfo{
+        .sType = VK_STRUCTURE_TYPE_DEVICE_CREATE_INFO,
+        .queueCreateInfoCount = static_cast<uint32_t>(queueCreateInfos.size()),
+        .pQueueCreateInfos = queueCreateInfos.data(),
+        .enabledLayerCount = 0,
+        .enabledExtensionCount = static_cast<uint32_t>(deviceExtensions_.size()),
+        .ppEnabledExtensionNames = deviceExtensions_.data(),
+        .pEnabledFeatures = &deviceFeatures,
+    };
+
+    VK_CHECK(vkCreateDevice(physicalDevice_, &createInfo, nullptr, &device_))
+
+    vkGetDeviceQueue(device_, indices.graphicsFamily.value(), 0, &graphicsQueue_);
+    vkGetDeviceQueue(device_, indices.presentFamily.value(), 0, &presentQueue_);
+}
+
+void VulkanRenderer::createSurface() {
+    assert(window_ != nullptr);
+
+    const VkAndroidSurfaceCreateInfoKHR createInfo{
+        .sType = VK_STRUCTURE_TYPE_ANDROID_SURFACE_CREATE_INFO_KHR,
+        .pNext = nullptr,
+        .flags = 0,
+        .window = window_.get(),
+    };
+
+    VK_CHECK(vkCreateAndroidSurfaceKHR(instance_, &createInfo, nullptr, &surface_))
+}
+
+bool VulkanRenderer::checkDeviceExtensionSupport(VkPhysicalDevice device) {
+    uint32_t extensionCount;
+    vkEnumerateDeviceExtensionProperties(device, nullptr, &extensionCount,
+                                         nullptr);
+
+    std::vector<VkExtensionProperties> availableExtensions(extensionCount);
+    vkEnumerateDeviceExtensionProperties(device, nullptr, &extensionCount,
+                                         availableExtensions.data());
+
+    std::set<std::string> requiredExtensions(deviceExtensions_.begin(), deviceExtensions_.end());
+
+    for (const VkExtensionProperties &extension : availableExtensions) {
+        requiredExtensions.erase(extension.extensionName);
+    }
+
+    return requiredExtensions.empty();
+}
+
+QueueFamilyIndices VulkanRenderer::findQueueFamilies(VkPhysicalDevice device) const {
+    QueueFamilyIndices indices;
+
+    uint32_t queueFamilyCount = 0;
+    vkGetPhysicalDeviceQueueFamilyProperties(device, &queueFamilyCount, nullptr);
+
+    std::vector<VkQueueFamilyProperties> queueFamilies(queueFamilyCount);
+    vkGetPhysicalDeviceQueueFamilyProperties(device, &queueFamilyCount,
+                                             queueFamilies.data());
+
+    for (uint32_t i = 0; i < queueFamilies.size(); i++) {
+        if (queueFamilies[i].queueFlags & VK_QUEUE_GRAPHICS_BIT) {
+            indices.graphicsFamily = i;
+        }
+
+        VkBool32 presentSupport = false;
+        vkGetPhysicalDeviceSurfaceSupportKHR(device, i, surface_, &presentSupport);
+        if (presentSupport) {
+            indices.presentFamily = i;
+        }
+
+        if (indices.isComplete()) {
+            break;
+        }
+    }
+
+    return indices;
+}
+
+bool VulkanRenderer::isDeviceSuitable(VkPhysicalDevice device) {
+    QueueFamilyIndices indices = findQueueFamilies(device);
+
+    bool extensionsSupported = checkDeviceExtensionSupport(device);
+    bool swapChainAdequate = false;
+
+    return indices.isComplete() && extensionsSupported && swapChainAdequate;
+}
+
+
+void VulkanRenderer::pickPhysicalDevice() {
+    uint32_t deviceCount = 0;
+    vkEnumeratePhysicalDevices(instance_, &deviceCount, nullptr);
+
+    assert(deviceCount > 0);
+
+    std::vector<VkPhysicalDevice> devices(deviceCount);
+    vkEnumeratePhysicalDevices(instance_, &deviceCount, devices.data());
+
+    auto it = std::find_if(devices.begin(), devices.end(),
+                           [this](VkPhysicalDevice device) { return isDeviceSuitable(device); });
+
+    if (it != devices.end()) {
+        physicalDevice_ = *it;
+    } else {
+        LOGE("Failed to find a suitable GPU!");
+    }
+}
+
+
+#endif //VULKANRENDERER_H
\ No newline at end of file
diff --git a/lib/vulkan/src/main/cpp/vulkan.cpp b/lib/vulkan/src/main/cpp/vulkan.cpp
new file mode 100644
index 0000000..47922f3
--- /dev/null
+++ b/lib/vulkan/src/main/cpp/vulkan.cpp
@@ -0,0 +1,10 @@
+#include <jni.h>
+#include <string>
+
+extern "C" JNIEXPORT jstring JNICALL
+Java_io_visus_solanim_vulkan_NativeLib_stringFromJNI(
+        JNIEnv* env,
+        jobject /* this */) {
+    std::string hello = "Hello from C++";
+    return env->NewStringUTF(hello.c_str());
+}
\ No newline at end of file
diff --git a/lib/vulkan/src/main/java/io/visus/solanim/vulkan/NativeLib.kt b/lib/vulkan/src/main/java/io/visus/solanim/vulkan/NativeLib.kt
new file mode 100644
index 0000000..202d586
--- /dev/null
+++ b/lib/vulkan/src/main/java/io/visus/solanim/vulkan/NativeLib.kt
@@ -0,0 +1,17 @@
+package io.visus.solanim.vulkan
+
+class NativeLib {
+
+    /**
+     * A native method that is implemented by the 'vulkan' native library,
+     * which is packaged with this application.
+     */
+    external fun stringFromJNI(): String
+
+    companion object {
+        // Used to load the 'vulkan' library on application startup.
+        init {
+            System.loadLibrary("vulkan")
+        }
+    }
+}
\ No newline at end of file
diff --git a/lib/vulkan/src/test/java/io/visus/solanim/vulkan/ExampleUnitTest.kt b/lib/vulkan/src/test/java/io/visus/solanim/vulkan/ExampleUnitTest.kt
new file mode 100644
index 0000000..30b0780
--- /dev/null
+++ b/lib/vulkan/src/test/java/io/visus/solanim/vulkan/ExampleUnitTest.kt
@@ -0,0 +1,17 @@
+package io.visus.solanim.vulkan
+
+import org.junit.Test
+
+import org.junit.Assert.*
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+class ExampleUnitTest {
+    @Test
+    fun addition_isCorrect() {
+        assertEquals(4, 2 + 2)
+    }
+}
\ No newline at end of file
diff --git a/lumo.properties b/lumo.properties
new file mode 100644
index 0000000..f755da5
--- /dev/null
+++ b/lumo.properties
@@ -0,0 +1,4 @@
+ThemeName=AppTheme
+ComponentsDir=lib/solanim-ui/src/main/java/io/visus/solanim/ui
+PackageName=io.visus.solanim.ui
+KotlinMultiplatform=false 
diff --git a/settings.gradle.kts b/settings.gradle.kts
new file mode 100644
index 0000000..3359aec
--- /dev/null
+++ b/settings.gradle.kts
@@ -0,0 +1,26 @@
+pluginManagement {
+    repositories {
+        google {
+            content {
+                includeGroupByRegex("com\\.android.*")
+                includeGroupByRegex("com\\.google.*")
+                includeGroupByRegex("androidx.*")
+            }
+        }
+        mavenCentral()
+        gradlePluginPortal()
+    }
+}
+dependencyResolutionManagement {
+    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
+    repositories {
+        google()
+        mavenCentral()
+        maven { url = uri("https://jitpack.io") }
+    }
+}
+
+rootProject.name = "SolAnim"
+include(":app")
+include(":lib:solanim-ui")
+include(":lib:vulkan")