reflective-ui-kmm - GitLite

KO | EN

gitlite — search

#python #ai #llm #machine-learning #rust #linux #docker #nodejs #awesome #vue #awesome-list #pytorch #mcp #open-source

reflective-ui-kmm

(★ 156)

This is to create a reflective UI in Compose Multiplatform

File Explorer

Download Latest Version (.zip)

- build.gradle.kts
- - MANIFEST.MF
- 592.js
- index.html
- load.mjs
- reflective-ui-kmm.wasm
- reflective-ui.xml
- skiko.js
- skiko.wasm
- webApp.js
- webApp.js.map
- - gradle-wrapper.jar
  - gradle-wrapper.properties
- - Config.xcconfig
- - ContentView.swift
  - Info.plist
  - iOSApp.swift
- - project.pbxproj
- Podfile
- yarn.lock
- build.gradle.kts
- - boilerplate.js
  - cleanupSourcemap.js
- build.gradle.kts
.gitignore
build.gradle.kts
cleanup.sh
gradle.properties
gradlew
gradlew.bat
LICENSE.txt
README.md
settings.gradle.kts

# Installation Guide

1. Get the code

git clone https://github.com/SEAbdulbasit/reflective-ui-kmm

Downloads the entire project code from GitHub to your computer.

cd reflective-ui-kmm

Moves into the project folder you just downloaded.

2. Gradle (Java/Kotlin)

Medium Recommended

Prerequisites

Git Needed to download the project code from GitHub.
JDK (Java) Required to build and run Java/Kotlin projects.
Gradle If the repo includes gradlew (Gradle Wrapper), you don't need to install Gradle separately.

cd androidApp

This project's files live in a subfolder, so move into it first.

./gradlew build

Builds the project using Gradle.

✅ A BUILD SUCCESSFUL message means it worked. The output is created under build/.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Transparent UI KMM

<a href="https://www.buymeacoffee.com/seabdulbasit" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

> **Note**
> This project is a work in progress. The current implementation uses Canvas in Compose Multiplatform to draw transparent circles and text. However, this may not be the most optimal solution. Alternative approaches and contributions are welcome.

This project is inspired by some tweets and the [reflective_ui_flutter](https://github.com/sbis04/reflective_ui_flutter) repository. The goal is to explore and implement transparent UI components in Jetpack Compose Multiplatform.

## Overview

The project currently uses the Canvas composable to draw circles and text with transparency. However, creating a new Canvas object for each element may not be the most efficient approach. This repository serves as a starting point to experiment with different alternatives and find the best solution for creating transparent UI components.

## Contributing

Contributions and feedback are highly encouraged. If you have alternative approaches, optimizations, or improvements, feel free to create a pull request. Together, we can find the most effective and efficient way to implement a transparent UI in Compose Multiplatform.

## Example Screenshot

## Demo
https://github.com/SEAbdulbasit/reflective-ui-kmm/assets/33172684/59bb18a5-4f87-4081-9e7a-039ef635ee9f

## Live
You can find live [here](https://seabdulbasit.github.io/reflective-ui-kmm/)

## License

This project is licensed under the [MIT License](LICENSE).