Okay, that cute cat motivation is friggin’ adorable!
The project works well. I got the first image at the default 1000 character mark, changed the motivation number to 250, and was updated with a new image at 1250 characters. (I was looking for an expected bug, but it worked fine!)
As a user, I would rather see the text that I am writing in the Markup window side by side while I’m typing my text. If I typo or miss a trailing symbol, I wouldn’t notice until I scroll down and read the preview.
I would suggest adding the actual preview on the right side, next to the text box, and then use a model to display the cat image to the user at X characters. Or maybe put the image above the text box and previewer? Just some suggestions.
Check out the padding for the boxes, it seems to be a bit inconsistent. Maybe put some more padding in the buttons, adjust the padding-top for the footer, etc.
Finally, for users who don’t read the instructions, it might be better to set the default motivation amount to something significantly less than 1000. I just kept typing nonsense without actually knowing what the “motivation amount” was. It would be a cute little surprise if the amount was something like 25, something easily attainable, and the user is prompted with the cat. Then they will realize what the “Motivate me” is about, and then can adjust it to what they want.
I love the extra love you placed into this project to really make it your own