Word blend its a fun little app that lets you blend text with image. Its an effect inspired by iphone's multilayered clock. I've always enjoyed this little detail on my homescreen and decided to try building a tool that would give you more controll over this effect.
See the tool in action on https://wordblend.msiek.com/ or watch the video bellow.
How does it work?
User starts by selecting one of the demo images or uploading their own. The image is then being processed by an opensource background removal library background-removal-js Processing is happening exclusively on the client which made the implementation much easier. Once the background removal process finishes library returns a foreground layer with transparency. I then use that layer in combination with original image and text layer.
Image is then rendered on the html canvas which makes the export functionality much easier.
UI
I've decided to go for a simple and visual UI that would not overwhelm the user and give enough flexibility to create beautiful visuals with ease.
To make the process of building UI easier, I'm using mantine.dev UI components library which I adjust for my usecase.
Credits
- @multikev for design tips
- background-removal-js for their opensource library